Luke 37405 Posted February 10, 2015 Share Posted February 10, 2015 Hope you're enjoying it If you come up with something, why not post it here for us all to check out? Screenshots are welcome. 2 Link to comment Share on other sites More sharing options...
chef 3753 Posted February 10, 2015 Share Posted February 10, 2015 (edited) Welldone luke the new server looks great! Edited February 10, 2015 by chef 1 Link to comment Share on other sites More sharing options...
pritch33 5 Posted February 10, 2015 Share Posted February 10, 2015 +1 on it looks good. Link to comment Share on other sites More sharing options...
jamvids 37 Posted February 11, 2015 Share Posted February 11, 2015 Is there any help on this, I can follow css a little bit from some training years ago, just don't know what element does what i.e. h1 etc. I would like to learn a bit of code, this is a harmless way of getting the brain going. And who knows the artistic abomination I could come up with. Link to comment Share on other sites More sharing options...
Xzener 729 Posted February 13, 2015 Share Posted February 13, 2015 Was hoping to to a cool thread with everyone's new design pics... Guess its too difficult for the average user. 1 Link to comment Share on other sites More sharing options...
CashMoney 94 Posted February 13, 2015 Share Posted February 13, 2015 Anyone wanting to play around with CSS on the fly, you can try firebug for firefox and chrome - Chrome http://getfirebug.com/releases/lite/chrome/ Firefox http://getfirebug.com/whatisfirebug Link to comment Share on other sites More sharing options...
CashMoney 94 Posted February 13, 2015 Share Posted February 13, 2015 Changing Fonts A simple one to get some folks started. You can adjust the fonts the WebUI uses. Currently by default this is - body { font-family: Roboto,Arial,Helvetica,sans-serif; } You could delete the "Roboto" and change your font to Arial, or change it for any other font you have available. You could even import fonts available on the web. @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', sans-serif; } Here I've imported the Open Sans font from google fonts. 1 Link to comment Share on other sites More sharing options...
strager 18 Posted February 17, 2015 Share Posted February 17, 2015 This one is still a bit buggy (especially on the login screen) - it replaces "Mediabrowser" with your own custom site name next to the Hamburger in the upper left. It also shifts the search over slightly to allow for slightly longer names. .logoLibraryMenuButtonText { position: absolute; visibility: hidden; } .logoLibraryMenuButtonText:before { font-family: "Times New Roman", Times, serif; content: "SiteName"; visibility: visible; } .headerSearchInput { position:relative; right:-80px; } .searchInputIcon { position:absolute; left:85px; } 2 Link to comment Share on other sites More sharing options...
bigjohn 657 Posted February 17, 2015 Share Posted February 17, 2015 Some changes I have implemented on my server, just tweaks to the existing interface. Haven't tested on multiple browsers or screen sizes, just made it work for me. /*Lighten backdrop 'cover' so image can be seen */ .backdropPage.ui-page-theme-b:not(.lightBackdropPage) { background-color: rgba(20,20,20,.88) !important; } /*Change 'Played' icon background to red for better visual separation */ .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); } /*Remove 'Missing Trailer' icon in metadata editor, I don't use trailers*/ img[src='css/images/editor/missingtrailer.png'] { display:none; } /*Enable vertical scrolling on the custom css text box*/ #txtCustomCss{ overflow-y:scroll; } 3 Link to comment Share on other sites More sharing options...
Latchmor 584 Posted February 17, 2015 Share Posted February 17, 2015 (edited) /*Enable vertical scrolling on the custom css text box*/ #txtCustomCss{ overflow-y:scroll; } Custom CSS for the Custom CSS box, love it. Edited February 17, 2015 by Latchmor 3 Link to comment Share on other sites More sharing options...
Koleckai Silvestri 1150 Posted February 17, 2015 Share Posted February 17, 2015 Nothing fancy but may help people explore. Remove Blue Edit buttons: .accentButton {display: none;} Larger thumbnails: @[member="Media"] (min-width: 1400px){.backdropCard {width: 25%;} !important} Remove margins around cards/thumbnails: .cardBox { margin: 0px; } 1 Link to comment Share on other sites More sharing options...
bigjohn 657 Posted February 17, 2015 Share Posted February 17, 2015 I used some of shaefurr's Disparity images for my user view and collection folder primary images, but they needed some separation from the background: So I added this snippet to the custom css, matching the blue to some of the blue in the Disparity collection: /*Blue border and glow for userview cards */ 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); } Which results in this: 8 Link to comment Share on other sites More sharing options...
ebr 14996 Posted February 17, 2015 Share Posted February 17, 2015 Nice, John. That really helps. Link to comment Share on other sites More sharing options...
mediacowboy 438 Posted February 18, 2015 Share Posted February 18, 2015 (edited) @@bigjohn, Thank you for the blue glow. I add it and some tweaking to the "My Views (buttons)" and came up with this. Follows is the CSS: .myLibraryPosterItem .posterItemImage{ background-color: #111; 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); } Edited February 18, 2015 by mediacowboy 2 Link to comment Share on other sites More sharing options...
GugZi 2 Posted February 18, 2015 Share Posted February 18, 2015 http://codepen.io/Gregorein/details/Axylr/ a idea for hover thumbs. i can't code css, so ur guys mabye can. Link to comment Share on other sites More sharing options...
Luke 37405 Posted February 22, 2015 Author Share Posted February 22, 2015 by the way in case you guys don't realize, this feature even works when your users connect to your server via the hosted web client. it pulls down the css and loads it dynamically. 1 Link to comment Share on other sites More sharing options...
jwill 28 Posted February 24, 2015 Share Posted February 24, 2015 Can the custom CSS feature be used to darken all the Dashboard backgrounds? I like the dark backgrounds of the metadata manager and the web client, but the white background of the Dashboard is way too bright. I don't know much about CSS, so if it is possible, an example or two would be nice. I'm looking for something like this (except I would also like the top bar darkened). This is how the Dashboard looks in Chrome with the "Hacker Vision" extension enabled. 1 Link to comment Share on other sites More sharing options...
techywarrior 688 Posted February 24, 2015 Share Posted February 24, 2015 Depending on exactly what you want (it's hard to tell from a screenshot that has other changes to it) it would be something like this: .ui-page-theme-a .content-secondary { background: #000; } .ui-page-theme-a .selectedSidebarLink { background: #666 !important; } #dashboardPage .ui-content { background: #333; } .ui-page-theme-a .selectedSidebarLink .sidebarLink, #dashboardPage .pageTitle, #dashboardPage .ui-overlay-a, #dashboardPage .ui-page-theme-a, #dashboardPage .ui-page-theme-a .ui-panel-wrapper { color: #fff; } That's just a start I did quick without actually testing but see how that works for you. Link to comment Share on other sites More sharing options...
jwill 28 Posted February 24, 2015 Share Posted February 24, 2015 That darkened the sidebar (and left the top bar dark), but most of the main frames are still white or very light. For example: Link to comment Share on other sites More sharing options...
techywarrior 688 Posted February 24, 2015 Share Posted February 24, 2015 (edited) Do you want EVERYTHING dark? There is going to be little contrast in those interior boxes. I wonder why it didn't take the text color and the background color I set there. I guess I'll actually need to apply it and see what is going on. Here, I used the ID of a specific dashboard page instead of the general one. .ui-page-theme-a .content-secondary { background: #000; } .ui-page-theme-a .selectedSidebarLink { background: #666 !important; } .dashboardDocument .ui-content { background: #333; } .dashboardDocument .sidebarLink, .dashboardDocument .pageTitle, .dashboardDocument .ui-overlay-a, .dashboardDocument .ui-page-theme-a, .dashboardDocument .ui-page-theme-a .ui-panel-wrapper { color: #fff; } .dashboardDocument .sidebarLink:hover span.sidebarLinkText { color: #333; } Edited February 24, 2015 by techywarrior 1 Link to comment Share on other sites More sharing options...
bigjohn 657 Posted February 24, 2015 Share Posted February 24, 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; } 6 Link to comment Share on other sites More sharing options...
techywarrior 688 Posted February 24, 2015 Share Posted February 24, 2015 There you go... John obviously spent more time Link to comment Share on other sites More sharing options...
jwill 28 Posted February 24, 2015 Share Posted February 24, 2015 This CSS makes the dashboard mostly match the metadata editor: Awesome! Just what I wanted. Thanks, bigjohn! Link to comment Share on other sites More sharing options...
bigjohn 657 Posted February 24, 2015 Share Posted February 24, 2015 Awesome! Just what I wanted. Thanks, bigjohn! No problem, I already had it mostly done for my own server and your post prompted me to finish what I started. 2 Link to comment Share on other sites More sharing options...
bigjohn 657 Posted February 24, 2015 Share Posted February 24, 2015 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; } 1 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