Blueeyiz702 216 Posted August 8, 2015 Share Posted August 8, 2015 (edited) #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 August 8, 2015 by blueeyiz7021 Link to comment Share on other sites More sharing options...
Happy2Play 8270 Posted August 8, 2015 Share Posted August 8, 2015 Im still learning css happy2play,so where would i paste this? Same here, you can just paste it at the end. Link to comment Share on other sites More sharing options...
Blueeyiz702 216 Posted August 8, 2015 Share Posted August 8, 2015 (edited) #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 August 8, 2015 by blueeyiz7021 Link to comment Share on other sites More sharing options...
Blueeyiz702 216 Posted August 8, 2015 Share Posted August 8, 2015 Link to comment Share on other sites More sharing options...
Blueeyiz702 216 Posted August 8, 2015 Share Posted August 8, 2015 love the backdrops when you can see them clear,thanks to Happy2Play for his awesome help with this. Link to comment Share on other sites More sharing options...
Baenwort 97 Posted September 7, 2015 Share Posted September 7, 2015 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 comment Share on other sites More sharing options...
bigjohn 655 Posted September 7, 2015 Share Posted September 7, 2015 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 comment Share on other sites More sharing options...
brienj 1 Posted September 14, 2015 Share Posted September 14, 2015 (edited) 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 - Edited September 16, 2015 by brienj 1 Link to comment Share on other sites More sharing options...
connorconway 0 Posted September 19, 2015 Share Posted September 19, 2015 (edited) 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;} Edited September 19, 2015 by connorconway Link to comment Share on other sites More sharing options...
Blueeyiz702 216 Posted September 21, 2015 Share Posted September 21, 2015 love the backdrops when you can see them clear,thanks to Happy2Play for his awesome help with this. Are the backdrops not showing anymore like that use to,i went back to this but now the movie backdrops dont show? Link to comment Share on other sites More sharing options...
Blueeyiz702 216 Posted September 21, 2015 Share Posted September 21, 2015 This is how it looks now,cant get backdrop to showup. Link to comment Share on other sites More sharing options...
Angelblue05 4130 Posted September 21, 2015 Share Posted September 21, 2015 Is the setting enabled in your webclient user preferences? Your portrait in top right corner > settings > display settings > enable backdrops (yes)? Link to comment Share on other sites More sharing options...
Happy2Play 8270 Posted September 21, 2015 Share Posted September 21, 2015 Looks like "Auto" limits backdrops and "Yes" always displays. Link to comment Share on other sites More sharing options...
Blueeyiz702 216 Posted September 21, 2015 Share Posted September 21, 2015 Thanks guys,duh i forgot to enable in web client. Link to comment Share on other sites More sharing options...
genesisforlive 7 Posted October 3, 2015 Share Posted October 3, 2015 This is how it looks now,cant get backdrop to showup. Hi, can you share your Logo Pics? it would be nice Link to comment Share on other sites More sharing options...
Happy2Play 8270 Posted October 3, 2015 Share Posted October 3, 2015 Hi, can you share your Logo Pics? it would be nice Which ones? These? Link to comment Share on other sites More sharing options...
Blueeyiz702 216 Posted October 3, 2015 Share Posted October 3, 2015 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 comment Share on other sites More sharing options...
ArBohe 0 Posted October 24, 2015 Share Posted October 24, 2015 (edited) 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 October 24, 2015 by ArBohe Link to comment Share on other sites More sharing options...
shorty1483 450 Posted December 10, 2015 Share Posted December 10, 2015 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 .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 comment Share on other sites More sharing options...
shorty1483 450 Posted December 31, 2015 Share Posted December 31, 2015 (edited) Hey guys, I renew my question. 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 December 31, 2015 by shorty1483 Link to comment Share on other sites More sharing options...
Poptartica 12 Posted December 31, 2015 Share Posted December 31, 2015 (edited) @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 December 31, 2015 by Poptartica 3 Link to comment Share on other sites More sharing options...
shorty1483 450 Posted December 31, 2015 Share Posted December 31, 2015 @@Poptartica Number 2 did the trick! Thanks Mate Link to comment Share on other sites More sharing options...
shorty1483 450 Posted March 16, 2016 Share Posted March 16, 2016 Anyone knows how to get rid of the grey background in Poster Card View? Link to comment Share on other sites More sharing options...
Happy2Play 8270 Posted March 17, 2016 Share Posted March 17, 2016 @@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. 1 Link to comment Share on other sites More sharing options...
Ben Z 86 Posted March 17, 2016 Share Posted March 17, 2016 (edited) @@Happy2Play Do you know how to fix those white boxes? Edited March 17, 2016 by benjidave Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now