Emby Dark Themes in different accent colors

[arrbee99 1559]

Just wondering about the Glow Light around image/poster in Media Detail Page - should it be the same colour as the rest of the theme, or can't it be changed, which is why you give the option to remove it ? Thanks

[Happy2Play 8278]

Just wondering about the Glow Light around image/poster in Media Detail Page - should it be the same colour as the rest of the theme, or can't it be changed, which is why you give the option to remove it ? Thanks

Do you want it a different color?  It was integrated and transparent before, now that is separate you have to re-added it yourself with your personal accent color.

 

Change the "#4285F4" to your accent color, or a color of your choice.

.itemDetailGalleryLink img:hover {
    -moz-box-shadow: 0 0 20px 3px #4285F4 !important;
    -webkit-box-shadow: 0 0 20px 3px #4285F4 !important;
    box-shadow: 0 0 20px 3px #4285F4 !important;
}

Edited December 5, 2016 by Happy2Play

[arrbee99 1559]

Yay, that worked. Thanks very much.

[Ben Z 86]

Just wondering about the Glow Light around image/poster in Media Detail Page - should it be the same colour as the rest of the theme, or can't it be changed, which is why you give the option to remove it ? Thanks

 

It's a kind of oversight. It's true that I give the option to remove it or not but it's not a reason to remove it completely in the original theme. I re-added the glow light in the theme (without the !important so the "REMOVED ELEMENTS" extension will overwrite it if you use it) . Thank you!

[Ben Z 86]

It's a kind of oversight. It's true that I give the option to remove it or not but it's not a reason to remove it completely in the original theme. I re-added the glow light in the theme (without the !important so the "REMOVED ELEMENTS" extension will overwrite it if you use it) . Thank you!

 

It seems that the glow light doesn't work when you use the @import url function but it works if you copy directly the css text. Not sure what is causing this issue though... I guess manipulating the !important function is tricky.

 

​EDIT: Deleting the browser's cache fixed it.

Edited December 5, 2016 by Ben Z

[arrbee99 1559]

Yes thanks, the fix from Happy2Play is no longer need, still works.

[tmb4016 86]

Hi all,

 

I've just tired to mod my custom css and noticed that it is not saving ... anybody else had this or any suggestions as to why it will not save ?

Thanks in advance

[Luke 37050]

Hi all,

 

I've just tired to mod my custom css and noticed that it is not saving ... anybody else had this or any suggestions as to why it will not save ?

Thanks in advance

 

Hi there, we're very sorry to hear about this. In order to best help you, please provide the information requested in how to report a problem. thanks !

[shorty1483 451]

Hi all,

 

I've just tired to mod my custom css and noticed that it is not saving ... anybody else had this or any suggestions as to why it will not save ?

Thanks in advance

 

Tried with latest .260 Beta Server and everything saves as it should.

[PenkethBoy 2063]

Hi

 

I there a way to override the size of the "My Media" images - i see its fixed in the page code as "....maxHeight=135&maxWidth=240...."

 

i had a play around but failed dismally as have zero css skills

 

I preferred them when they were larger a couple of months ago

 

any ideas suggestions

[diogee 17]

 

Hi

 

I there a way to override the size of the "My Media" images - i see its fixed in the page code as "....maxHeight=135&maxWidth=240...."

 

i had a play around but failed dismally as have zero css skills

 

I preferred them when they were larger a couple of months ago

 

any ideas suggestions 

 

See my post a little bit further up, bang that in to your css changing the % to your liking

Edit: quoted my ealier post as this post went on a new page

 

 

homePageSection.section0 is the folders such as Movies/TV/Music etc.

homePageSection.section2 is for the "latest media" icons

/* --- Increase Home Page folder size --- */
div.homePageSection.section0 .smallBackdropCard-scalable {
  width: 20%; }


div.homePageSection.section2 .card {
  width: 16.6%; }

Just bang that at the end of your custom css and you should be good to go

 

 

 

Edited February 21, 2017 by Nostalgist92

[PenkethBoy 2063]

Ahh! Bisto

 

Thanks works a treat!!

[Swynol 375]

anyone having issues with using the import ("theme") from github? the CSS doesnt load for me, works fine if i copy/paste the CSS into emby.

 

EDIT: nevermind i noticed rawgit is currently offline

Edited April 11, 2017 by Swynol

[Happy2Play 8278]

anyone having issues with using the import ("theme") from github? the CSS doesnt load for me, works fine if i copy/paste the CSS into emby.

 

not seeing any issues here using Blue theme.

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

[Ben Z 86]

No issues either.

[CarlosLima 148]

Suddenly I noticed these areas with blank fountains and backgrounds and I believe it was not so. Can you help fix it, please?

 

[Ben Z 86]

 

@@CarlosLima

It doesn't do that for me. Which web browser are you using?

Edited April 13, 2017 by Ben Z

[Happy2Play 8278]

You have custom css somewhere that is broken.  That section is covered in the theme.

/* 4.2.5 Backgrounds */


/* Individual Elements */
div.card.activeSession > div > div:nth-child(2) {
  background: #2b2b2b !important;
  border-top: 1px solid #343434 !important;
  color: #ffffff !important; }

Edited April 13, 2017 by Happy2Play

[Happy2Play 8278]

@@Ben Z heads-up the More buttons on Home Screen and other areas are changing.

 

Example

[CarlosLima 148]

 

@@CarlosLima

It doesn't do that for me. Which web browser are you using?

 

Hi, sorry about that. Interestingly this came about for some reason as it did not have this event previously. I use Chrome.

---

Your CSS solved the problem. Thank you very much.

 

Edited April 13, 2017 by CarlosLima

[CarlosLima 148]

Hello @@Ben Z

I'm using a few days ago its theme in blue color and with it, I totally abandoned my CSS code built in several steps and for a long time.

Your theme is really fantastic and I hope you keep it always up to date. Congratulations and thanks for sharing.

I have processed several customizations and pasted below the link of your theme and so far, no conflict has occurred. Just my luck?

If you understand how relevant, I would like to share each of my customizations, explaining the changes caused and so may be useful for some.

[Ben Z 86]

 

Hello @@Ben Z

I'm using a few days ago its theme in blue color and with it, I totally abandoned my CSS code built in several steps and for a long time.

Your theme is really fantastic and I hope you keep it always up to date. Congratulations and thanks for sharing.

I have processed several customizations and pasted below the link of your theme and so far, no conflict has occurred. Just my luck?

If you understand how relevant, I would like to share each of my customizations, explaining the changes caused and so may be useful for some.

 

Yes sure, go ahead. You can share it here.

[CarlosLima 148]

Hello, having been authorized by the author of the topic and the fantastic theme, I come to share my customizations and their changes, as I imagine they may be useful for some.

 

The image shows that I do not need to use the code so I can share. I applied the link and below it I added the CSS codes and no conflict has occurred so far.

 

I take this opportunity to ask the author of the topic to alert if you notice that any of the codes used may conflict with the original theme and thank you for it.

 

[CarlosLima 148]

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

@@CarlosLima

 

You can also open your own topics sharing these updated and personal customizations.  If a theme is used just mention it with your customization.