arrbee99 1561 Posted November 28, 2021 Share Posted November 28, 2021 Was playing round with the TV guide (again), and have got this - and am wondering if anyone might know of any way to make that central background image fainter, to match the main image, without also making the text and poster fainter. Thanks. Am using this css - /* Add backdrop to guide detail box */ div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {background-image: url("https://allhdwallpapers.com/wp-content/uploads/2015/05/Jurassic-World-9.jpg");} /* Try to make above backdrop match existing background */ div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {background-size: 2440px 1500px; background-position: center; } /* Try to make above backdrop match existing background brightness - affects everything*/ /*div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {filter: brightness(0.4);}*/ There's separate css that applies the main backdrop, then the above applies the same image again to the recording box to pretend its a window to the main image, while hiding the program details underneath. Link to comment Share on other sites More sharing options...
Happy2Play 8332 Posted November 28, 2021 Share Posted November 28, 2021 If I got this correctly something like this. html - Darken CSS background image? - Stack Overflow div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://allhdwallpapers.com/wp-content/uploads/2015/05/Jurassic-World-9.jpg"); background-size: 2440px 1500px; background-position: center; } 1 Link to comment Share on other sites More sharing options...
arrbee99 1561 Posted November 28, 2021 Author Share Posted November 28, 2021 Thanks , that works really well. I saw linear gradient mentioned, never occurred to actually use it though Is the order important (linear-gradient then url) do you know ? Link to comment Share on other sites More sharing options...
Happy2Play 8332 Posted November 28, 2021 Share Posted November 28, 2021 19 minutes ago, arrbee99 said: Is the order important (linear-gradient then url) do you know ? Honestly do not know, but in my tests it would appear so. Link to comment Share on other sites More sharing options...
arrbee99 1561 Posted November 28, 2021 Author Share Posted November 28, 2021 Thanks for the info. Promise to test for myself next time... Link to comment Share on other sites More sharing options...
cochize1 41 Posted December 11, 2021 Share Posted December 11, 2021 @arrbee99@Happy2Play Hi guys, 2 questions: - why do I only get a background image on the 'dialog box' after clicking on the channel and not on the whole guide itself? - how do you make the dialog box pop out in the middle and not covering the whole screen? Link to comment Share on other sites More sharing options...
arrbee99 1561 Posted December 11, 2021 Author Share Posted December 11, 2021 Not exactly sure, but would speculate maybe the picture is loading but the stuff above it isn't transparent, so in the below TV stuff there should be something (the bit with the extra space round it near the top probably) - /* ---------------------------------------------------------------------------------------------------- */ /* TV Guide */ /* Add backdrop to guide and centre */ /*div.guideContainer.flex-grow.tvguide {background-image: url("https://msdesign.blob.core.windows.net/wallpapers/microsoft_brand_heritage_02.jpg");}*/ /*div.guideContainer.flex-grow.tvguide {background-size: cover; background-position: center; }*/ /* Add backdrop to guide and centre - doesn't look too good */ /*div.guideContainer.flex-grow.tvguide {background-image: url("https://allhdwallpapers.com/wp-content/uploads/2015/05/Jurassic-World-9.jpg");}*/ /*div.guideContainer.flex-grow.tvguide {background-size: cover; background-position: center; }*/ /* Make program cells transparent to show picture */ /*div.programCellInner {opacity: 0.75; !important}*/ /*div.programCellInner {background-color: rgba(120, 120, 120, 0.2);}*/ div.programCellInner {background-color: rgba(0, 0, 0, 0.2);} /* Make All Channels transparent to show picture */ /*button.channelCell.itemAction {opacity: 0.85; !important}*/ div.channelCellInner {background-color: rgba(120, 120, 120, 0.3);} div.channelCellInner {background-color: rgba(0, 0, 0, 0.2);} /* Adjust colour and width of current time indicator */ div.guide-currentTimeIndicatorDot {width: 1px;} /*div.guide-currentTimeIndicatorDot {background: white;}*/ div.guide-currentTimeIndicatorDot {background: var(--myhighlight);} /* Remove current time indicator arrow */ div.guide-currentTimeIndicatorDot.guideHeader-currentTimeIndicatorDot::before {display: none;} /* Make program text bigger */ div.guideProgramNameText {font-size: 125% !important;} /* Make premiere new etc MyColour */ div.mediaInfoProgramAttribute.mediaInfoItem {background-color: var(--mycolour);} span.premiereTvProgram.guideProgramIndicator {background-color: var(--mycolour);} /* Try to make date and time rows at top more opaque */ /*div.headerScroller.emby-scroller {opacity: 0.25; !important}*/ /*div.guide-headerTimeSlots {opacity: 0.25; !important}*/ /* Add border to program cells - vertical only */ .programCell { border-width: 0px 2px 0px 2px !important; border-color: rgba(0,0,0,0.25) !important; } /* Make TV guide rows shallower */ div.virtualScrollItem.epgRow {height: 60px;} /* Remove channel logo */ div.guideChannelImage {display: none;} /* Make channel name bigger */ div.guideChannelText.secondaryText {font-size: 120% !important;} /* Make channel name bold */ div.guideChannelText.secondaryText {font-weight: bold;} /* Make top left empty box wider */ div.channelCell.firstChannelCell {width: 240px !important;} /* Make channels column wider */ button.channelCell.itemAction {width: 240px !important;} button.channelCell.itemAction { border-width: 0px 2px 0px 2px!important; border-color: rgba(0,0,0,0.25) !important;} /* Re-align Timeline to correct position */ div.guide-currentTimeIndicatorDot.guideEpg-currentTimeIndicatorDot {margin-left: 16.5em;} /* Remove top portion of Timeline */ div.guide-currentTimeIndicatorDot.guideHeader-currentTimeIndicatorDot {display: none;} /* Change colour of text in TV play recording dialog box */ /*div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {color: yellow;}*/ /* Make TV play recording dialog box shallower */ div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {height: 560px;} /* Make TV play recording dialog box narrower */ div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {width: 800p also you probably need this to make the box smaller - /* Make metadata window narrower */ div.focuscontainer.dialog.dialog-fixedSize.dialog-medium-tall.formDialog.opened {width: 900px;} /* Make identify window narrower */ div.focuscontainer.dialog.dialog-fixedSize.dialog-fullscreen-border.formDialog.identifyDialog.opened {width: 900px;} Thats probably a crude method as it uses fixed dimensions, maybe making them relative somehow would be better. Link to comment Share on other sites More sharing options...
arrbee99 1561 Posted December 11, 2021 Author Share Posted December 11, 2021 Also remember that the image showing in the program window isn't showing through to the image below it, its actually a second copy of the same image positioned over it to stop the program names below showing through, so you might need to fiddle with its positioning. Link to comment Share on other sites More sharing options...
arrbee99 1561 Posted December 11, 2021 Author Share Posted December 11, 2021 Sorry this bit is wrong (though you can add it if you want, its to make different stuff smaller) /* Make metadata window narrower */ div.focuscontainer.dialog.dialog-fixedSize.dialog-medium-tall.formDialog.opened {width: 900px;} /* Make identify window narrower */ div.focuscontainer.dialog.dialog-fixedSize.dialog-fullscreen-border.formDialog.identifyDialog.opened {width: 900px;} should be (I think...) /* Make TV play recording dialog box shallower */ div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {height: 560px;} /* Make TV play recording dialog box narrower */ div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {width: 800px;} Link to comment Share on other sites More sharing options...
Happy2Play 8332 Posted December 12, 2021 Share Posted December 12, 2021 10 hours ago, cochize1 said: how do you make the dialog box pop out in the middle and not covering the whole screen? That is coded to resolution. Some discussion here and here. vs This show height plays a factor in how the dialog box appears and not so much for width. 10 hours ago, cochize1 said: why do I only get a background image on the 'dialog box' after clicking on the channel and not on the whole guide itself? The code I listed is only for the dialog box. 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