Jump to content

Emby Dark Themes in different accent colors


Ben Z

Recommended Posts

PenkethBoy

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

Link to comment
Share on other sites

tmb4016

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

Link to comment
Share on other sites

Happy2Play

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 by Happy2Play
Link to comment
Share on other sites

negativzeroe

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?57d03cf6437fe_Capture.png

Link to comment
Share on other sites

Happy2Play

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?

 

57d03cf6437fe_Capture.png

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

Edited by Happy2Play
Link to comment
Share on other sites

negativzeroe

@@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 by negativzeroe
Link to comment
Share on other sites

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?57d03cf6437fe_Capture.png

 

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?

Link to comment
Share on other sites

@@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.

57d0580fcb592_Croquis.png

Link to comment
Share on other sites

negativzeroe

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 by negativzeroe
Link to comment
Share on other sites

Happy2Play

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.

Link to comment
Share on other sites

Happy2Play

 

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.

Link to comment
Share on other sites

Happy2Play

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

/*Hide Last seen on login page*/
#divUsers div.cardText.cardText-secondary {display: none;}
Link to comment
Share on other sites

negativzeroe

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 

Link to comment
Share on other sites

  • 5 weeks later...
drashna

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 by drashna
  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

drashna

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?

Link to comment
Share on other sites

@@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?

Link to comment
Share on other sites

@@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.

Link to comment
Share on other sites

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.
  • Like 2
Link to comment
Share on other sites

drashna

@@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!

  • Like 1
Link to comment
Share on other sites

Happy2Play

@@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.

 

58001100a28af_backgroun1.jpg

 

58001025da55b_backbround.jpg

 

Stable need Metadata update

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

58001aa795e46_metadata.jpg

Edited by Happy2Play
  • Like 1
Link to comment
Share on other sites

  • 1 month later...
tmb4016

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

Link to comment
Share on other sites

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 by Nostalgist92
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...