+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: Custom CSS help (/t-custom-css-help)
Custom CSS help - Dopedangel - 2025-02-24
Hi I am trying to blur the preview images of unwatched shows to avoid spoilers. It is mostly working fine but it is also blurring images on the home page which I do not want as jellyfin already has the option of using default images instead of screen shots so is not needed on the main page. So what should I do so that my code is not applied on the main page.
/* Blur episode preview images ONLY for unwatched episodes (no played indicator) */
.listItemImage.listItemImage-large.itemAction.lazy:not(:has(.playedIndicator)) {
filter: blur(10px); /* Adjust blur radius as needed */
}
The below code is what is bluring the homepage images as well
/* Blur unwatched episode images, but NOT season posters */
.card.overflowBackdropCard .cardImageContainer.cardContent.itemAction.lazy.blurhashed.lazy-image-fadein-fast:not(:has(.cardIndicators .playedIndicator)) {
filter: blur(5px); /* Adjust blur radius if needed */
}
RE: Custom CSS help - Crazzzy DucK - 2025-03-04
If you only want things on certain areas, look for the ID of the containers of that section.
Add : #itemDetailPage
for the season page
If you don't want the cards on the homepage to be blurred try;
#indexPage .overflowBackdropCard .cardImageContainer {
filter: blur(0px);
}
It may need an !important
What I haven't been able to work out is how to not have the play button blurred as well