Bad taste corner

[arrbee99 1560]

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.

[Happy2Play 8282]

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;
}

 

[arrbee99 1560]

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 ?

[Happy2Play 8282]

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.

[arrbee99 1560]

Thanks for the info. Promise to test for myself next time...

[cochize1 41]

@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?

[arrbee99 1560]

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.

[arrbee99 1560]

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.

[arrbee99 1560]

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;}

 

[Happy2Play 8282]

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.