Jellyfin Forum
Zombie CSS - 10.9.x compatible - Printable Version

+- 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: Zombie CSS - 10.9.x compatible (/t-zombie-css-10-9-x-compatible)

Pages: 1 2 3 4 5 6


RE: Zombie CSS - 10.9.x compatible - Valentin - 2024-07-18

Hello again !
I would like to know if there is a possibility to get the background color (with still the blurry effect backdrop) less greyish ?


RE: Zombie CSS - 10.9.x compatible - Dex Luther - 2024-08-31

(2024-07-18, 06:50 AM)Valentin Wrote: Hello again !
I would like to know if there is a possibility to get the background color (with still the blurry effect backdrop) less greyish ?

That's because of one of this:
Code:
.backdropImage {
  filter: blur(5px) saturate(120%) contrast(120%) brightness(120%);
  mask-image: linear-gradient(to right, transparent, black),
    linear-gradient(to top, transparent, black);
  -webkit-mask-image: linear-gradient(to right, transparent, black),
    linear-gradient(to top, transparent, black);
  mask-composite: source-in;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: 0.5s ease-in-out both backdrop-fadein;
}

To change it, you'd have to add something like this under your imports:
Code:
.backdropImage {
  filter: blur(5px) saturate(120%) contrast(120%) brightness(120%);
  mask-image: None;
  -webkit-mask-image: None;
  -webkit-mask-composite: None;
  animation: 0.5s ease-in-out both backdrop-fadein;
}

I'm not a CSS expert though.

You can also go to a random Jellyfin page with a backdrop in your browser, and press f12 (Or right click on the backdrop > Inspect) and poke around in the CSS on the right. There's check boxes you can disable and enable to see what changes to learn what things do and mess around with values.

Once you get something you like, copy the thing at the top of the box (If you're messing with the backdrop it should be
Code:
.backdropImage
Put a { and then copy the things you changed (make sure you add the ; at the end of each line and finish with a } at the end (like the example above). You can also use Notepad++ or an online CSS helper to help you format the code and then just copy it over into Jellyfin's Custom CSS thing.


RE: Zombie CSS - 10.9.x compatible - xvasilikix - 2024-09-14

Hello, I use your theme for Jellyfin. I think it's very good. Can you tell me how I can change the emblem? My Jellyfin runs on a NAS server in a container and not on the PC


RE: Zombie CSS - 10.9.x compatible - Valentin - 2024-09-15

Thank you so much !
It works, sorry for the late answer ;-)

(2024-08-31, 05:12 PM)Dex Luther Wrote:
(2024-07-18, 06:50 AM)Valentin Wrote: Hello again !
I would like to know if there is a possibility to get the background color (with still the blurry effect backdrop) less greyish ?

That's because of one of this:
Code:
.backdropImage {
  filter: blur(5px) saturate(120%) contrast(120%) brightness(120%);
  mask-image: linear-gradient(to right, transparent, black),
    linear-gradient(to top, transparent, black);
  -webkit-mask-image: linear-gradient(to right, transparent, black),
    linear-gradient(to top, transparent, black);
  mask-composite: source-in;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: 0.5s ease-in-out both backdrop-fadein;
}

To change it, you'd have to add something like this under your imports:
Code:
.backdropImage {
  filter: blur(5px) saturate(120%) contrast(120%) brightness(120%);
  mask-image: None;
  -webkit-mask-image: None;
  -webkit-mask-composite: None;
  animation: 0.5s ease-in-out both backdrop-fadein;
}

I'm not a CSS expert though.

You can also go to a random Jellyfin page with a backdrop in your browser, and press f12 (Or right click on the backdrop > Inspect) and poke around in the CSS on the right. There's check boxes you can disable and enable to see what changes to learn what things do and mess around with values.

Once you get something you like, copy the thing at the top of the box (If you're messing with the backdrop it should be
Code:
.backdropImage
Put a { and then copy the things you changed (make sure you add the ; at the end of each line and finish with a } at the end (like the example above). You can also use Notepad++ or an online CSS helper to help you format the code and then just copy it over into Jellyfin's Custom CSS thing.



RE: Zombie CSS - 10.9.x compatible - ADUSLG - 2024-10-06

beautiful, but not good for music as you have to scroll way down to see the albums.


RE: Zombie CSS - 10.9.x compatible - foux - 2024-10-08

Hi there!
The CSS is gorgeous, but there is an issue with TV episode with a large description :    
The text will overflow at the top and bottom, and we can't see all informations.

Thanks!

[ediit] : Sorry, already reported, missed it


RE: Zombie CSS - 10.9.x compatible - M0RPH3US - 2024-10-09

(2024-10-08, 02:35 PM)foux Wrote: Hi there!
The CSS is gorgeous, but there is an issue with TV episode with a large description :
The text will overflow at the top and bottom, and we can't see all informations.

Thanks!

[ediit] : Sorry, already reported, missed it

Can you test 
Code:
@import url(https://cdn.jsdelivr.net/gh/MakD/zombie-release@main/pre-release/wip.css);



RE: Zombie CSS - 10.9.x compatible - foux - 2024-10-09

(2024-10-09, 09:18 AM)M0RPH3US Wrote: Can you test 
Code:
@import url(https://cdn.jsdelivr.net/gh/MakD/zombie-release@main/pre-release/wip.css);

Sorry, didn't see your post! Definitely better as there is no more overflow :    
It would be great to have an option to see the whole text, but as it is, it is already miles ahead of the current version, thanks a lot!


RE: Zombie CSS - 10.9.x compatible - qy9756 - 2024-10-13

Hello, these two positions are misplaced, please help fix them. Thank you
           


RE: Zombie CSS - 10.9.x compatible - foux - 2024-10-14

I find most page really beautifull, but I'm severely missing something on the movie page : the fact that the poster is nowhere to be found is quite annoying.
Perhaps it should be put here :      . Or better yet on the left, like most themes and apps.
The same can be said in the season view of a show, the episode view, ..... really any view that has a poster
Thanks