Jump to content

Emby Dark Themes in different accent colors


Ben Z

Recommended Posts

Happy2Play

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

 

5789676e6d731_scan.jpg

Link to comment
Share on other sites

Ben Z

I only checked this one.

57896a28714c2_progress.png

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

  • Like 1
Link to comment
Share on other sites

Happy2Play

I only checked this one.

57896a28714c2_progress.png

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

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

Link to comment
Share on other sites

Ben Z

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

Happy2Play

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

Ben Z

 

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

579443ca94089_checkbox.png

 

There is nothing wrong for me? 

 

(3.0.6000)

Link to comment
Share on other sites

Ben Z

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.

5794496865333_magnifyingglass.png

Edited by Ben Z
Link to comment
Share on other sites

Happy2Play

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

 

Are you talking about this checkbox?

579443ca94089_checkbox.png

 

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?

 

5794612eda33f_Settings.jpg

 

@@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 by Happy2Play
side effects added
  • Like 1
Link to comment
Share on other sites

Happy2Play

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

the1legend

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

Link to comment
Share on other sites

Happy2Play

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

the1legend

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!

Link to comment
Share on other sites

Ben Z

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.

Link to comment
Share on other sites

Happy2Play

One more, Pending version number black on black.

 

579513f529e61_pending.jpg

#pendingInstallations {color: #4285F4}
Link to comment
Share on other sites

Happy2Play

Sigh. change in beta 3.1.78.0.

 

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

 

5796ba0c4df41_change.jpg

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

div#checkbox.checked.style-scope.paper-checkbox {border-color: #4285F4 !important;}
Edited by Happy2Play
Link to comment
Share on other sites

Blueeyiz702

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

Link to comment
Share on other sites

Nickbert

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

Ben Z

@@Nickbert

I already slowly started doing it for emby theater.

 

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

Edited by Ben Z
Link to comment
Share on other sites

Ben Z

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

Link to comment
Share on other sites

Ben Z

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;
}

57992fc01b18b_drawer.png

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