Emby Dark Themes in different accent colors

[PenkethBoy 2066]

Thanks was just about to post on some odd behaviour but the new links solved that

[tmb4016 92]

Hi - Just found these and like the look of them so far. Just noticed that the Chapter extraction tiles are no longer visible on the movie detaisl page - is this by design ?

 

Great work

[Happy2Play 9451]

Hi - Just found these and like the look of them so far. Just noticed that the Chapter extraction tiles are no longer visible on the movie detaisl page - is this by design ?

 

Great work

Yes Ben Z has them hidden in this theme. 

/* ----------------------- 3. REMOVED ELEMENTS ----------------------- */
/* ----- 3.1 Home ----- */
/* Glow Light around image in Media Detail Page */
.itemDetailGalleryLink img:hover {
  -moz-box-shadow: 0 0 20px 3px transparent !Important;
  -webkit-box-shadow: 0 0 20px 3px transparent !Important;
  box-shadow: 0 0 20px 3px transparent !Important; }

/* Similar Contents and Scenes in Media Detail Page */
#similarCollapsible, #scenesCollapsible {
  display: none !important; }

Edited September 7, 2016 by Happy2Play

[tmb4016 92]

 Ok great to know. - Thanks

[negativzeroe 79]

Loving this, however I have a small issue, any way to exclude the dashboard from the rest of the theme? If not, then just the users portion?

[Happy2Play 9451]

Loving this, however I have a small issue, any way to exclude the dashboard from the rest of the theme? If not, then just the users portion?

 

Any particular reason? Almost all the theme targets the Dashboard.

Edited September 7, 2016 by Happy2Play

[negativzeroe 79]

@@Happy2Play just to be able to see the users names if we need to make changes. Instead of going into each one to see who they are. There is more than four lol.

 

EDIT of course if it is just fixed that would make me happy too lol.

Edited September 7, 2016 by negativzeroe

[Ben Z 86]

Loving this, however I have a small issue, any way to exclude the dashboard from the rest of the theme? If not, then just the users portion?

 

If I get it right, you pretty much just want the accent colors? You can delete section "4. DARK COLORS" which only remove the dark colors. Since it's a manual modification, you won't get auto updates this way and you'll need to copy teh CSS text from github.

 

@Happy2Play

 

​Is it a good idea to remove the "3. REMOVED ELEMENTS" section?

[Ben Z 86]

@@Happy2Play just to be able to see the users names if we need to make changes. Instead of going into each one to see who they are. There is more than four lol.

 

EDIT of course if it is just fixed that would make me happy too lol.

 

The user names are hidden for you? Not for me.

[negativzeroe 79]

If I get it right, you pretty much just want the accent colors? You can delete section "4. DARK COLORS" which only remove the dark colors. Since it's a manual modification, you won't get auto updates this way and you'll need to copy teh CSS text from github.

 

@@Happy2Play

 

​Is it a good idea to remove the "3. REMOVED ELEMENTS" section?

Thanks! That actually works for me. I'll bookmark your theme section for updates as well.

 

EDIT ok this is just plain odd... Now there are no names on the white background...

 

EDIT 2, I know what I did. I took this code to hide the "last seen" on the login screen that I found in another thread and it took them away. Sorry about all the nonsense:

 

.cardText:nth-of-type(2) {

    visibility: hidden;

Edited September 7, 2016 by negativzeroe

[Happy2Play 9451]

I haven't tried red theme but in blue I see names also.  But will test red to see if there is an issue.

 

 

@Happy2Play

 

​Is it a good idea to remove the "3. REMOVED ELEMENTS" section?

As for removed elements it is a personal preference.  I just think there needs to note that there are removed elements and user can remove that section if they are using the raw code and not the import option.  Unless users request it for no removed element.

[Happy2Play 9451]

 

Thanks! That actually works for me. I'll bookmark your theme section for updates as well.

 

EDIT ok this is just plain odd... Now there are no names on the white background...

 

EDIT 2, I know what I did. I took this code to hide the "last seen" on the login screen that I found in another thread and it took them away. Sorry about all the nonsense:

 

.cardText:nth-of-type(2) {

    visibility: hidden;

 

No problem, I will look to see if there is a solution to hide on login screen that doesn't affect User menu.  Shouldn't be to hard to target the #LogIn page.

[Happy2Play 9451]

@@negativzeroe this will hide last seen on login page.

/*Hide Last seen on login page*/
#divUsers div.cardText.cardText-secondary {display: none;}

[negativzeroe 79]

No problem, I will look to see if there is a solution to hide on login screen that doesn't affect User menu.  Shouldn't be to hard to target the #LogIn page.

 

 

@@negativzeroe this will hide last seen on login page.

/*Hide Last seen on login page*/
#divUsers div.cardText.cardText-secondary {display: none;}

Thanks! Also, since you guys are good with CSS from what I can see, maybe you would give a gander at the topic I posted earlier? Since I already have your attention

Not sure if it's something real simple or if it takes a ton of code but I've seen the "shrink login page" code so I'm hoping it's just something I can add in there.

http://emby.media/community/index.php?/topic/38817-wrapping-users-on-login/#entry363982 

[drashna 47]

I haven't tried red theme but in blue I see names also.  But will test red to see if there is an issue.

 

 

As for removed elements it is a personal preference.  I just think there needs to note that there are removed elements and user can remove that section if they are using the raw code and not the import option.  Unless users request it for no removed element.

 

 

This. 

 

Or just remove the removal, and offer it as a secondary CSS to be imported for those that want it. 

 

Personally, I like the removed sections, and i'm not really familiar with git at all, so I'm hosting the file on a local web server and manually updating the file every time there is an update to it, which is a hassle.  

 

 

 

But even still, can't emphasize how happy and appreciative how much work you've put into this gorgeous theme! 

Edited October 7, 2016 by drashna

[Ben Z 86]

This. 

 

Or just remove the removal, and offer it as a secondary CSS to be imported for those that want it. 

 

Personally, I like the removed sections, and i'm not really familiar with git at all, so I'm hosting the file on a local web server and manually updating the file every time there is an update to it, which is a hassle.  

 

 

 

But even still, can't emphasize how happy and appreciative how much work you've put into this gorgeous theme! 

 

It's something I was supposed to do and I just forgot it. Thank you to remind me this!

[drashna 47]

Though, thinking about it, is there a way to re-add the sections *afterwards*?  So all I have to do is modify my local config?

[Ben Z 86]

@@drashna

 

What do you mean by re-adding sections afterwards? I'm just removing the "REMOVED SECTIONS" from the main theme and I'll make it accessible in a different css file. Do you mean having a single css file with everything just for you?

[Ben Z 86]

@@drashna

 

By the way, why do you host the file on a local web server and manually update it? The function @import makes it possible to have an auto-update theme HERE.

 

You should only need something like this:

@import url('https://rawgit.com/BenZuser/Emby-Web-Dark-Themes-CSS/master/RED/theme.css');

And a second line with the same @import function with a different css file for removed elements that I'll do soon.

[Ben Z 86]

OP edited:

• ​Removed Section "3. REMOVED ELEMENTS". Added an extension section HERE. You can now have access to additional optional customizations from different CSS files.

[drashna 47]

@@drashna

 

What do you mean by re-adding sections afterwards? I'm just removing the "REMOVED SECTIONS" from the main theme and I'll make it accessible in a different css file. Do you mean having a single css file with everything just for you?

Well, it's a moot point now.

 

And I have 3 different CSS files being imported. Yours, one changing the unwatched bubbles into ribons, and a additional tweaks. 

 

And by re-adding the sections, I mean changing the CSS to re-enable the sections removed by your CSS file(s).  But as you've changed that... not really necessary now. 

 

@@drashna

 

By the way, why do you host the file on a local web server and manually update it? The function @import makes it possible to have an auto-update theme HERE.

 

You should only need something like this:

@import url('https://rawgit.com/BenZuser/Emby-Web-Dark-Themes-CSS/master/RED/theme.css');

And a second line with the same @import function with a different css file for removed elements that I'll do soon.

 

Yup, but I enjoy having the suggested content and chapter scenes, which you'd removed.  

 

And since i'm not very familiar with CSS, the only "reasonable" way to fix the issue was to manually edit the "remove section" out of your file and t hen access that. 

 

 

But since you've "fixed" that, I've already switched back. 

 

(and specifically, since I'm already running a webserver for a number of things, I just saved the file "onto" the webserver, and imported it, the way one would import yours). 

 

 

Again, thanks for the awesome work!

[Happy2Play 9451]

@@Ben Z

 

Looks like it would be better to use

select {background-color: #2b2b2b }

instead of

/* 4.2.4 Pop-up Dialogs */
/* Edit Image Selectors */
#selectImageProvider, #selectBrowsableImageType, #selectImageType,
#selectViewType, #selectIncludeItemTypes {
  background: #181818; }

To resolve background list for edit images and Reports.  And changing to that color doesn't have adverse affects on the Dashboard.

 

 

 

Stable need Metadata update

#metadataConfigurationPage form div {background: none !important; }

Edited October 14, 2016 by Happy2Play

[tmb4016 92]

Hi - I'm using the Dark Themes with the dev build - in the past I had also increased the size of the My Media buttons in the first section of the home screen however this does not seem to be working currently. I cannot remember whether this was as part of the theme or a separate modification.

 

Brief investigation seems using firefox debugging tools seems to point to the css of .smallBackdropCard-scalable {    width: 10%;} section which is screen resolution dependent but I cannot find away to fix this is the branding css. Chaning this in the debug to 18% gives the correct sizing I want but I cannot make it permanent.

 

any ideas welcome.

 

Thanks

[diogee 17]

Hi - I'm using the Dark Themes with the dev build - in the past I had also increased the size of the My Media buttons in the first section of the home screen however this does not seem to be working currently. I cannot remember whether this was as part of the theme or a separate modification.

 

Brief investigation seems using firefox debugging tools seems to point to the css of .smallBackdropCard-scalable {    width: 10%;} section which is screen resolution dependent but I cannot find away to fix this is the branding css. Chaning this in the debug to 18% gives the correct sizing I want but I cannot make it permanent.

 

any ideas welcome.

 

Thanks

 

 

homePageSection.section0 is the folders such as Movies/TV/Music etc.

homePageSection.section2 is for the "latest media" icons

/* --- Increase Home Page folder size --- */
div.homePageSection.section0 .smallBackdropCard-scalable {
  width: 20%; }


div.homePageSection.section2 .card {
  width: 16.6%; }

Just bang that at the end of your custom css and you should be good to go

Edited November 17, 2016 by Nostalgist92

[tmb4016 92]

Great - Thanks. I new it would be simple but not a css expert.

 

Thanks again.