Emby Dark Themes in different accent colors

[CBers 6771]

I added the beta CSS to my Stable server and they were there, which is why I said it was the beta server.

[Ben Z 86]

Beta is all fixed now (until someone find another issue of course    )

[Luke 37060]

See here:

https://emby.media/community/index.php?/topic/49217-just-a-little-fun/page-2&do=findComment&comment=471813

 

Those using this will probably want to set their theme setting to whatever is closes to what you're getting from @@Ben Z.

[PenkethBoy 2063]

does not appear to have any effect on the css - which is good - with the default choices of dark theme and light dashboard

[PenkethBoy 2063]

Beta is all fixed now (until someone find another issue of course    )

Thanks beta css working again

[Ben Z 86]

I just updated beta again. Since Luke include a dark theme now, my own dark colors are in a different css file now.

 

Use my themes as usual but you now have to import my other dark colors css file if you want to use it. See here.

 

Basically, 2 imports, one for accent color and one for dark theme :

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

You can also use the new function added in Emby with default dark colors. See Luke's post here.

Edited July 31, 2017 by Ben Z

[CBers 6771]

I just updated beta again. Since Luke include a dark theme now, my own dark colors are in a different css file now.

 

Use my themes as usual but you now have to import my other dark colors css file if you want to use it. See here.

 

Basically, 2 imports, one for accent color and one for dark theme :

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

You can also use the new function added in Emby with default dark colors. See Luke's post here.

Thanks @@Ben Z. All very confusing now

[CarlosLima 148]

Hi,

 

I use the blue color, pasting the theme link and below it, my CSS changes and everything works fine.

 

I'd like to know if it's possible to paste the code (not the link anymore) and continue adding my CSS changes to the end of your code.

 

My question is about the updates, that is, with each new version of Emby Server, would it be necessary to get the complete code again to override what is in use?

 

Thanks for answering.

[chef 3745]

 

Hi,

 

I use the blue color, pasting the theme link and below it, my CSS changes and everything works fine.

 

I'd like to know if it's possible to paste the code (not the link anymore) and continue adding my CSS changes to the end of your code.

 

My question is about the updates, that is, with each new version of Emby Server, would it be necessary to get the complete code again to override what is in use?

 

Thanks for answering.

That's the beauty of the link, if Ben Z updates the GitHub repo you theme will update.

 

His code is open source on git though, but you can always add extra CSS to the branding in emby

 

Or n override Anything with !important, as long as it is posted after the theme.

 

Put the link at the top of your banding and then add whatever you want after

[CarlosLima 148]

I understood and this is how I do, however what I would like to do is to change the url of an image that is in the theme code.

[Ben Z 86]

I understood and this is how I do, however what I would like to do is to change the url of an image that is in the theme code.

Then yes, just copy/paste the code and add whatever you want after like @@chef said.

 

Nothing really changed, I've just split the theme into 2 css files, accent color and dark color. People can now choose to have a light version of the theme now if that's what they want.

 

Edit: Beta only at the moment.

Edited July 31, 2017 by Ben Z

[CarlosLima 148]

Again, I understand, my question is, by copying / pasting, will I have automatic updates of the theme?

[Ben Z 86]

Again, I understand, my question is, by copying / pasting, will I have automatic updates of the theme?

 

No. You can only get automatic updates by using @import(url)

[Ben Z 86]

@@CarlosLima

 

I don't have time to test it right now but you should be able to use my theme with @import at the beginning and just add those same css lines with different urls.

/* Logos Modifications */
/* Login Page */
.imgLogoIcon {
  content: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/BLUE/logo.png) !important; }

/* Main Drawer Mobile */
.adminDrawerLogo img {
  content: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/BLUE/logo.png) !important; }

/* Home Page */
.pageTitleWithLogo {
  background-image: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/BLUE/logo.png) !important; }

Make sure to keep all those !important, it'll override my code. You should have your personal logos and automatic updates.

[CarlosLima 148]

@@CarlosLima

 

I don't have time to test it right now but you should be able to use my theme with @import at the beginning and just add those same css lines with different urls.

/* Logos Modifications */
/* Login Page */
.imgLogoIcon {
  content: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/BLUE/logo.png) !important; }

/* Main Drawer Mobile */
.adminDrawerLogo img {
  content: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/BLUE/logo.png) !important; }

/* Home Page */
.pageTitleWithLogo {
  background-image: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/BLUE/logo.png) !important; }

Make sure to keep all those !important, it'll override my code. You should have your personal logos and automatic updates.

 

Now, everything's perfect here.

I used the remote link (to have the automatic updates) and pasted the codes below it and worked.

 

A detail. It is possible to increase the size of the logo image in "Home Page", because mine was greatly reduced, almost illegible.

Edited July 31, 2017 by CarlosLima

[Ben Z 86]

 

Now, everything's perfect here.

I used the remote link (to have the automatic updates) and pasted the codes below it and worked.

 

A detail. It is possible to increase the size of the logo image in "Home Page", because mine was greatly reduced, almost illegible.

 

.pageTitleWithLogo {
    width: 10em !important; }

Change the number to whatever you want.

[CarlosLima 148]

.pageTitleWithLogo {
    width: 10em !important; }

Change the number to whatever you want.

 

 

It's really "em" ?, because nothing has changed here.

[Ben Z 86]

It's really "em" ?, because nothing has changed here.

 

It's preferable to have a logo with similar proportions like this because you have a limited area.

 

You can use pixels also like 10px .

[drikosv8 24]

Can someone help me?

 

I need to put a link in the image of this code.

 

 

#loginPage:after {

    position: absolute;

    margin-left: auto;

    margin-right: auto;

    left: 0;

    right: 0;

    top: 570px;

    content: " ";

    background: url(https://2.bp.blogspot.com/-F3ChOFhU35Y/WG0g872ZodI/AAAAAAAAIQA/dU1Pk4Dg57MTNfQwt-xFEqYFfmuffNrJACPcB/s1600/cinema%2Bem%2Bcasa%2Bpng.png);

    background-size: 100% 100%;

    width: 280px;

    height: 180px;

}

 

 

 

I do not have much experience with css.

 

Thank you

 

 

 

Alguem pode me ajudar?

 

Preciso colocar um link na imagem desse código.

 

Não tenho muita experiencia com css.

 

Obrigado

[drikosv8 24]

Can someone help me?

 

I need to put a link in the image of this code.

 

 

 

#loginPage:after {

    position: absolute;

    margin-left: auto;

    margin-right: auto;

    left: 0;

    right: 0;

    top: 570px;

    content: " ";

    background: url(https://2.bp.blogspot.com/-F3ChOFhU35Y/WG0g872ZodI/AAAAAAAAIQA/dU1Pk4Dg57MTNfQwt-xFEqYFfmuffNrJACPcB/s1600/cinema%2Bem%2Bcasa%2Bpng.png);

    background-size: 100% 100%;

    width: 280px;

    height: 180px;

}

 

 

 

 

I do not have much experience with css.

 

Thank you

 

 

 

 

Alguem pode me ajudar?

 

Preciso colocar um link na imagem desse código.

 

Não tenho muita experiencia com css.

 

Obrigado

 

Please :-)

[drikosv8 24]

Please :-)

@@Ben Z

 

Can you help me?

 

Thanks

[Ben Z 86]

@@Ben Z

 

Can you help me?

 

Thanks

I'm not really sure to understand what you want. What do you want to do with this image ?

 

Edit: You want a link when you click on it?

Edited August 12, 2017 by Ben Z

[drikosv8 24]

I'm not really sure to understand what you want. What do you want to do with this image ?

 

Edit: You want a link when you click on it?

 

Correct friend,

 

I would like this image that appears in the login screen, had a link that when clicking on it opened another page.

 

Thanks for helping

 

 

Isso amigo,

 

Gostaria que essa imagem que aparece na tela de login, tivesse um link que ao clicar nela abrisse uma outra pagina.

 

Obrigado por ajudar

Edited August 12, 2017 by drikosv8

[Ben Z 86]

 

Correct friend,

 

I would like this image that appears in the login screen, had a link that when clicking on it opened another page.

 

Thanks for helping

 

 

Isso amigo,

 

Gostaria que essa imagem que aparece na tela de login, tivesse um link que ao clicar nela abrisse uma outra pagina.

 

Obrigado por ajudar

 

 

Sorry, you can't do that with CSS. CSS is all about colours, layout, esthetics, etc.

[drikosv8 24]

Sorry, you can't do that with CSS. CSS is all about colours, layout, esthetics, etc.

I thank you for responding anyway.

 

Many thanks, my friend.