Jump to content

Custom CSS with Emby Web App


Luke

Recommended Posts

Blueeyiz702

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 by blueeyiz7021
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Blueeyiz702

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

Link to comment
Share on other sites

Blueeyiz702

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 by blueeyiz7021
Link to comment
Share on other sites

Blueeyiz702

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?

Link to comment
Share on other sites

Blueeyiz702

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

Edited by blueeyiz7021
Link to comment
Share on other sites

lokiii

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! =)

Link to comment
Share on other sites

Happy2Play

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.

Link to comment
Share on other sites

lokiii

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... :D

Link to comment
Share on other sites

CarlosLima

55b915c642b20_black.jpg


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 ?

Link to comment
Share on other sites

mediacowboy

@, try this.

 

.sidebarLinkText{color: #fff;}
Edited by mediacowboy
Link to comment
Share on other sites

shorty1483

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)?

Link to comment
Share on other sites

primecut

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

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?

Link to comment
Share on other sites

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 by lja
Link to comment
Share on other sites

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

 

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.

Link to comment
Share on other sites

Blueeyiz702

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?55c508b219d2f_screenshot1921680204809620

Link to comment
Share on other sites

Happy2Play

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

Blueeyiz702

 

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