Custom CSS with Emby Web App

[mediacowboy 438]

@@bigjohn, what haven't you customised yet. I like everything you've done.

[bigjohn 733]

Thanks! I haven't done anything with the panel that pops in from the right side, so it doesn't match the rest yet.

[jwill 28]

I did make one addition to bigjohn's Dark Dashboard theme. On the "Advanced" page from the left sidebar, there was a white-text on yellow background that was hard to read. I don't know what I am doing with CSS so this is probably bad style, but it at least got rid of the yellow background (but kept a narrow yellow border for emphasis).

 
 

.warningFieldDescription {
background-color: #555;
color: #fff;
}

[jwill 28]

Any idea how to change the "Support Media Browser Team" background from bright green to something more subdued?

[bigjohn 733]

Ahh, yes I didn't even look at the Advanced page. Looks like I need to fix some text on the scheduled tasks page too. On that warning text I would just make the text dark and leave the yellow background.

 

I'll update the previous dark dashboard theme with these changes:

.warningFieldDescription {
  color: #000;
}
.ui-page-theme-a .ui-bar-inherit {
  border-color: #555;
  background-color: #555;
  color: #fff;
}

[bigjohn 733]

Any idea how to change the "Support Media Browser Team" background from bright green to something more subdued?

 

Sure! Become a supporter and it will vanish completely.

[jwill 28]

Sure! Become a supporter and it will vanish completely.

 

I don't want it to vanish completely, just be more subdued. This did the trick:

 

.supporterPromotion {
  border-color: #555;
  background-color: #555;
  color: #fff;
}
.btnActionAccent {
  border-color: #555;
  background-color: #555;
  color: #fff;
}

[bigjohn 733]

You could also try this for the supporter button, I kinda like it:

/* Muted supporter button */
@-webkit-keyframes muted {
  0% { background-color: #52B54B; -webkit-box-shadow: 0 0 3px #52B54B; }
  50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #52B54B; -webkit-box-shadow: 0 0 3px #52B54B; }
}
@-moz-keyframes muted {
  0% { background-color: #52B54B; -moz-box-shadow: 0 0 3px #52B54B; }
  50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #52B54B; -moz-box-shadow: 0 0 3px #52B54B; }
}
@-o-keyframes muted {
  0% { background-color: #52B54B; box-shadow: 0 0 3px #52B54B; }
  50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #52B54B; box-shadow: 0 0 3px #52B54B; }
}
@keyframes muted {
  0% { background-color: #52B54B; box-shadow: 0 0 3px #52B54B; }
  50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #52B54B; box-shadow: 0 0 3px #52B54B; }
}
.btnActionAccent {
  -webkit-animation: muted 1500ms infinite;
  -moz-animation: muted 1500ms infinite;
  -o-animation: muted 1500ms infinite;
  animation: muted 1500ms infinite;
}

[bigjohn 733]

Added the following to darken the right side pop-in panel:

.ui-body-a {
  background-color: #111;
  color: #fff;
}
.ui-body-a .ui-btn {
  border: 1px solid #555 !important;
  background-color: #333 !important;
  color: #fff !important;
}
.ui-body-a .ui-btn:hover {
  border: 1px solid #555 !important;
  background-color: #373737 !important;
  color: #fff !important;
}

[mediacowboy 438]

Thank you @@bigjohn I love the darker theme. 

[Angelblue05 4131]

@@Luke, @@Abobader

 

If it's a good idea, can we maybe create a sub forum for Custom CSS while it's still early? I have a feeling this thread is going to get really long and be tedious to see the awesome stuff people come up with.

Edited March 3, 2015 by Angelblue05

[techywarrior 689]

It would probably be a good idea for people to post their CSS as an attached file and show a screenshot of what it does... and yes, I agree there should maybe be a separate sub forum where the people that make custom CSS can have their own threads. Sort of like a real theme for the other clients.

[mediacowboy 438]

@@bigjohn. I noticed an issue with the css in the Metadata Manager. If you browse the Online Images it show white text on a white background. This is the CSS I did to fix it.
 

.remoteImageDetails{

  background:#252525;

}

Edited February 25, 2015 by mediacowboy

[bigjohn 733]

 

@@bigjohn. I noticed an issue with the css in the Metadata Manager. If you browse the Online Images it show white text on a white background. This is the CSS I did to fix it.

 

.remoteImageDetails{

  background:#252525;

}

 

 

Yeah, good catch. Probably something similar on the Identify dialog. I'll incorporate that, but I will use a color consistent with everything else (#333).

[mediacowboy 438]

I corrected my css. Thank you and Identify looks good it uses the same div tag.

[bigjohn 733]

I corrected my css. Thank you and Identify looks good it uses the same div tag.

 

Well, yours was "correct", just because I want to be consistent doesn't mean you have to be...

[mediacowboy 438]

i like that color better. I was just guessing when I choose that color.

[Guest]

 

Some changes I have implemented on my server, just tweaks to the existing interface. Haven't tested on multiple browsers or screen sizes, just made it work for me.

/*Remove 'Missing Trailer' icon in metadata editor, I don't use trailers*/
img[title='Missing local trailer.'] {
  display:none;
}

I applied this CSS but the trailer icon remains displayed. You can review the code is correct ? Thanks for that.

[Happy2Play 9460]

 

 

Some changes I have implemented on my server, just tweaks to the existing interface. Haven't tested on multiple browsers or screen sizes, just made it work for me.

/*Remove 'Missing Trailer' icon in metadata editor, I don't use trailers*/
img[title='Missing local trailer.'] {
  display:none;
}

I applied this CSS but the trailer icon remains displayed. You can review the code is correct ? Thanks for that.

 

It worked for FF 36 and IE 11.

 

[mediacowboy 438]

Works on Chrome.

[Guest]

Works on Chrome.

 

I use chrome and is not hiding the missing trailer icon.

 

Version: 40.0.2214.115

[mediacowboy 438]

40.0.2214.115. Hmm I copied this and put it in my custom CSS

 

img[title=Missing local trailer.] {

  display:none;

}

 

 

Without CSS

 

With CSS

Edited February 27, 2015 by mediacowboy

[Guest]

In fact here does not work. Thanks for your help.

 

[mediacowboy 438]

Let me get back a computer and I will double check I think I was looking in the wrong spot.

 

@, It works on mine. I'm not sure what the issue is.

Edited February 27, 2015 by mediacowboy

[Guest]

I really do not understand what is wrong here. Other CSS codes work well.