Jump to content

Custom CSS with Emby Web App


Recommended Posts

Blueeyiz702
#txtCustomCss{
  overflow-y:scroll;
}
.accentButton {display: none;}

.ui-icon-check.ui-btn-icon-notext {
  display: block;
  position: absolute;
  top: -1px;
  text-align: center;
  vertical-align: middle;
  width: 25px;
  height: 20px;
  padding-top: 3px;
  border-radius: 50%;
  color: #fff;
  background: rgb(153,0,0);
}

.myLibraryPosterItem .posterItemImage {
background-color: #111;
border: 2px solid rgba(0,94,243,0.75);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,0.75);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6);
}

/* Dark Dashboard theme */
.ui-page-theme-a {
  background-color: #252525;
  border-color: #454545;
  color: #fff;
}
.ui-page-theme-a .ui-body-inherit{
  background-color:#2a2a2a;
  border-color:#1d1d1d;
  color: #fff;
}
.ui-page-theme-a .content-secondary {
  background: #2a2a2a;
}
.ui-page-theme-a .ui-btn {
  background-color: #333 !important;
  border-color: #1f1f1f !important;
  color: #fff !important;
}
.ui-page-theme-a .ui-btn:hover {
  background-color: #373737 !important;
  border-color: #1f1f1f !important;
  color: #fff !important;
}
.ui-page-theme-a .ui-btn.ui-btn-active {
  background-color: #38c !important;
  border-color: #38c !important;
  color: #fff !important;
}
.ui-page-theme-a .selectedSidebarLink {
  background-color: #474747 !important;
}
.sidebarLink:hover {
  background-color: #373737;
}
.ui-page-theme-a .ui-bar-inherit {
  border-color: #555;
  background-color: #555;
  color: #fff;
}
.ui-page-theme-a .sidebarLinkIcon {
  color: #fff;
}
.newsItem {
  border-bottom: 1px solid #555;
}
.ui-page-theme-a .detailSectionHeader {
  background-color: #333 !important;
  border-color: #1f1f1f !important;
  color: #fff;
}
.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;
}
.visualCardBox {
  background-color: #333;
}
.activeSession:not(.playingSession) .sessionNowPlayingInnerContent {
  background-color: #252525;
  color: #fff;
  border: 1px solid #555;
}
.warningFieldDescription {
  color: #000;
}
.remoteImageDetails{
  background:#333;
}

img[title='Missing local trailer.'] {
  display:none;
}
 
.backdropPage.ui-page-theme-b:not(.pageWithAbsoluteTabs), .backdropPage.pageWithAbsoluteTabs .pageBackground {background-color: rgba(20,20,20, .94) !important;}

This is the css i use Happy2Play.

Edited by blueeyiz7021
Link to post
Share on other sites
Happy2Play

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

Same here, you can just paste it at the end.

Link to post
Share on other sites
Blueeyiz702

#txtCustomCss{
overflow-y:scroll;
}
.accentButton {display: none;}

.ui-icon-check.ui-btn-icon-notext {
display: block;
position: absolute;
top: -1px;
text-align: center;
vertical-align: middle;
width: 25px;
height: 20px;
padding-top: 3px;
border-radius: 50%;
color: #fff;
background: rgb(153,0,0);
}

.myLibraryPosterItem .posterItemImage {
background-color: #111;
border: 2px solid rgba(0,94,243,0.75);
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,0.75);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6);
}

/* Dark Dashboard theme */
.ui-page-theme-a {
background-color: #252525;
border-color: #454545;
color: #fff;
}
.ui-page-theme-a .ui-body-inherit{
background-color:#2a2a2a;
border-color:#1d1d1d;
color: #fff;
}
.ui-page-theme-a .content-secondary {
background: #2a2a2a;
}
.ui-page-theme-a .ui-btn {
background-color: #333 !important;
border-color: #1f1f1f !important;
color: #fff !important;
}
.ui-page-theme-a .ui-btn:hover {
background-color: #373737 !important;
border-color: #1f1f1f !important;
color: #fff !important;
}
.ui-page-theme-a .ui-btn.ui-btn-active {
background-color: #38c !important;
border-color: #38c !important;
color: #fff !important;
}
.ui-page-theme-a .selectedSidebarLink {
background-color: #474747 !important;
}
.sidebarLink:hover {
background-color: #373737;
}
.ui-page-theme-a .ui-bar-inherit {
border-color: #555;
background-color: #555;
color: #fff;
}
.ui-page-theme-a .sidebarLinkIcon {
color: #fff;
}
.newsItem {
border-bottom: 1px solid #555;
}
.ui-page-theme-a .detailSectionHeader {
background-color: #333 !important;
border-color: #1f1f1f !important;
color: #fff;
}
.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;
}
.visualCardBox {
background-color: #333;
}
.activeSession:not(.playingSession) .sessionNowPlayingInnerContent {
background-color: #252525;
color: #fff;
border: 1px solid #555;
}
.warningFieldDescription {
color: #000;
}
.remoteImageDetails{
background:#333;
}

img[title='Missing local trailer.'] {
display:none;
}

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

 

 

 

Got it,screenshot below is at 50,kewl beans! thanks again.

Edited by blueeyiz7021
Link to post
Share on other sites
Blueeyiz702

love the backdrops when you can see them clear,thanks to Happy2Play for his awesome help with this.55c5c71568452_screenshot1921680204809620

Link to post
Share on other sites
  • 5 weeks later...

 

This CSS makes the dashboard mostly match the metadata editor:

(edited to include warning text color)

(edited to include changes for right side pop-in panel)

(edited to include remoteImageDetail text color)

(edited to include fldConectInfo background and overlay background)

(edited to include sidebarLinkText color, add important to remoteImageDetails background)

/* Dark Dashboard theme */
.ui-overlay-a {
  background-color: #252525;
}
.ui-page-theme-a {
  background-color: #252525;
  border-color: #454545;
  color: #fff;
}
.ui-page-theme-a .ui-body-inherit{
  background-color:#2a2a2a;
  border-color:#1d1d1d;
  color: #fff;
}
.ui-page-theme-a .content-secondary {
  background: #2a2a2a;
}
.ui-page-theme-a .ui-btn {
  background-color: #333 !important;
  border-color: #1f1f1f !important;
  color: #fff !important;
}
.ui-page-theme-a .ui-btn:hover {
  background-color: #373737 !important;
  border-color: #1f1f1f !important;
  color: #fff !important;
}
.ui-page-theme-a .ui-btn.ui-btn-active {
  background-color: #38c !important;
  border-color: #38c !important;
  color: #fff !important;
}
.ui-page-theme-a .selectedSidebarLink {
  background-color: #474747 !important;
}
.sidebarLink:hover {
  background-color: #373737;
}
.sidebarLinkText {
  color:#fff;
}
.ui-page-theme-a .ui-bar-inherit { 
  border-color: #555;
  background-color: #555;
  color: #fff; 
} 
.ui-page-theme-a .sidebarLinkIcon { 
  color: #fff; 
} 
.newsItem { 
  border-bottom: 1px solid #555; 
} 
.ui-page-theme-a .detailSectionHeader {
  background-color: #333 !important;
  border-color: #1f1f1f !important;
  color: #fff;
} 
.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; 
} 
.visualCardBox { 
  background-color: #333; 
} 
.activeSession:not(.playingSession) .sessionNowPlayingInnerContent { 
  background-color: #252525; 
  color: #fff; 
  border: 1px solid #555; 
} 
.warningFieldDescription { 
  color: #000; 
} 
#fldConnectInfo { 
  background: #333 !important; 
} 
.remoteImageDetails { 
  background:#333 !important; 
}

Thank you for this Theme.  I love it but with the newest update to the server the Advanced > Hosting page has unreadably dark text for the titles of the port number fields and for the port numbers themselves.

 

Is there a chance that this is configurable with a change to the CSS?

Link to post
Share on other sites

Thank you for this Theme.  I love it but with the newest update to the server the Advanced > Hosting page has unreadably dark text for the titles of the port number fields and for the port numbers themselves.

 

Is there a chance that this is configurable with a change to the CSS?

 

 

 

There are probably some better selectors to use, but this is a quick stab at it without much testing:

.input-content.paper-input-container input {
  color: #f2f2f2;
}
.input-content.paper-input-container label {
  color:#f2f2f2 !important;
}
.paper-input-container-0 .input-content.paper-input-container iron-autogrow-textarea, .paper-input-container-0 .input-content.paper-input-container .paper-input-input, .paper-input-container-0 .input-content.paper-input-container textarea, .paper-input-container-0 .input-content.paper-input-container input {
  color:#f2f2f2 !important;
}
.paper-checkbox-0 #checkboxContainer.paper-checkbox {
  background-color:#555;
}
.paper-checkbox-0 #checkboxLabel.paper-checkbox {
  color:#f2f2f2;
}
Link to post
Share on other sites

Hey, this is my first post, but I was surprised there was no setting in the server to change the background colors on the TV Guide.  I could do it in NextPVR, but not using Emby.
 
After looking around in the settings and the forum, I found out you could customize the css easily.  After investigating further in the browser, I found out that there only seems to be 4 genres listed in the TV guide, Plain, Sports, News, and Movies, and now I see why the upcoming Kids shows area in the suggestions never has anything in it.
 
But anyway, here is the code I am using to change the background colors on the TV Guide to more easily find the different types of shows.
 

/*Sports Programs have blue background in TV Guide*/
.programCellInner.sportsProgramInfo {
    background-color: #0404B4;
}
 
/*Movies have red background in TV Guide*/
.programCellInner.movieProgramInfo {
    background-color: #B40404;
}
 
/*News Programs have green background in TV Guide*/
.programCellInner.newsProgramInfo {
    background-color: #04B404;
}

Are there supposed to be more genres in the TV Guide?  I am using NextPVR to supply the EPG data to Emby, and NextPVR gets the EPG data from Schedules Direct.

 

Edit 09/16/2015:  There are more genres listed, but they show up on the pop-up info screen or on the separate page for the program.  I need to read up more on css, but can you change the background of the program cell based on the genre that is listed in the pop-up?

 

 
Anyway, I hope some people that wanted to change the background colors on their TV Guide like this, and it's easy to change to your own liking.
  
Here is what it looks like -

 

55f742adde453_TVGuide.jpg

Edited by brienj
  • Like 1
Link to post
Share on other sites
connorconway

Hello,
 
I have recently changed the "My Media" images for Movies, TV, and Music. However, although these images are HD (I am using http://emby.media/community/index.php?/topic/17999-web-client-matching-library-icons/) they appear very blurred for some reason.
Could anyone help me here?

I have attached an image for reference.

As well as this when I Right Click -> Edit -> Images -> upload a new image; the image for that folder is not changing.

Sorry for all the questions but thank you for any help you can give.
Here is the CSS I am currently using (Shouldn't affect it?)

/* Remove the Emby Logo and text from Login Screen */

.logoLibraryMenuButtonText {
	display: none;
}
img[src*="css/images/mblogoicon.png"] {
	display: none;
}

/* END */



/* Add our own logo and modify sizes */

#loginPage {
    padding-top: 30px;
}
#loginPage:before {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 15px;
    content: " ";
    background: url("/web/css/images/nxttmembylogo.png"); 
    background-size: 100% 100%;
    width: 333px;
    height: 76px;
}

/* END */



/* Add blue border and glow for Home folders */

div[data-itemtype="CollectionFolder"] .cardContent,
div[data-itemtype="UserView"] .cardContent,
div[data-itemtype="PlaylistsFolder"] .cardContent{
  border: 1px solid rgba(0,94,243,.5);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6);
}

/* END */



/* Increase size of home folders and remove text */

div[data-itemtype=UserView] {width: 33%;}
div[data-itemtype=UserView] .cardFooter {display:none;}

post-73864-0-61591500-1442706848_thumb.png

Edited by connorconway
Link to post
Share on other sites
Blueeyiz702

love the backdrops when you can see them clear,thanks to Happy2Play for his awesome help with this.55c5c71568452_screenshot1921680204809620

Are the backdrops not showing anymore like that use to,i went back to this but now the movie backdrops dont show?

Link to post
Share on other sites
Angelblue05

Is the setting enabled in your webclient user preferences? Your portrait in top right corner > settings > display settings > enable backdrops (yes)?

Link to post
Share on other sites
  • 2 weeks later...
Blueeyiz702

Hi,

can you share your Logo Pics? it would be nice :)

logo pics showed up automatically when i installed plugins,except for vevo which i got from disparity post.

Link to post
Share on other sites
  • 3 weeks later...

Hello all,

 

newbie here :)

just one quick question: when I change the content title (replace EMBY next to the logo with my onw text)

it sets my text .... followed by EMBY

 

e.g: 

I want custom title "FOO"

 

I add this custom css

 

.logoLibraryMenuButtonText {

        content: "FOO";
}
 
what I see is: FOOEMBY 
 
:) any idea? - basically I want to Replace EMBY next to the logo by FOO
Edited by ArBohe
Link to post
Share on other sites
  • 1 month later...
shorty1483

I used this in the past to get rid of the grey card background in the library views and the frame and hover around the cover in details view. In one of the latest Dev realeases, something changed so that none of the modifications works. Any help greatly appreciated :D

.visualCardBox {
   	border: 1px solid rgba(0,0,0,0.0);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.0);
    -ms-box-shadow: 0 2px 4px rgba(0,0,0,0.0);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.0);
	background: rgba(0,0,0,0.0);
    margin: 7px;
}
.ui-page-theme-b .visualCardBox {
    background: rgba(0,0,0,0.0);
	background: rgba(0,0,0,.0);
	border: 1px solid rgba(0,0,0,0.0);
    border-radius: 2px;
}
.itemDetailImage {
    -moz-box-shadow: 0px 0 0px #3b3b3b;
    -webkit-box-shadow: 0px 0 0px #3b3b3b;
    box-shadow: 0px 0 0px #3b3b3b;
    border: solid 0px #3b3b3b;
}
.itemDetailGalleryLink img:hover {
    -moz-box-shadow: 0 0 0px 0px #673ab7;
    -webkit-box-shadow: 0 0 0px 0px #673ab7;
    box-shadow: 0 0 0px 0px #673ab7;
}
Link to post
Share on other sites
  • 3 weeks later...
shorty1483

Hey guys, I renew my question.

 

5684e0ee9ec6f_hover.png

 

In past versions I removed the square and green hover around the cover in details page with the following code:

.itemDetailImage {
    -moz-box-shadow: 0px 0 0px #3b3b3b;
    -webkit-box-shadow: 0px 0 0px #3b3b3b;
    box-shadow: 0px 0 0px #3b3b3b;
    border: solid 0px #3b3b3b;
}
.itemDetailGalleryLink img:hover {
    -moz-box-shadow: 0 0 0px 0px #673ab7;
    -webkit-box-shadow: 0 0 0px 0px #673ab7;
    box-shadow: 0 0 0px 0px #673ab7;
}

Since some versions of the server, this doesn't seem to work anymore. Is this outta reach for CSS mods in meantime? Any help is greatly appeciated.

 

@@rthomas @@bigjohn @@Happy2Play

Edited by shorty1483
Link to post
Share on other sites
Poptartica

@shorty1483

 

I haven't tried them yet, but you can try the following things..

.itemDetailImage {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
.itemDetailGalleryLink img:hover {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

-OR-

 

Same values you had as before, except add "!important" onto each rule, like so:

.itemDetailImage {
-moz-box-shadow: 0px 0 0px #3b3b3b !important;
-webkit-box-shadow: 0px 0 0px #3b3b3b !important;
box-shadow: 0px 0 0px #3b3b3b !important;
border: solid 0px #3b3b3b !important;
}
.itemDetailGalleryLink img:hover {
-moz-box-shadow: 0 0 0px 0px #673ab7 !important;
-webkit-box-shadow: 0 0 0px 0px #673ab7 !important;
box-shadow: 0 0 0px 0px #673ab7 !important;
}

-OR-

.itemDetailImage.loaded {
-moz-box-shadow: 0px 0 0px #3b3b3b;
-webkit-box-shadow: 0px 0 0px #3b3b3b;
box-shadow: 0px 0 0px #3b3b3b;
border: solid 0px #3b3b3b;
}
div > .itemDetailGalleryLink img:hover {
-moz-box-shadow: 0 0 0px 0px #673ab7;
-webkit-box-shadow: 0 0 0px 0px #673ab7;
box-shadow: 0 0 0px 0px #673ab7;
}

Option 1 is just erasing all previous values with a value of none, and will only work if the custom CSS is applied after the default CSS (which I am pretty sure it is), and the custom CSS is selecting the same item(s) for styling as the default CSS.

 

Option 2 is heavy-handedly applying !important to everything which automatically overrides most styles, but can get messy trying to figure out if there is inline CSS or other !importants (generally avoided but if you are applying styles over the top of the UI anyway it probably doesn't make much difference here).

 

Option 3 is making your selectors more specific but still selecting the same items for styling, and selectors which are more specific will render instead of less specific selectors.

 

Hopefully one of those will do it for you :)

 

 

edit: also as a side note in the future if you actually want to make a certain style visible, I recommend either sticking with "0 0 0.." etc, or "0px 0px 0px ... " etc, as I've had some browsers render "0" vs "0px" differently because they may use different units by default (or have problems rendering properly without a unit). If there was a specific reason you did it that way, disregard this, it's just a quirk I've noticed in the past myself.

Edited by Poptartica
  • Like 3
Link to post
Share on other sites
  • 2 months later...
Happy2Play

@@shorty1483, look at "div.cardBox.visualCardBox".

div.cardBox.visualCardBox {background-color: transparent !important;}

  You know you can use Chrome (F12) and click on those boxes to find out what they are.

  • Like 1
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
×
×
  • Create New...