Jump to content

Custom CSS with Emby Web App

Luke

By Luke,
in Web App CSS

 Share Followers 14

Recommended Posts

bigjohn

bigjohn 590

Posted
Posted

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 post
Share on other sites
jwill

jwill 28

Posted
Posted

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 post
Share on other sites
bigjohn

bigjohn 590

Posted
Posted

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 post
Share on other sites
bigjohn

bigjohn 590

Posted
Posted

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 post
Share on other sites
jwill

jwill 28

Posted
Posted

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 post
Share on other sites
bigjohn

bigjohn 590

Posted
Posted

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 post
Share on other sites
bigjohn

bigjohn 590

Posted
Posted

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 post
Share on other sites
Angelblue05

Angelblue05 4122

Posted
Posted (edited)

@@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 post
Share on other sites
techywarrior

techywarrior 686

Posted
Posted

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 post
Share on other sites
mediacowboy

mediacowboy 436

Posted
Posted (edited)

@@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 post
Share on other sites
bigjohn

bigjohn 590

Posted
Posted

 

@@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 post
Share on other sites
bigjohn

bigjohn 590

Posted
Posted

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 post
Share on other sites
CarlosLima

CarlosLima 82

Posted
Posted

 

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 post
Share on other sites
Happy2Play

Happy2Play 4249

Posted
Posted

 

 

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 post
Share on other sites
mediacowboy

mediacowboy 436

Posted
Posted (edited)

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 post
Share on other sites
mediacowboy

mediacowboy 436

Posted
Posted (edited)

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 post
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
 Share
Followers 14
Go to topic listing
×
×
  • Create New...