Emby Dark Themes in different accent colors

[Ben Z 86]

Thanks very much but unfortunately doesn't work for me. Forgot to mention am using Chrome (whatever its updated to and server 3.2.17.17 though was 17.16 when I asked. Also zoom in to 110% in Chrome, Windows scaling is standard 100%. Think it might be something to do with Creators update ? Also did a fresh install of Windows 10 for the Creators update and it didn't work after that, (neither did this though I don't use that episode thing that often https://emby.media/community/index.php?/topic/47043-episode-image-size/page-2#entry453416 ),coincidence maybe ?

 

Weird but its not exactly life / sanity threatening.

I'm using this :

div.verticalSection.section0 .smallBackdropCard-scalable {
 width: 16.5% !important; }

EDIT: The Happy2Play's solution also works for me so I don't know why it doesn't for you.

Edited May 28, 2017 by Ben Z

[arrbee99 1712]

Well now I'm even more confused. I replaced Happy2Play's method with yours (Ben Z), saved, refreshed and it didn't work. So I thought, bugger it, deleted all css, saved, refreshed and it was back to default. Then I copied all the CSS I had, this stuff...

 

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

 

.background-theme-b .backgroundContainer.withBackdrop {

    background: rgba(0, 0, 0, .7)!important;

}

 

.alphaPicker-vertical {

    font-size: 125% !important;

}

 

.alphabetPicker {

    bottom: 70px !important;

}

 

/* My Media Image Size */

.smallBackdropCard {width: 20.0% !important;}

 

/*Make Active episode larger*/

#itemDetailPage .thumbDetailImageContainer {

    width: 425px !important;

}

 

/*Make more episodes smaller*/

#childrenContent .overflowBackdropCard-scalable {

    width: 20vw !important;

}

 

I had saved to a Word document earlier in May (just in case) back into the now empty css location, saved, refreshed and now everything is working, including the My Media stuff and the episode size stuff here  https://emby.media/community/index.php?/topic/47043-episode-image-size/ 

 

YAY

[drikosv8 25]

 

Custom login page with images

 

/* Hide the Emby logo, scroll down the login screen, add two images. */

.logoLibraryMenuButtonText {

  display: none;

}

 

.imgLogoIcon {

    display: none;

}

 

img[src*=css/images/mblogoicon.png] {

    display: none;

}

#loginPage {

    padding-top: 150px;

}

#loginPage:before {

    position: absolute;

    margin-left: auto;

    margin-right: auto;

    left: 0;

    right: 0;

    top: 35px;

    content: " ";

    background: url(Link_to_top_image);

    background-size: 100% 100%;

    width: 700px;

    height: 170px;

}

#loginPage:after {

    position: absolute;

    margin-left: auto;

    margin-right: auto;

    left: 0;

    right: 0;

    top: 700px;

    content: " ";

    background: url(Link_to_bottom_image);

    background-size: 100% 100%;

    width: 600px;

    height: 200px;

}

 

Example of the result:

 

 

 

 

@@Happy2Play

 

When viewing the login screen, by browsing through the mobile phone appears all out of layout.

 

Someone can help with the custom welcome screen for mobile phone too, so it looks like the picture above, but on the phone and on the computer.

 

Thank you

Edited June 10, 2017 by drikosv8

[CBers 7114]

The text in the HELP balloons next to the local and wan IP addresses in the Dashboard don't show up - they are solid green.

 

I'm running beta server 3.2.20.9 and the beta GREEN css file.

 

Thanks.

[Happy2Play 9441]

The text in the HELP balloons next to the local and wan IP addresses in the Dashboard don't show up - they are solid green.

 

I'm running beta server 3.2.20.9 and the beta GREEN css file.

 

Thanks.

 

Submitted update on GitHub.

[CBers 7114]

Submitted update on GitHub.

Thanks, all sorted.

 

.

Edited June 22, 2017 by CBers

[drikosv8 25]

@@Happy2Play

 

When viewing the login screen, by browsing through the mobile phone appears all out of layout.

 

Someone can help with the custom welcome screen for mobile phone too, so it looks like the picture above, but on the phone and on the computer.

 

Thank you

???

[CBers 7114]

When the server restarts, both the RESTART and CANCEL buttons are the same colour.

 

Is that something that can that be changed?

 

I'm running beta server 3.2.20.11 and the beta GREEN css file.

 

Thanks.

[Happy2Play 9441]

???

 

Sorry I don't use any mobile devices.

[Happy2Play 9441]

@@Ben Z

 

Not sure if you want to leave the new progressring green or accent it. (3.2.20.11)

.progressring-spiner {
     border: .25em solid #0C57D6 !important;
}

@@CBers

 

Which button should be accented, should the theme stay with the default concept and accent only Cancel?

 

Ben Z  this would accomplish that. 

button.btnOption.raised.formDialogFooterItem.formDialogFooterItem-autosize.button-cancel.emby-button
{ background: black !important; }

[CBers 7114]

@@CBers

 

Which button should be accented, should the theme stay with the default concept and accent only Cancel?

 

Ben Z this would accomplish that.

button.btnOption.raised.formDialogFooterItem.formDialogFooterItem-autosize.button-cancel.emby-button
{ background: black !important; }

It's the non-actional button which is the default, so when restarting, it's the CANCEL button.

 

Hope that makes sense.

[Luke 40072]

 

@@Ben Z

 

Not sure if you want to leave the new progressring green or accent it. (3.2.20.11)

.progressring-spiner {
     border: .25em solid #0C57D6 !important;
}

@@CBers

 

Which button should be accented, should the theme stay with the default concept and accent only Cancel?

 

Ben Z  this would accomplish that. 

button.btnOption.raised.formDialogFooterItem.formDialogFooterItem-autosize.button-cancel.emby-button
{ background: black !important; }

 

You don't need all of those qualifiers. Just the emby button cancel will do it.

[CBers 7114]

Not sure if this is an Emby server difference, but the HOME page has a bold line above the menu in BETA that isn't in Stable.

 

Stable

 

 

Beta

 

 

Thanks.

[chef 3808]

Hi, I attempted to add a custom css from the github link, the link was then pasted into my branding section, but nothing changed. No new colours weren't added

Edited June 27, 2017 by chef

[Ben Z 86]

Not sure if this is an Emby server difference, but the HOME page has a bold line above the menu in BETA that isn't in Stable.

 

Stable

 

 

Beta

 

 

Thanks.

The bold line sometimes appears in beta and disappear when stable is updated. Maybe a glitch on the different drawer's layers.

[Ben Z 86]

Hi, I attempted to add a custom css from the github link, the link was then pasted into my branding section, but nothing changed. No new colours weren't added

 

I don't know what to say. The @import url(...) should work. Try the whole code like this one if it works.

[chef 3808]

I don't know what to say. The @import url(...) should work. Try the whole code like this one if it works.

My work PC is crappy, it won't show the updated scheme, but the mobile version of my website does! So cool man! Thanks for getting this together!

[Happy2Play 9441]

Not sure if this is an Emby server difference, but the HOME page has a bold line above the menu in BETA that isn't in Stable.

 

Stable

 

 

Beta

 

 

Thanks.

 

This is do to the new layout.  Stable has sub menu tabs lower than beta.

 

 

This will spot fix it.

.dashboardDocument .mainDrawer {
    background: #181818 !important;
}

Here is the code that is pushing the container just a bit to lower than needed.

@[member="Media"] (min-width: 40em)
.dashboardDocument .mainDrawer-scrollContainer {
    margin-top: 4.9em!important;
}

[CBers 7114]

Thanks Happy .

[chef 3808]

 

@@Happy2Play

 

When viewing the login screen, by browsing through the mobile phone appears all out of layout.

 

Someone can help with the custom welcome screen for mobile phone too, so it looks like the picture above, but on the phone and on the computer.

 

Thank you

 

 

I get no picture when adding the css.

[CBers 7114]

@@CBers

 

Which button should be accented, should the theme stay with the default concept and accent only Cancel?

 

Ben Z this would accomplish that.

button.btnOption.raised.formDialogFooterItem.formDialogFooterItem-autosize.button-cancel.emby-button
{ background: black !important; }

@@Happy2Play Did this get progressed please?

[Ben Z 86]

@@Happy2Play Did this get progressed please?

 

Sorry, I'm late on this one. It's fixed.

[CBers 7114]

Thanks @@Ben Z

[CBers 7114]

I think the latest Emby server Beta release (v3.2.26.4) has broken the CSS.

 

I've had to remove it to be able to see content.

 

It's like white text on a white background.

[Luke 40072]

@@Ben Z you may have to make more use of !important, because color schemes are being loaded after your css. I am doing some gruntwork to make all of this possible:

https://emby.media/community/index.php?/topic/49217-just-a-little-fun/