diff --git a/docs/site_assets/jellyfin/aquamarine.png b/docs/site_assets/jellyfin/aquamarine.png index a063775c..aa4a2fc0 100644 Binary files a/docs/site_assets/jellyfin/aquamarine.png and b/docs/site_assets/jellyfin/aquamarine.png differ diff --git a/docs/site_assets/jellyfin/dark.png b/docs/site_assets/jellyfin/dark.png index 1b8a6bed..2a01c7b5 100644 Binary files a/docs/site_assets/jellyfin/dark.png and b/docs/site_assets/jellyfin/dark.png differ diff --git a/docs/site_assets/jellyfin/dracula.png b/docs/site_assets/jellyfin/dracula.png index 9271a479..eca21866 100644 Binary files a/docs/site_assets/jellyfin/dracula.png and b/docs/site_assets/jellyfin/dracula.png differ diff --git a/docs/site_assets/jellyfin/hotline.png b/docs/site_assets/jellyfin/hotline.png index 2f8496dd..18fcdfdf 100644 Binary files a/docs/site_assets/jellyfin/hotline.png and b/docs/site_assets/jellyfin/hotline.png differ diff --git a/docs/site_assets/jellyfin/hotpink.png b/docs/site_assets/jellyfin/hotpink.png new file mode 100644 index 00000000..4b66c21c Binary files /dev/null and b/docs/site_assets/jellyfin/hotpink.png differ diff --git a/docs/site_assets/jellyfin/maroon.png b/docs/site_assets/jellyfin/maroon.png new file mode 100644 index 00000000..c982b18b Binary files /dev/null and b/docs/site_assets/jellyfin/maroon.png differ diff --git a/docs/site_assets/jellyfin/nord.png b/docs/site_assets/jellyfin/nord.png new file mode 100644 index 00000000..ef1f33e4 Binary files /dev/null and b/docs/site_assets/jellyfin/nord.png differ diff --git a/docs/site_assets/jellyfin/organizr.png b/docs/site_assets/jellyfin/organizr.png index 41d62b68..af4a3b73 100644 Binary files a/docs/site_assets/jellyfin/organizr.png and b/docs/site_assets/jellyfin/organizr.png differ diff --git a/docs/site_assets/jellyfin/overseerr.png b/docs/site_assets/jellyfin/overseerr.png new file mode 100644 index 00000000..745c44c9 Binary files /dev/null and b/docs/site_assets/jellyfin/overseerr.png differ diff --git a/docs/site_assets/jellyfin/plex.png b/docs/site_assets/jellyfin/plex.png index 55c70063..9f216d64 100644 Binary files a/docs/site_assets/jellyfin/plex.png and b/docs/site_assets/jellyfin/plex.png differ diff --git a/docs/site_assets/jellyfin/space-gray.png b/docs/site_assets/jellyfin/space-gray.png index 3d404d5b..9bdbe0de 100644 Binary files a/docs/site_assets/jellyfin/space-gray.png and b/docs/site_assets/jellyfin/space-gray.png differ diff --git a/docs/themes/jellyfin.md b/docs/themes/jellyfin.md index f7f4ae89..3f779d0f 100644 --- a/docs/themes/jellyfin.md +++ b/docs/themes/jellyfin.md @@ -9,25 +9,42 @@ Custom [{{ page.title.split()[0] }}](https://github.com/jellyfin/jellyfin) CSS ## 🛠️ Installation -### Setup +Choose one method below. Use subfiltering if you want the dashboard +themed too. -Go to `Dashboard` -> `General` and scroll down to `Branding` +### Built-in Custom CSS -In the custom CSS input field add: +These screenshots show Jellyfin 12.0. + +Open **Dashboard > Branding** and add this to **Custom CSS code**, replacing +`` with a [theme option](/theme-options/). Save your changes. ```css @import url("https://theme-park.dev/css/base/jellyfin/.css"); ``` -and hit save. - -i.e. +For example, Nord: ```css @import url("https://theme-park.dev/css/base/jellyfin/nord.css"); ``` - +### Subfiltering, including the dashboard + +Jellyfin 12 does not load its Custom CSS setting in the admin dashboard. +To theme those pages too, use [subfiltering](/setup/#subfiltering) instead of +the built-in method. Remove any theme.park import from **Custom CSS code** +and save before switching. + +Follow the setup guide for your reverse proxy and inject this stylesheet into +the web client HTML, replacing `` with your selected theme option: + +```text +https://theme-park.dev/css/base/jellyfin/.css +``` + +Keep injection out of API, media, and WebSocket responses. Subfiltering themes +both regular pages and the dashboard without a second import in Jellyfin. {% set addons = extra.addons %} {% set title = page.title.split()[0].lower() %}