arrbee99 1559 Posted October 24, 2018 Author Share Posted October 24, 2018 Er. I still like and use the effect in post #6, but am wondering if there's a way to keep that no poster effect in a slightly more specific way, as it also kills the poster you (normally) get when looking at an actor detail screen. Existing css (assuming I've copied the right bit) is /* ----- Change Movie Active Thumbnail Image Size ----- */ #itemDetailPage .portraitDetailImageContainer { display: none; !important; } Link to comment Share on other sites More sharing options...
Happy2Play 8270 Posted October 24, 2018 Share Posted October 24, 2018 Er. I still like and use the effect in post #6, but am wondering if there's a way to keep that no poster effect in a slightly more specific way, as it also kills the poster you (normally) get when looking at an actor detail screen. Existing css (assuming I've copied the right bit) is /* ----- Change Movie Active Thumbnail Image Size ----- */ #itemDetailPage .portraitDetailImageContainer { display: none; !important; } Like this. #itemDetailPage div.detailImageContainer.detailimg-hidemobile.portraitDetailImageContainer {display: none; } Link to comment Share on other sites More sharing options...
arrbee99 1559 Posted October 24, 2018 Author Share Posted October 24, 2018 Like this. #itemDetailPage div.detailImageContainer.detailimg-hidemobile.portraitDetailImageContainer {display: none; } Excellent. That worked well. Thanks very much Link to comment Share on other sites More sharing options...
adamstewiegreen 147 Posted October 24, 2018 Share Posted October 24, 2018 (edited) /* ------------------MAIN PAGE and POSTERS ------------------*/ /*---- Makes the header consistent throughout Emby (Doesn't work on Chrome)---*/ .skinHeader.skinHeader-withBackground.skinHeader-blurred.headroom.noHomeButtonHeader{ background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0))!important;} .skinHeader.skinHeader-withBackground.skinHeader-blurred.headroom{ background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0))!important;} /* ----- Change background Image Transparency ----*/ .backgroundContainer.withBackdrop { background: rgba(0, 0, 0, .65)!important; } /* ---- changing some colors (notably home and fav.) ---*/ .emby-tab-button-active{ color: #5F9EA0!important;} .actionSheetContent{ background: #5F9EA0;} /* ----- Section Title Font Adjustments ----*/ .sectionTitle h1, h2 { font-family: Futura, Tahoma, sans-serif; font-size:27px; text-shadow: 1px 1px 2px rgba(0,0,0, 0.45); font-weight: bold!important; } /* ---- Removes play button overlay on posters ----*/ .cardOverlayFab-primary { display:none; } /*----- Remove dark overlay on posters on hover ----*/ .cardOverlayContainer{background: none!important;} /*----- Posters slightly transparent then opaque on hover ----*/ .cardBox{ opacity: .85;} .cardBox:hover{ opacity: 1;} /* ----- Poster enlarge on hover ----*/ .cardBox{transition:all 0.2s;} .cardBox:hover {transform:scale(1.075);transition:all 0.2s;} /* ----- Poster background colour change and shadow on hover ----*/ .cardBox:hover { background:#5F9EA0 !important; -webkit-box-shadow: 0px 2px 4px #000000; -moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000; } /*----Movie & TV Section Changes ----*/ /* ----- Small Cast Pictures to fit in single row ----*/ .card.portraitCard.personCard{ width: 9.5em!important; height: auto; } /* ----- Remove Logo from Movie and TV pages ----*/ .detailLogo {display: none;} /* ----- hide media information ----*/ .verticalSection.detailVerticalSection.audioVideoMediaInfo{ display: none!important; } /*----------removes links on movie and tv pages (IMDB TMDB etc-------*/ .itemExternalLinks {display: none;} /*----Complete Overhaul of Movie/TV buttons: play, resume, ... etc etc ----*/ .detailButton.emby-button{transition:all 0.2s;} .detailButton.emby-button:hover {transform:scale(1.085);transition:all 0.2s;} .detailButton.emby-button{ border: 0px; display: inline-block; position: relative; z-index: 1; border: 0px solid #000000; background-color: transparent; font-family: Futura, Tahoma, sans-serif; color: #ffffff; padding: 15px; margin-left: 20px; } .detailButton.emby-button::after{ -webkit-box-shadow: 0px 2px 4px #000000; -moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000; content: "'"; color: transparent; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: -1; border-radius: 3px; background-color: #5F9EA0; transform: skew(-30deg); -webkit-transform: skew(-30deg); -o-transform: skew(-30deg); -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); } /*----Change Movie/TV Font settings ----*/ .itemName { font-family: Futura, Tahoma, sans-serif !important; font-size:60px!important; font-weight: bold!important; } .parentName{ font-family: Futura, Tahoma, sans-serif; font-size:80px; font-weight: bold; } /*----Change Movie/TV Poster settings ----*/ .itemDetailImage { margin-top: 350px; width: 125%; height: auto; } .mainDetailButtons { font-size: 100%; margin: .5em 1; } /*--- some stuff to make the dashboard similar ----*/ .actionSheetContent{ background: #5F9EA0;} .cardOverlayButton{ padding: .2em!important;} .cardOverlayContainer{ opacity: 85%!important;} /* --- Movie title and descriptions over ----*/ .detailSection {padding-top: 27em; padding-left: 5em;} /*---- background change to tv episodes list---*/ .listItem-content{ background: linear-gradient(to right,#000,rgba(0,0,0,0))!important; } This is my entire setup. I still have to fine tune it because some settings have consequences elsewhere. Edited October 24, 2018 by adamstewiegreen 2 Link to comment Share on other sites More sharing options...
adamstewiegreen 147 Posted October 24, 2018 Share Posted October 24, 2018 /*---drawer transparent----*/ .mainDrawer{ opacity: .75;} Another quick adjustment. Link to comment Share on other sites More sharing options...
adamstewiegreen 147 Posted October 24, 2018 Share Posted October 24, 2018 Smaller cast and crew, bigger poster/titles and button changes The drawer - not sure if I like it yet ... might add a shadow or change the color to something more grey and make the hover very noticeable Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted October 24, 2018 Share Posted October 24, 2018 (edited) Thanks for your settings think i will use a few of those One thing in return from looking at your images above. i dont like the tooty fruity colours for missing actor images as its a glaring colour clash! so... /* ---- Modify Blank Actors Appearance ---*/ #castContent .cardImageIcon {color: grey;} #castContent .defaultCardBackground1, #castContent .defaultCardBackground2, #castContent .defaultCardBackground3, #castContent .defaultCardBackground4, #castContent .defaultCardBackground5 {background-color: transparent;} Looks like this (with no other css applied) Edited October 24, 2018 by PenkethBoy Link to comment Share on other sites More sharing options...
adamstewiegreen 147 Posted October 24, 2018 Share Posted October 24, 2018 Longshot here: is there a way to replace the title with the logo? Link to comment Share on other sites More sharing options...
Happy2Play 8270 Posted October 24, 2018 Share Posted October 24, 2018 Longshot here: is there a way to replace the title with the logo? What title are you referring to? Link to comment Share on other sites More sharing options...
adamstewiegreen 147 Posted October 24, 2018 Share Posted October 24, 2018 Actually, I think I can move the one I have hidden into place and then hide the text beside the poster... Might work. Link to comment Share on other sites More sharing options...
adamstewiegreen 147 Posted October 24, 2018 Share Posted October 24, 2018 Last one for today: I dislike backgrounds that are a clear, in focus photos. I find my eyes think the background is the foreground and everything starts looking muddled (making the backgrounds dark definitely helps solve this problem too...) Here is another solution to the problem: background blur. /*----blur backgroound----*/ .backdropImage.displayingBackdropImage{ -webkit-filter: blur(7px); filter: blur(7px); } 1 Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted October 24, 2018 Share Posted October 24, 2018 Nice like that effect - works well Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted October 24, 2018 Share Posted October 24, 2018 Update to make Cast & Crew images smaller for the Beta Server /* ----- Smaller Cast Pictures Beta Server----*/ .card.overflowPortraitCard.personCard{ width: 9.5em!important; height: auto; } Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted October 24, 2018 Share Posted October 24, 2018 Changes for the Scroll Button - Beta Server /* ----- Emby Scroller Button Icon Beta Server----*/ .scrollbuttoncontainer .md-icon{ color: #4285F4; } /* ----- Emby Scroller Scroll Button - Beta Server----*/ .scrollbuttoncontainer{ background:LightSkyBlue !important; width: 50px; height: 60px; } Link to comment Share on other sites More sharing options...
adamstewiegreen 147 Posted October 28, 2018 Share Posted October 28, 2018 Thanks for your settings think i will use a few of those One thing in return from looking at your images above. i dont like the tooty fruity colours for missing actor images as its a glaring colour clash! so... /* ---- Modify Blank Actors Appearance ---*/ #castContent .cardImageIcon {color: grey;} #castContent .defaultCardBackground1, #castContent .defaultCardBackground2, #castContent .defaultCardBackground3, #castContent .defaultCardBackground4, #castContent .defaultCardBackground5 {background-color: transparent;} Looks like this (with no other css applied) Thanks for this. Didn't even notice the colors until you mentioned it, then I had to change it. Transparent didn't really work for me so I made the background grey and the decapitated dudes black. Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted October 28, 2018 Share Posted October 28, 2018 No Problem each to their own taste Link to comment Share on other sites More sharing options...
arrbee99 1559 Posted July 17, 2019 Author Share Posted July 17, 2019 Seems like in the latest beta (Chrome is all I've checked), and maybe a previous version or two, the moving stuff down bit has stopped working, as in post #6, any thoughts on getting it working again please. Think it was this bit for me - .detailLogo {top: 40em;} .detailPageContent {padding-top: 30em;} Link to comment Share on other sites More sharing options...
Happy2Play 8270 Posted July 17, 2019 Share Posted July 17, 2019 Seems like in the latest beta (Chrome is all I've checked), and maybe a previous version or two, the moving stuff down bit has stopped working, as in post #6, any thoughts on getting it working again please. Think it was this bit for me - .detailLogo {top: 40em;} .detailPageContent {padding-top: 30em;} You have two options. div.detailLogo {top: 40em ;} div.detailPageContent {padding-top: 30em ;} or .detailLogo {top: 40em !important ;} .detailPageContent {padding-top: 30em !important ;} 2 Link to comment Share on other sites More sharing options...
arrbee99 1559 Posted July 17, 2019 Author Share Posted July 17, 2019 You have two options. div.detailLogo {top: 40em ;} div.detailPageContent {padding-top: 30em ;} or .detailLogo {top: 40em !important ;} .detailPageContent {padding-top: 30em !important ;} Thanks very much, worked a treat. Link to comment Share on other sites More sharing options...
arrbee99 1559 Posted July 18, 2019 Author Share Posted July 18, 2019 Yummy... Link to comment Share on other sites More sharing options...
Rafick 3 Posted July 23, 2019 Share Posted July 23, 2019 how to leave the buttons like this? Link to comment Share on other sites More sharing options...
arrbee99 1559 Posted July 23, 2019 Author Share Posted July 23, 2019 If you took that image from the Star Wars one above, they're a bit transparent. For me in Chrome they're a solid grey, but in the new Edge browser they're transparent, which is where I got that screenshot from. If thats what you're referring too... Link to comment Share on other sites More sharing options...
Happy2Play 8270 Posted July 23, 2019 Share Posted July 23, 2019 how to leave the buttons like this? Don't specifically know what that is, but it is different with every theme. So you would need to use the browser console it inspect that element to know what the ".detailButton-icon" background is. Like the Dark theme ".detailButton-icon" has a background of "#313235" where BlueRadience is "rgba(0,0,0,.5)". So the css would be something like this i.detailButton-icon {background: rgba(0,0,0,.5); } i.detailButton-icon {background: #313235; } i.detailButton-icon {background: YOURCOLOR; } Link to comment Share on other sites More sharing options...
Rafick 3 Posted July 23, 2019 Share Posted July 23, 2019 this is my It's not color, I wanted to change the shape of the buttons Link to comment Share on other sites More sharing options...
arrbee99 1559 Posted July 23, 2019 Author Share Posted July 23, 2019 this is my It's not color, I wanted to change the shape of the buttons Is this from a browser, like Chrome, or an app ? 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