Custom CSS with Emby Web App

[Blueeyiz702 220]

There is a semicolon missing after the #000. That may be why yours is not black. I just fixed it in the original post. 

tried that and its still black,also tried with all six and the same? Bigjohn,do think you could put together a css that i can use all at once and just copy and paste.im no good with ccs stuff. something that would change the login screen and dashboard,im partial to blue if you have time.appreciate it.

Edited July 20, 2015 by blueeyiz7021

[kaylin4u 0]

Sweeit BigJohn!  That fixed it!

[bigjohn 732]

tried that and its still black,also tried with all six and the same? Bigjohn,do think you could put together a css that i can use all at once and just copy and paste.im no good with ccs stuff. something that would change the login screen and dashboard,im partial to blue if you have time.appreciate it.

Wait, you are trying to make it NOT black? My css for the login page purposefully makes it black. I thought you were saying the problem was that it is NOT black. I don't really have time to come up with another color scheme, this was just done on my own server to make the dashboard and login page dark because I am usually using it in a dark room and the bright color scheme hurt my eyes.

 

If you want to make it some other color, just change the #000 to some other hex color value. Use a site like this to pick a color:

http://www.w3schools.com/tags/ref_colorpicker.asp

[Blueeyiz702 220]

oh,my bad i missunderstood.the black is fine i wasnt sure it was supposed to be that color,thank you and im all good now with your help,thanks bigjohn!

 

Wait, you are trying to make it NOT black? My css for the login page purposefully makes it black. I thought you were saying the problem was that it is NOT black. I don't really have time to come up with another color scheme, this was just done on my own server to make the dashboard and login page dark because I am usually using it in a dark room and the bright color scheme hurt my eyes.

If you want to make it some other color, just change the #000 to some other hex color value. Use a site like this to pick a color:
http://www.w3schools.com/tags/ref_colorpicker.asp

[Blueeyiz702 220]

http://www.december.com/html/spec/color3hex1.html  bigjohn this page also provides the 3 digit hex codes like you use in your css script. it help me find code to match yours but

also the color i wanted.it migh some other people as well,just hover over color you want and it gives 3 digit hex code.

Edited July 21, 2015 by blueeyiz7021

[Blueeyiz702 220]

Edited July 21, 2015 by blueeyiz7021

[Blueeyiz702 220]

bigjohn,got background color i want and tried changing box colors and lettering colors to match but would take,dont i just change code like i did for background or did i miss something?

[Blueeyiz702 220]

Im going to learn this css if it kills me,or i kill it.think i got some pretty teachers here on emby

Edited July 21, 2015 by blueeyiz7021

[lokiii 0]

I'm a CSS noob so here is my question:

My emby home has 9 folders. Is there a way to apply a width:33% on the 1st line (so I'll have my 3 1st folders pretty big) and a width:16,6% on the 2nd line (so i'll have my 6 folders left smaller) ?

 

Thanks a lot! =)

[Happy2Play 9441]

I'm a CSS noob so here is my question:

My emby home has 9 folders. Is there a way to apply a width:33% on the 1st line (so I'll have my 3 1st folders pretty big) and a width:16,6% on the 2nd line (so i'll have my 6 folders left smaller) ?

 

Thanks a lot! =)

You mean like post 86.

[lokiii 0]

You mean like post 86.

Exactly like this, but my issue is that I only have folders, no channel nor collections...

I would say you can't apply different width value on a same div but, well, if someone can confirm or knows a secret about that...

[Guest]

Hi. I use the dark theme, but the side menu has the fonts in the dark as well and are unreadable. (1)
Changing the color of these sources for white ?

[mediacowboy 438]

@, try this.

 

.sidebarLinkText{color: #fff;}

Edited July 29, 2015 by mediacowboy

[Guest]

 

@@mediacowboy, it worked perfectly. Thank you so much.

Edited July 29, 2015 by Gato_Guga

[mediacowboy 438]

Glad I could be of help.

[sh0rty 544]

Guys, how do I change the colors (Play-green, Trailer-orange, sync-blue, shar-purple...) in the Details screen of an item in webview (Chrome)?

[primecut 19]

This turns them all blue. You can get the rgb values from i.e. paint

/* Buttons */
.btnPlay {
background: rgba(51,136,204,0.9) !important;
}
.btnSync {
background: rgba(51,136,204,0.9) !important;
}
.btnShare {
background: rgba(51,136,204,0.9) !important;
}
.btnMoreCommands {
background: rgba(51,136,204,0.9) !important;
}

Edited August 1, 2015 by primecut

[lja 51]

Please help. How can I change the white colour and darken the vertical scrolls? Thanks.

 

https://www.dropbox.com/s/r8ibu05nxeylsji/dashboard.JPG?dl=0

[bigjohn 732]

Please help. How can I change the white colour and darken the vertical scrolls? Thanks.

 

https://www.dropbox.com/s/r8ibu05nxeylsji/dashboard.JPG?dl=0

 

 

The white session boxes should already be handled by my css from post #21 of this thread (at least it works for me) in this section:

.activeSession:not(.playingSession) .sessionNowPlayingInnerContent {
  background-color: #252525;
  color: #f2f2f2;
  border: 1px solid #555;
}

.

.

.

.

I believe the scrollbar is browser dependent. What browser do you use?

[lja 51]

The white session boxes should already be handled by my css from post #21 of this thread (at least it works for me) in this section:

.activeSession:not(.playingSession) .sessionNowPlayingInnerContent {
  background-color: #252525;
  color: #f2f2f2;
  border: 1px solid #555;
}

.

.

.

.

I believe the scrollbar is browser dependent. What browser do you use?

 

Checked. That section was missing so I deleted what I had and inserted that from post#21. All ok now. Thanks again. Using Chrome

Edited August 2, 2015 by lja

[bigjohn 732]

Chrome uses Webkit, so you can adjust the scrollbar using these selectors:

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece  
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

Here is an example, though you obviously wouldn't want to use these colors:

::-webkit-scrollbar {
    width: 20px;
}
::-webkit-scrollbar-track {
    background-color: #00f;
    border-left: solid 1px #0f0;
}
::-webkit-scrollbar-thumb {
    background-color: #f00;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #0f0;
}

[lja 51]

 

Chrome uses Webkit, so you can adjust the scrollbar using these selectors:

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece  
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

Here is an example, though you obviously wouldn't want to use these colors:

::-webkit-scrollbar {
    width: 20px;
}
::-webkit-scrollbar-track {
    background-color: #00f;
    border-left: solid 1px #0f0;
}
::-webkit-scrollbar-thumb {
    background-color: #f00;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #0f0;
}

Thanks. Researching different colours.

[Blueeyiz702 220]

Is there a way to lighten up or even transparent images so that the backdrop shows thru,so you can actually see it better?

maybe make top layer of images transparent and the backdrop just a little lighter?

[Happy2Play 9441]

Is there a way to lighten up or even transparent images so that the backdrop shows thru,so you can actually see it better?

maybe make top layer of images transparent and the backdrop just a little lighter?

 

This should be what you are looking for.  Adjust the last number (.94) lower.

.backdropPage.ui-page-theme-b:not(.pageWithAbsoluteTabs), .backdropPage.pageWithAbsoluteTabs .pageBackground {background-color: rgba(20,20,20, .94) !important;}

[Blueeyiz702 220]

 

This should be what you are looking for.  Adjust the last number (.94) lower.

.backdropPage.ui-page-theme-b:not(.pageWithAbsoluteTabs), .backdropPage.pageWithAbsoluteTabs .pageBackground {background-color: rgba(20,20,20, .94) !important;}

Im still learning css happy2play,so where would i paste this? 

Edited August 8, 2015 by blueeyiz7021