Jump to content

Custom CSS with Emby Web App


Luke

Recommended Posts

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

Link to comment
Share on other sites

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;
}
Link to comment
Share on other sites

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

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.

  • Like 5
Link to comment
Share on other sites

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;
}
Link to comment
Share on other sites

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

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;
}
Link to comment
Share on other sites

Angelblue05

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

techywarrior

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.

  • Like 1
Link to comment
Share on other sites

mediacowboy

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

 

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

CarlosLima

 

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.

Link to comment
Share on other sites

Happy2Play

 

 

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.

 

54f09f54bb91e_TrailerIcon.png

  • Like 1
Link to comment
Share on other sites

CarlosLima

Works on Chrome.

 

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

 

Version: 40.0.2214.115

Link to comment
Share on other sites

mediacowboy

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

 

img[title=Missing local trailer.] {
  display:none;
}
 
 
Without CSS
post-348-0-65860700-1425057930_thumb.png
 
With CSS
post-348-0-46915200-1425057930_thumb.png
Edited by mediacowboy
Link to comment
Share on other sites

mediacowboy

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