Emby Dark Themes in different accent colors

[Happy2Play 9299]

Do you not get this with "background-color" on Library.html?

 

[Ben Z 86]

I only checked this one.

Until I realise the library one didn't work. That's why I said never mind 

[Happy2Play 9299]

I only checked this one.

Until I realise the library one didn't work. That's why I said never mind 

Ya I verified that change didn't affect Active Devices or Home Screen Resume or Scheduled Tasks.

[Ben Z 86]

OP edited:

• Made a V7 because 3.0.5985 totally messed up the previous version. There are now back more white button icons to be a more cleaner theme.

[Shrom 6]

Thx again @@Ben Z

Edited July 19, 2016 by Shrom

[Happy2Play 9299]

Looks like there are still changes coming.  Home screen My Views borders

[Happy2Play 9299]

@@Ben Z 

Pop-up for Restart and Shutdown
Changed 
.dialog .buttons to .dialog .buttons button

Added
.dialog .buttons button:focus {background-color: #080808 !important;}

Setting-Run server at startup and Enable anonymous usage reporting
Added
.paper-checkbox-0 #checkbox.checked.paper-checkbox {
    background-color: #4285F4 !important;
    border-color: #4285F4 !important;
}

Logs
added /* Dashboard */ section
.listItemIcon

[Ben Z 86]

 

@@Ben Z 

Pop-up for Restart and Shutdown
Changed 
.dialog .buttons to .dialog .buttons button

Added
.dialog .buttons button:focus {background-color: #080808 !important;}

Setting-Run server at startup and Enable anonymous usage reporting
Added
.paper-checkbox-0 #checkbox.checked.paper-checkbox {
    background-color: #4285F4 !important;
    border-color: #4285F4 !important;
}

Logs
added /* Dashboard */ section
.listItemIcon

The pop-up change was already in my manual fixes section. Thank you for the logs section though!

 

Are you talking about this checkbox?

 

There is nothing wrong for me? 

 

(3.0.6000)

[Ben Z 86]

Anyone have a solution to fix all magnifying glasses at once? I'm not quite in a good feeling to fix all of them individually.

Edited July 24, 2016 by Ben Z

[Happy2Play 9299]

The pop-up change was already in my manual fixes section. Thank you for the logs section though!

 

Are you talking about this checkbox?

 

There is nothing wrong for me? 

 

(3.0.6000)

 

 

They are green for me using Blue Theme - without that change.  Do yours change if you clear your browser cache?

 

 

@@Ben Z

 

Works for magnify glass, Home Button, (Home screen buttons Hamburger, Cast, Microphone, and Dashboard Gear) - (not an issue but changes three dot buttons on Library also).

[is=paper-icon-button-light] {color: #4285F4 !important;}

Beta 3.1.76.0

Edited July 24, 2016 by Happy2Play
side effects added

[Ben Z 86]

@@Happy2Play

 

Can you try my personal css to see if the two checkboxes you mentionnd earlier are fixed for you (because I didn't have to use your lines)? I'm curious.

3.0.6000 - RED - Dark Theme.txt

[Happy2Play 9299]

Yep works perfectly, found my problem have a line of uncommented dividers that between your code and some of my adjustments.  Weird how it only affect that one area.

Edited July 24, 2016 by Happy2Play

[the1legend 45]

@@Ben Z Your themes look great from what I can tell from the screenshots but for the life of me I can not figure out how to get any of them enabled. I have downloaded the V7 with the different colors and the logo pack. I see the custom CSS section of Emby and I have tried to insert the path of the red one renamed "red.css" but nothing changes. I played with CSS like ten years ago, but how to apply this to my server just escapes me. I have looked for a tutorial and searched the forums, I see a lot of members adding there own spin to the custom CSS but no one mentions how to actually apply these changes. Clearly I'm missing something very basic here. Can anyone help open my eyes to this process? I'm running 3.1.77 beta if that helps. Thanks!

[Happy2Play 9299]

@@Ben Z Your themes look great from what I can tell from the screenshots but for the life of me I can not figure out how to get any of them enabled. I have downloaded the V7 with the different colors and the logo pack. I see the custom CSS section of Emby and I have tried to insert the path of the red one renamed "red.css" but nothing changes. I played with CSS like ten years ago, but how to apply this to my server just escapes me. I have looked for a tutorial and searched the forums, I see a lot of members adding there own spin to the custom CSS but no one mentions how to actually apply these changes. Clearly I'm missing something very basic here. Can anyone help open my eyes to this process? I'm running 3.1.77 beta if that helps. Thanks!

 

Just copy the code and paste it in the custom css box.

[Luke 39332]

Better yet, build a skin for Emby Theater:

 

http://emby.media/community/index.php?/blog/1/entry-302-learn-how-to-create-skins-for-emby-theater/

 

The current web app is gradually being retro-fitted to adopt the newer techniques of Emby Theater, and that's why you keep having to re-do things from one release to the next.

[the1legend 45]

Just copy the code and paste it in the custom css box.

OMG That was so easy! This is what happens when you over complicate things in your head! Thanks!

[Ben Z 86]

Better yet, build a skin for Emby Theater:

 

http://emby.media/community/index.php?/blog/1/entry-302-learn-how-to-create-skins-for-emby-theater/

 

The current web app is gradually being retro-fitted to adopt the newer techniques of Emby Theater, and that's why you keep having to re-do things from one release to the next.

Alright. I'll do it when I have time.

[Happy2Play 9299]

One more, Pending version number black on black.

 

#pendingInstallations {color: #4285F4}

[Happy2Play 9299]

Sigh. change in beta 3.1.78.0.

 

Example Double checked in Red to be sure I didn't break something.

 

.adminDrawer .scrollContainer {background-color: #222222 !important;}

div#checkbox.checked.style-scope.paper-checkbox {border-color: #4285F4 !important;}

Edited July 26, 2016 by Happy2Play

[Blueeyiz702 220]

Where exactly do you change logo at,i missed that part and can't find?

[Ben Z 86]

@

 

 

 

and this one is for the mobile version

[Nickbert 7]

@@Ben Z

 

How about uploading your CSS-Flies to Github?

It would be easy for other members to request fixes for new versions.

All users who like to use your theme can easily import it via an @import rule at the top of their custom-CSS.

I just tried it with the one from http://emby.media/community/index.php?/topic/34365-emby-theater-inspired-web-client-css/

@import url('https://cdn.rawgit.com/Nickbert7/Emby-CSS/master/green.css');

Even if it only works until the server is adapted to the theater, it would still save some work.

Edited July 27, 2016 by Nickbert

[Ben Z 86]

@@Nickbert

I already slowly started doing it for emby theater.

 

EDIT: I guess you're pointing out a good idea.

Edited July 27, 2016 by Ben Z

[Ben Z 86]

@@Ben Z

 

How about uploading your CSS-Flies to Github?

It would be easy for other members to request fixes for new versions.

All users who like to use your theme can easily import it via an @import rule at the top of their custom-CSS.

I just tried it with the one from http://emby.media/community/index.php?/topic/34365-emby-theater-inspired-web-client-css/

@import url('https://cdn.rawgit.com/Nickbert7/Emby-CSS/master/green.css');

Even if it only works until the server is adapted to the theater, it would still save some work.

 

I didn't know about this import function. I'll definitely do it. Thanks !

[Ben Z 86]

If I get it right, we can't overwrite elements with already !important ?

 

Like the admin drawer

.adminDrawer .sidebarLink.selectedSidebarLink {
    background: #E81123 !important;
    color: #fff !important;
}