Jump to content

How do I change this image with CSS?


Go to solution Solved by Happy2Play,

Recommended Posts

MediaEmby1968
Posted (edited)

I'd like to change the image surrounding the movie posters or game cards; I assume they're called selection images. I don't like the current color; it's barely visible.

I'm using the Apple TV theme, with CSS.

Here's the image I'm referring to.

 

Captura.jpg.4777a59fec4d7ce53e4c71983865d717.jpg

Edited by MediaEmby1968
  • Solution
Happy2Play
Posted

Default code

.card:focus-visible .cardContent-bxsborder-fv::before
Specificity: (0,3,1)
 {
    border-color: hsla(var(--focus-background-hue), var(--focus-background-saturation), var(--focus-background-lightness), .8) !important;
}

So anything like this 

div.card:focus-visible .cardContent-bxsborder-fv::before {
    border-color: red !important;
}

or set hsla colors

div.card:focus-visible .cardContent-bxsborder-fv::before {
    border-color: hsla(0, 150%, 50%, .8) !important;
}

Or you can tweak the Root values but affects more areas.

html:root {
    --focus-background-hue: 0;
    --focus-background-saturation: 150%;
    --focus-background-lightness: 50%;
}

 

MediaEmby1968
Posted

Thank you... the first code worked for me.

MediaEmby1968
Posted

Could you tell me what code to put to change or add a background image? @Happy2Play

Happy2Play
Posted
4 hours ago, MediaEmby1968 said:

Could you tell me what code to put to change or add a background image? @Happy2Play

Where? as there are other topics on background images.

MediaEmby1968
Posted

Regarding Apple TV using CSS, I found some code here on the forum, but it doesn't work.

Happy2Play
Posted (edited)

Still need to know where.

But took code from here with some edits.

/* Add backdrop - Home only */
div.view-home-home .homeSectionsContainer {background-image: url("https://wallpapercave.com/wp/wp11259304.jpg");background-size: cover;}

image.thumb.png.edd14e7afafa361007b0201858cf63a9.png

Edited by Happy2Play
MediaEmby1968
Posted

That code worked for me; I wanted to put it on the homepage.

But I have a question: if I wanted to link it to a local image, one that's on my computer, what would I need to change in the code, and where would I need to save the image?

Thanks for your time.

MediaEmby1968
Posted

If it were to be used as a general background on all pages, what would the code be?

Happy2Play
Posted (edited)
34 minutes ago, MediaEmby1968 said:

That code worked for me; I wanted to put it on the homepage.

But I have a question: if I wanted to link it to a local image, one that's on my computer, what would I need to change in the code, and where would I need to save the image?

Thanks for your time.

You have to host it or place it within Emby.

 

Edited by Happy2Play
Happy2Play
Posted (edited)
38 minutes ago, MediaEmby1968 said:

If it were to be used as a general background on all pages, what would the code be?

 

div.backgroundContainer:not(.withBackdrop) {background-image:  url(/web/Custom_Images/customimage.png);}
Edited by Happy2Play
MediaEmby1968
Posted

Within Emby, you're referring to the path Dashboard-ui/modules/themes, for example.

 

Thanks

Happy2Play
Posted
4 minutes ago, MediaEmby1968 said:

Within Emby, you're referring to the path Dashboard-ui/modules/themes, for example.

 

Thanks

Yes or create your own folder within /dashboard-ui.

Note since every update replace the system folder you have to copy this custom folder back with every update.

MediaEmby1968
Posted

Thanks, that's right, I'll see if I create a folder or use that path directly.

I already knew about the update; it's logical, if it updates, everything is lost. That's why I have the code saved in a text file, for example.

Thank you so much, you're a genius with CSS.

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...