Jump to content

Custom CSS with Emby Web App


Luke

Recommended Posts

Go to Users, click on a user, there is the area for connecting the user via Media Browser Connect that needed a dark background. Then click on the password area, if there has not been a password set and you are on a screen with enough vertical resolution you will see an area of light background at the bottom of the page.

 

So, just cleaning up some little stuff that I missed.

Link to comment
Share on other sites

Also added this to make the bottom border on the menu and links match the blue from my Disparity collection images with the blue glow:

/* Deeper blue in links/bottom border to match Disparity*/
.libraryViewNav .ui-btn-active {
  border-bottom-color: #005EF3;
}
.libraryViewNav a:not(.ui-btn-active):hover {
color: #005EF3 !important;
}
.ui-page-theme-b a:visited, html .ui-bar-b a:visited, html .ui-body-b a:visited, html body .ui-group-theme-b a:visited {
  color: #005EF3;
}
.ui-page-theme-b a:hover, html .ui-bar-b a:hover, html .ui-body-b a:hover, html body .ui-group-theme-b a:hover {
  color: #005EF3;
}
  • Like 2
Link to comment
Share on other sites

CarlosLima

 

Couple of additions to my dark dashboard css:

.ui-overlay-a {
  background-color: #252525;
}
#fldConnectInfo {
  background: #333 !important;
}

Thanks for that.

Link to comment
Share on other sites

CarlosLima

You could use the CSS code to reduce the size of images of users on the login screen ??

 

54f4e493149b1_users.png

Link to comment
Share on other sites

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

 

Good day,

 

It good idea, how about it Luke and @@ebr ?

 

The correct place will be at :

 

http://mediabrowser.tv/community/index.php?/forum/69-community-contributions/

 

As Techy said, with some images to give the members the feel and look of the modify custom CSS code.

 

My best

  • Like 1
Link to comment
Share on other sites

primecut

I used some of the code in this thread to customize my poster/thumb view and thought I'd share:

Screenshots: http://imgur.com/a/QGJsz

/* Played Indicator Size+Color+Shadow+Border */
.playedIndicator {
font-size: 13px;
border-radius: 3px;
background: rgba(49,124,186,0.9);
height: 20px;
width: 34px;
top: 6px;
right: 3px;
border-style: groove;
border-width: 1px;
border-color: #99E5FF;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.9);
box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.9);
}
/* Thumbs & Posters Border+Shadow */
.cardImage {
border-radius: 5px;
border-style: solid;
border-width: 1px;
border-color: #333333;
-webkit-box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.9);
box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.9);
}
  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...
pyrater

Well, Ya gotta start somewhere,

Changed a font, looks very cinemary

 

54f43970131c0_Capture.jpg

 

How do you make those icons small and wide?

Link to comment
Share on other sites

Happy2Play

How do you make those icons small and wide?

 

Go to My Preferences-Web Client-Home Page Section 1-drop down to "My View (buttons)"

 

550dda9f5388d_preferences.jpg

Link to comment
Share on other sites

  • 3 months later...
MegaCarnac
Thank you very much everyone for the contribution that has been made here, thanks to you I managed to leave my most enjoyable Emby.
 
I wanted to change everything that is red to blue in that proportion:
# 22aadd >>> # FF0000 or # F00
# 3388cc >>> # CC0000 or # C00

 

 

http://imgur.com/a/hrLqL

 

 

I just want to make the colors in the pattern in red, completely change the blue, but I can not find the code in CSS to make this change.
If anyone can help me I appreciate it.
Edited by MegaCarnac
  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...
Blueeyiz702

This is my CSS I am running pieced together by BigJohn.

Just tried with Opera browser and very nice it works perfect.Might want to lighten up text on the left,it shows real dark for me.

 

post-48638-0-97590900-1436754404_thumb.png

Edited by blueeyiz7021
Link to comment
Share on other sites

lokiii

I've tried your CSS but I can't find how to show my collections on my home, I can only show a folder called "collections" and that contains all my collections, but I can't find how to show them directly on home.

Can someone please help ?

thanks a lot ! =)

Link to comment
Share on other sites

I've tried your CSS but I can't find how to show my collections on my home, I can only show a folder called "collections" and that contains all my collections, but I can't find how to show them directly on home.

Can someone please help ?

thanks a lot ! =)

 

CSS can only change styling (fonts, colors, sizes, placement to some degree and hiding things).  You cannot change the logic of the application with it.  There isn't currently any logic that will show individual collections on the home page.

Link to comment
Share on other sites

Blueeyiz702

 

Oh yeah, forgot I had done the login page previously as well:

/* Dark login page */
#loginPage {
  background-color: #000
}
.logoLibraryMenuButtonText {
  color: #fff;
}
#manualLoginForm {
  color: #fff;
}

bigjohn,i pasted your css in start page on opera and got this,kinda like it turned out black and white.

but can i ask what is the correct color it should,if not black and white? the background on screenshot should be blacl.55ab4a087d9f2_screenshot1921680204809620

Edited by blueeyiz7021
Link to comment
Share on other sites

Maybe your browser wants the full six digits on the color code...?  #000000

Link to comment
Share on other sites

bigjohn,i pasted your css in start page on opera and got this,kinda like it turned out black and white.

but can i ask what is the correct color it should,if not black and white? the background on screenshot should be blacl.

 

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

Link to comment
Share on other sites

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

 

Ahhhhh..... :)

Link to comment
Share on other sites

kaylin4u

I've been messing with my dashboard, and after the recent upgrade, the letters on the left are black.  What do I need to change on my css setting?

Link to comment
Share on other sites

I've been messing with my dashboard, and after the recent upgrade, the letters on the left are black.  What do I need to change on my css setting?

 

 

I had to add this:

.sidebarLinkText {
  color:#fff;
}
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...