zombie-release (10.9.x and Tablet compatible)

A theme for Jellyfin 10.9.x combining the best from the Public Themes

Huge Thanks to all the theme creators out there for their hard work. This theme takes bits and pieces from other themes, namely Zesty, JellySkin, Ultrachromic and JellyFin Landscape. Please let me know if I have missed out anybody.

Installation:

@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@latest/zombie-min-git.css');

Addon (Alternate View for Mobile-Portrait) (Add below your main import)

@import URL('https://cdn.jsdelivr.net/gh/MakD/zombie-release@latest/mobile-alt-layout.css');

OR

@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@latest/mobile-alt-layout-v2.css');

Screenshots (Desktop)

Screenshots (Mobile)

Screenshots (Tablet)

Color Palettes

It's possible to change colour palettes. You can use the awesome ones provided by stpnwf in his ZestyTheme Repo, or the ones provided here. A custom palette is also possible. Add the @import url below your main import.

Palette 1

@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@main/colorPalette/palette-1.css');

Palette 2

@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@main/colorPalette/palette-2.css');

Palette 3

@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@main/colorPalette/palette-3.css');

Palette 4

@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@main/colorPalette/palette-4.css');

Palette 5

@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@main/colorPalette/palette-5.css');

Palette 6

@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@main/colorPalette/palette-7.css');

Palette 7

@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@main/colorPalette/palette-8.css');

Get a featured bar at the top of your homepage

Firstly I would like to thank BobHasNoSoul, and SethBacon for making this possible. I tweaked my version, but the entire credits go to them.

Pre-Requisites

1. Jellyfin UserID from the profile page.
2. Jellyfin API key

Steps (Shutdown Jellyfin before proceeding)

1. Download the slideshow.html
2. Enter your Jellyfin UserID and API key in lines 108 & 109 respectively and save it.
3. Create a folder avatars in your jellyfin-web folder.
4. Copy the slideshow.html file to the avatars folder.
5. Search for the file home-html.RANDOMNUMBERS.chunk.js in the jellyfin-web folder and open it.
6. Search for the line data-backdroptype="movie,series,book"> and paste the following exactly after the >

<style>.featurediframe { width: 89vw; height: 300px; display: block; border: 1px solid #000; margin: 0 auto}</style> <iframe class="featurediframe" src="/web/avatars/slideshow.html"></iframe>

7. Save the file.
8. Add this to your customCSS in the admin dashboard (in case you using this theme, don't bother it's already added)

@media only screen and (max-device-width: 767px) {.featurediframe {height: 33vh !important;}}

9. Clear the cache of your browsers and reload. (Ctrl+f5 in chrome)
10. Profit.

This cycles randomly through your library. You can also specify a custom list to show as a spotlight. You can visit BoBHasNoSoul's repo for further steps.