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 1559]

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 24]

 

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 6770]

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 8278]

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 6770]

Submitted update on GitHub.

Thanks, all sorted.

 

.

Edited June 22, 2017 by CBers

[drikosv8 24]

@@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 6770]

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 8278]

???

 

Sorry I don't use any mobile devices.

[Happy2Play 8278]

@@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 6770]

@@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 37050]

 

@@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 6770]

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 3745]

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 3745]

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 8278]

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 6770]

Thanks Happy .

[chef 3745]

 

@@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 6770]

@@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 6770]

Thanks @@Ben Z

[CBers 6770]

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 37050]

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