bfir3 113 Posted April 29, 2016 Share Posted April 29, 2016 So I've been working on updating my server CSS to make my web client feel more like Emby Theater. I'm not done with everything quite yet, and still have some final layout decisions to make. If there's interest I can upload the CSS for it -- and I can leave out the dark theme CSS if desired. Let me know what you guys think! The changes are only showing for browsers with >1450px resolution and reverts back to the regular style in smaller browser windows. Home page Resume Latest Items Next Up Movie Details TV Show Details TV Season Details TV Episode Details 11 Link to comment Share on other sites More sharing options...
Quiks 15 Posted April 30, 2016 Share Posted April 30, 2016 Looks awesome man Link to comment Share on other sites More sharing options...
nightlifex 0 Posted May 4, 2016 Share Posted May 4, 2016 Want! Link to comment Share on other sites More sharing options...
ebr 14910 Posted May 4, 2016 Share Posted May 4, 2016 That's very creative. Why not just use the web version of Theater though? Just due to not everything being finished yet? Link to comment Share on other sites More sharing options...
Luke 37051 Posted May 4, 2016 Share Posted May 4, 2016 You can even create your own skin with Emby Theater, all html and css: http://emby.media/community/index.php?/blog/1/entry-302-learn-how-to-create-skins-for-emby-theater/ Link to comment Share on other sites More sharing options...
shorty1483 451 Posted May 4, 2016 Share Posted May 4, 2016 (edited) Waiting to try out the custom CSS @@bfir3 Well done! Edited May 4, 2016 by shorty1483 Link to comment Share on other sites More sharing options...
bfir3 113 Posted May 5, 2016 Author Share Posted May 5, 2016 (edited) Alright guys, I'm going to post the CSS snippet below that will change the look for browser width's > 1450px. You can simply change the first line min-width to something else if you desire. Let me know if there's any problems (I do have other CSS active that may be affecting the style that I didn't include correctly). My screenshots are from Emby server 3.0.5930. As for why I don't simply use Emby Theater, well, the easiest answer is that I'm not currently an Emby premiere subscriber, so I can't playback any media from there. But even still, the browsing experience in Emby Theater still has some strides to make before I would consider using it over the web client or Kodi. I've recently downgraded my Emby server version to one that gives me the best performances and my web client experience in Chrome is so snappy and responsive, everything loads instantly from cache without any problems. Until I upgrade I can't use the new Emby Theater anyway because it's not compatible with my server version, but it's not worth upgrading to be able to use it as the new web client is less responsive than what I currently use. Here's the code: (the CSS isn't very clean, I did it over the course of a few hours of tv episodes in chrome inspector) @[member="Media"] (min-width: 1450px) { div#itemDetailPage { width: 100%; float: left; padding: 0px !important; } div#itemBackdrop { position: absolute; } .detailPageContent { position: relative; top: 50px; width: auto; } .detailImageContainer { float: left; margin-top: 150px; margin-left: 50px; position: relative; } div.detailNameContainer>div.desktopDetails { margin-top: 25px !important; } div.detailNameContainer { margin-top: 20px; } div.primaryDetailsContainer { position: relative; left: 20px; float: left; top: 0px; width: auto !important; z-index: 1; } .inlineItemName { font-size: 32px !important; } .inlineItemName { color: #E4E4E4; } .starRating, .starRatingValue { top: -4px !important; } h2.tagline { color: #54F054; } p.itemGenres { position: relative; min-height: 15px; font-size: 20px; top: 0px; } div.detailButtonsContainer { ; font-size: 120%; top: 0px; z-index: 1000; } div#itemDetailPage div.ui-content[data-role='content'] { padding-top: 0; top: 320px; z-index: 0; clear: both; position: absolute; width: calc(100% - 80px); font-size: 20px; } .detailPageContent { position: relative; max-width: none; } .portraitDetailImageContainer img { width: 200px; } div.detailNameContainer { margin-top: 50px !important; height: auto !important; } div.detailNameContainer>div:first-child { max-width: 1200px; min-width: 500px; height: 140px; overflow: hidden; margin-top: -45px; display: flex; flex-direction: column; justify-content: flex-end; } .detailNameContainer .desktopDetails { font-size: 30px; } .primaryDetailsContainer>.desktopDetails { padding-top: 0px !important; } .detailPageContent>.detailSection:first-child { margin-left: 522px; min-height: 230px; order: -3; } .primaryDetailsContainer>.desktopDetails { padding-top: 0px !important; } .nextUpSection.detailSection { margin-left: 522px; min-height: 300px; margin-top: -60px; order: -2; } .tileContent { position: absolute !important; margin-left: 3px; text-align: left; vertical-align: top; overflow: hidden; z-index: 1000; left: 0px; bottom: 10px; font-size: 14px; } #castContent a.tileItem.smallPosterTileItem { width: 214px !important; margin: 0; } .smallPosterTileItem .tileImage { width: 100% !important; height: 330px !important; background-size: cover; } .smallPosterTileItem .tileContent { background: rgba(0,0,0,0.5); width: 80%; margin-left: 0px; padding: 10px; } .tileItem p { margin: 0 !important; } .tileItem p:first-child { color: #2BC253; font-weight: bold; font-size: 18px; } .ui-content>.detailPageContent { margin: 0px 30px 0px 30px; display: flex; flex-direction: column; } .btnPlay.detailFloatingButton { top: 275px; z-index: 1001; left: 1100px; position: absolute; } #childrenContent .card { width: 16.6%; } div#childrenCollapsible { display: block !important; } div#childrenCollapsible.hide { visibility: hidden; } div#castContent { display: flex; align-items: flex-end; flex-wrap: wrap; } paper-button.more.morePeople { margin-bottom: 11px; } .portraitDetailImageContainer img { width: 480px; } .nextUpSection.detailSection.hide { display: block !important; visibility: hidden; } a#lnkNextItem,a#lnkPreviousItem { z-index: 1000; } .thumbDetailImageContainer img, .squareDetailImageContainer img { width: 478px; } .collectionItems .detailSection:first-child{ margin-top: 360px; } #mediaInfoContent div:last-child { max-width: none !important; } .portraitCard { width: 14.2% !important; } .backdropCard { width: 25% !important; } div#scenesCollapsible { order: -1; } .listPaging { width: 100%; } .cardContent .cardFooter { left: 1px !important; } .nowPlayingBar, .nowPlayingImage img { min-height: 80px; } .criticRating { top: -4px !important; } .starRatingValue + .rottentomatoesicon { top: -4px !important; } div#criticReviewsCollapsible { order: -1; margin-top: -300px; margin-left: 520px; } } EDIT: I just remembered I also had to edit some JS files in order to improve the render quality for posters, episode images, etc. I'll have to revisit my code to see what I changed where if people are having problems with low resolution images, let me know! Edited May 5, 2016 by bfir3 1 Link to comment Share on other sites More sharing options...
shorty1483 451 Posted May 5, 2016 Share Posted May 5, 2016 Unfortunately, the CSS doesn't change anything on my WebClient (latest Dev Server) in Chrome and Firefox. Link to comment Share on other sites More sharing options...
bfir3 113 Posted May 5, 2016 Author Share Posted May 5, 2016 (edited) Unfortunately, the CSS doesn't change anything on my WebClient (latest Dev Server) in Chrome and Firefox. Is your browser resolution less than 1450px wide? The sizes I've set really only look good on resolutions above that. You can probably get away with lowering the min-width at the top to maybe 1300px but I'm not sure how much lower than that will still look OK. If you are >1450px and it's still not working, then I'm not sure. Just change the code at the top here: @[member="Media"] (min-width: 1450px) { I might have not grabbed the right CSS although I thought that I did. I'm almost done running my chapter image extraction on server 3.0.5782.0, and once that is done I'm gonna upgrade my newest server installation to dev to test the performance improvements. When I do that I will test the CSS and get back to you if it's not working. Edited May 5, 2016 by bfir3 Link to comment Share on other sites More sharing options...
shorty1483 451 Posted May 6, 2016 Share Posted May 6, 2016 Is your browser resolution less than 1450px wide? The sizes I've set really only look good on resolutions above that. You can probably get away with lowering the min-width at the top to maybe 1300px but I'm not sure how much lower than that will still look OK. If you are >1450px and it's still not working, then I'm not sure. Just change the code at the top here: @[member="Media"] (min-width: 1450px) { I might have not grabbed the right CSS although I thought that I did. I'm almost done running my chapter image extraction on server 3.0.5782.0, and once that is done I'm gonna upgrade my newest server installation to dev to test the performance improvements. When I do that I will test the CSS and get back to you if it's not working. Browser window width: 1680 Browser window height: 925 I already checked lowering the CSS value, but it doesn't do anything, unfortunately... Link to comment Share on other sites More sharing options...
dcrdev 251 Posted May 6, 2016 Share Posted May 6, 2016 That's very creative. Why not just use the web version of Theater though? Just due to not everything being finished yet? I imagine because there are people (like myself) who don't want to use their server via a third party address. I've got emby running on a subdomain via a reverse proxy, so it really makes no sense to use emby connect or emby theatre in this fashion - why not make emby theatre the default frontend for the server itself? Link to comment Share on other sites More sharing options...
bfir3 113 Posted May 7, 2016 Author Share Posted May 7, 2016 Well I'm going to repost the CSS code here because I assume I accidentally entered in something that is causing an error in my last post, I don't know why no changes would show at all otherwise. Here's the corrected CSS for new server releases: https://paste2.org/nXMcvJgz Please confirm that it works. @dcrdev: That's another big reason I don't use it. Like you, I run emby on a reverse proxy on its separate domain. Don't wanna lose that. 1 Link to comment Share on other sites More sharing options...
Blueeyiz702 216 Posted May 8, 2016 Share Posted May 8, 2016 Just tried corrected Css and it still not working. Link to comment Share on other sites More sharing options...
bfir3 113 Posted May 8, 2016 Author Share Posted May 8, 2016 (edited) I'll have to bring my other server installation online to see what I'm missing. I will comb through the code one more time to see if I spot another error. edit: No errors that I could find, I just went to my server install and copied the CSS out of the branding.xml again. I noticed that it looks different from what I posted here before so I might have gotten mixed up the first time I posted. In any case, here's the CSS I pulled straight from the branding: https://paste2.org/NsbMOhJD Please let it work for you guys! Edited May 8, 2016 by bfir3 1 Link to comment Share on other sites More sharing options...
shorty1483 451 Posted May 8, 2016 Share Posted May 8, 2016 Link to comment Share on other sites More sharing options...
Blueeyiz702 216 Posted May 8, 2016 Share Posted May 8, 2016 just tried again with Css straight from branding,and everything is king size in tv series episode and the other parts dont wotk, and 6 th line of css is padding supposed to be 200000 pix? Link to comment Share on other sites More sharing options...
bfir3 113 Posted May 8, 2016 Author Share Posted May 8, 2016 No that padding is commented out on the 6th line. The first time I posted the CSS I removed all the lines that were commented out manually. This time I left them in to avoid introducing an error. As for the details appearing over the poster, I reviewed the CSS and noticed that the code from the branding used > for the >, so I've replaced those now and the CSS should be functional...famous last words. hahah https://paste2.org/eYUXA6kf 1 Link to comment Share on other sites More sharing options...
Happy2Play 8279 Posted May 8, 2016 Share Posted May 8, 2016 No that padding is commented out on the 6th line. The first time I posted the CSS I removed all the lines that were commented out manually. This time I left them in to avoid introducing an error. As for the details appearing over the poster, I reviewed the CSS and noticed that the code from the branding used > for the >, so I've replaced those now and the CSS should be functional...famous last words. hahah https://paste2.org/eYUXA6kf This last version works on my test machine. Link to comment Share on other sites More sharing options...
Happy2Play 8279 Posted May 8, 2016 Share Posted May 8, 2016 (edited) Comparison for movie Default Custom Edited May 8, 2016 by Happy2Play Link to comment Share on other sites More sharing options...
shorty1483 451 Posted May 9, 2016 Share Posted May 9, 2016 (edited) Working well here too now @@bfir3 Suggestion: The episode images are still small in a season page. BTW: I'm trying and trying but I don't get it to work . Do you have a short CSS snippet for just having the large poster beside the plot without the touching everything else (size)? Edited May 10, 2016 by shorty1483 Link to comment Share on other sites More sharing options...
Happy2Play 8279 Posted May 9, 2016 Share Posted May 9, 2016 @@shorty1483, looks like you can adjust it here. #childrenContent .card { width: 16.6%; } 1 Link to comment Share on other sites More sharing options...
shorty1483 451 Posted May 17, 2016 Share Posted May 17, 2016 (edited) I incorporated @@bfir3 's theme with the dark theme originally created by @@Ben Z with some modifications by myself. All props to the two guys! I know the code needs some cleanup in medium term...unfortunately I don't have time to code all the doubled stuff out atm. But on my 1680x1050 Display, it looks nice for now. Perhaps someone is willing and has fun to bring some perfection into it or port it with fitting dimensions to tablet browser css sizes (e.g. 1024px width) GREEN - Dark Theme Theater.txt Edited May 18, 2016 by shorty1483 1 Link to comment Share on other sites More sharing options...
shorty1483 451 Posted May 22, 2016 Share Posted May 22, 2016 Incorporated @@Ben Z Dark Theme v6 with Theater Details @@bfir3 . Did some further modifications though. Theater Details as OP stated just for screen width >1450px. GREEN - Dark Theme V6 Theater.txt Link to comment Share on other sites More sharing options...
bfir3 113 Posted May 30, 2016 Author Share Posted May 30, 2016 Just wanted to show off the latest changes I've made for my server. One picture will take care of everything: Replaced the Title on the Series and Movies pages with the item Logo, in addition to adding the clearArt on the right side of the details/play button. Also modified a few lines of one of the JS files to add a mini-web player function so that the web client can be browsed normally while playing a video in the bottom right corner of the screen. I can provide the code and files I modified if they are desired, but as I'm using an older server version I cannot guarantee 100% compatibility. Also, if people are having issues with image quality for the larger image items with the new CSS, I can provide the JS that I modified on my server to improve the quality. However, as is the case with all JS modifications, you will have to re-apply them after any update. 4 Link to comment Share on other sites More sharing options...
mediacowboy 438 Posted May 30, 2016 Share Posted May 30, 2016 I like the mini player maybe you could push that to the main server on github. I have dual screens so I normally play a video on one and work on the library on the other. 2 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