Adding an image to the tv guide

[arrbee99 1713]

I was thinking (no comments please) that it might be nice to have a sort of transparent TV guide for a change with a picture underneath. Might look hideous, but might look nice.

 

So I was trying to add a background from my PC using this -

div.guideContainer.flex-grow.tvguide { background: red !important;}

- just to see if the command works, and it does add a bit of red

followed by this -

div.guideContainer.flex-grow.tvguide { background-image: url ("F:/Users/Public/Pictures/Screenshots/Emby 2 part illustration.jpg"); !important;}

which obviously doesn't add any image, unless maybe its hidden somehow

 

And trying to make the individual guide entries transparent(ish) using these -

div.programCellInner {background: rgba(0, 0, 0, 0.3);}

or

button.programCell.itemAction {background: rgba(0, 0, 0, 0.3);}

which obviously don't work.

 

I have other guide css which might not be helping. Any thoughts please ?

So far I have this magnificence -

[Happy2Play 9456]

13 minutes ago, arrbee99 said:

div.guideContainer.flex-grow.tvguide { background-image: url ("F:/Users/Public/Pictures/Screenshots/Emby 2 part illustration.jpg"); !important;}

Local path will not work, image needs to be within the webserver like other images Emby shows or a other hosted source.

example

div.guideContainer.flex-grow.tvguide {background-image: url("https://mcdn.wallpapersafari.com/medium/27/24/G9w3PF.jpg");}

 

25 minutes ago, arrbee99 said:

And trying to make the individual guide entries transparent(ish) using these -

div.programCellInner {background: rgba(0, 0, 0, 0.3);}

or

button.programCell.itemAction {background: rgba(0, 0, 0, 0.3);}

which obviously don't work.

I don't have any guide data, so have you tested with solid colors (background: green)?

 

 

[arrbee99 1713]

Sorry. still don't know where to get images from. Can't I use a full image from somewhere, 1920x1080 or similar. Can I just find a background image from a movie in the database and use that ? not sure what the path to that is.

I have this now to make the program items green and opaque, if it helps -

div.programCellInner {background: green !important;}

div.programCellInner {opacity: 0.4; !important}

Am hoping to replace the red with an image which shows through under the green and maybe the channel names.

[Happy2Play 9456]

1 minute ago, arrbee99 said:

Sorry. still don't know where to get images from. Can't I use a full image from somewhere, 1920x1080 or similar. Can I just find a background image from a movie in the database and use that ? not sure what the path to that is.

Well I replace Emby Server logo with a colored one with every update so you could place a image in the proper system folder location and ensure the path is used in your custom css just like I showed with the Premiere badge.

But did you test with the online image I provided?

[arrbee99 1713]

I've removed all the css for the TV Guide and added in your example -

div.guideContainer.flex-grow.tvguide {background-image: url("https://mcdn.wallpapersafari.com/medium/27/24/G9w3PF.jpg");}

and it gives this -

then I tried this -

div.guideContainer.flex-grow.tvguide {background-image: url("css/images/Liverpool_102.jpg");} which gives this

that points to this -

which I guess is also wrong

[arrbee99 1713]

Maybe its because I put the jpg there but Emby doesn't actually use it ?

[arrbee99 1713]

Getting there -

[arrbee99 1713]

Or possibly -