GlassFin
Jellyfin Theme designed around transparency and to resemble glass
Install / Use
/learn @KBH-Reeper/GlassFinREADME
🦈 GlassFin 🦈
GlassFin is a css Jellyfin theme built from ElegantFin by lscambo13 with improved and reactive UI elements to give the UX a more modern and interactive experience. GlassFin updates Jellyfin to be a more unified style and is available for Mobile and Desktop.
<div align="center" style="display: flex; gap: 5px; justify-content: center;"> <a href="https://github.com/KBH-Reeper/GlassFin/releases/latest"><img src="https://img.shields.io/github/v/release/KBH-Reeper/GlassFin?label=Latest%20Release&labelColor=555555&style=for-the-badge" alt="Latest Release"></a> <a href="https://github.com/KBH-Reeper/GlassFin/stargazers"><img src="https://img.shields.io/github/stars/KBH-Reeper/GlassFin?label=%E2%AD%90%20%E2%AD%90%20%E2%AD%90&labelColor=555555&style=for-the-badge" alt="GitHub Stars"></a><br> <a href="https://www.jsdelivr.com/package/gh/KBH-REEPER/GlassFin"><img src="https://data.jsdelivr.com/v1/package/gh/KBH-REEPER/GlassFin/badge?style=rounded" alt="jsDelivr" /> </a> </div>Original Creator of ElegantFin: lscambo13
<a href="https://github.com/lscambo13/ElegantFin/releases/latest"><img src="https://img.shields.io/github/v/release/lscambo13/ElegantFin?label=Go%20Support%3A%20lscambo%20-%20ElegantFin&labelColor=555555&style=for-the-badge" alt="Latest Release"></a>
👌 Optimised for:
<img src="https://img.shields.io/badge/Jellyfin%20Version-10.11.x-AA5CC3?logo=jellyfin&logoColor=00A4DC&labelColor=black" alt="Jellyfin Version"> <hr>🎁 Features
- Updated and reactive elements
- Improved button animations
- Stylized hover effects and shadows
- Removed unnecassary screen bloat
- Improve the user experience
- Unifed design between Desktop and Mobile
💿 Theme Demonstration
JellyFin V10.11.6
🔌 Installed Plugins
- Media Bar by IAmParadox27
- Jellyfin Enhanced by n00bcodr
Mobile Demo
https://github.com/user-attachments/assets/d462919d-c6dc-4605-a4bb-69e2870985f8
Desktop Demo
https://github.com/user-attachments/assets/b36305d9-f209-4879-9266-8b338f3dd1f7
<details> <summary> 🖥️ <i>Desktop</i></summary>| Desktop | | ------------------------------------------------------------------------------------------------------------- | | <div align="center"><img src="https://github.com/KBH-Reeper/GlassFin/blob/main/Visuals/Desktop/Login.png?raw=true"><br><strong>Login Page</strong></div> | | <div align="center"><img src="https://github.com/KBH-Reeper/GlassFin/blob/main/Visuals/Desktop/Homescreen.png?raw=true"><br><strong>Homescreen</strong></div> | | <div align="center"><img src="https://github.com/KBH-Reeper/GlassFin/blob/main/Visuals/Desktop/Homescreen-Sidemenu.png?raw=true"><br><strong>Menu's</strong></div> | | <div align="center"><img src="https://github.com/KBH-Reeper/GlassFin/blob/main/Visuals/Desktop/Movies.png?raw=true"><br><strong>Movies Page</strong></div> | | <div align="center"><img src="https://github.com/KBH-Reeper/GlassFin/blob/main/Visuals/Desktop/TvSeries.png?raw=true"><br><strong>TV Series Page</strong></div> |
</details> <details> <summary> 📱 <i>Mobile</i></summary>| Mobile | | ------------------------------------------------------------------------------------------------------------- | | <div align="center"><img src="https://github.com/KBH-Reeper/GlassFin/blob/main/Visuals/Mobile/Mobile-LoginScreen.jpg?raw=true"><br><strong>Login Page</strong></div> | | <div align="center"><img src="https://github.com/KBH-Reeper/GlassFin/blob/main/Visuals/Mobile/Mobile-Homescreen.jpg?raw=true"><br><strong>Homescreen</strong></div> | | <div align="center"><img src="https://github.com/KBH-Reeper/GlassFin/blob/main/Visuals/Mobile/Mobile-SideMenu.jpg?raw=true"><br><strong>Menu's</strong></div> | | <div align="center"><img src="https://github.com/KBH-Reeper/GlassFin/blob/main/Visuals/Mobile/Mobile-Movies.jpg?raw=true"><br><strong>Movies Page</strong></div> | | <div align="center"><img src="https://github.com/KBH-Reeper/GlassFin/blob/main/Visuals/Mobile/Mobile-MoviePage.jpg?raw=true"><br><strong>Movie Detail Page</strong></div> | | <div align="center"><img src="https://github.com/KBH-Reeper/GlassFin/blob/main/Visuals/Mobile/Mobile-Menus.jpg?raw=true"><br><strong>Menu's</strong></div> | | <div align="center"><img src="https://github.com/KBH-Reeper/GlassFin/blob/main/Visuals/Mobile/Mobile-ActiveStream.jpg?raw=true"><br><strong>Active Stream</strong></div> |
</details> <hr>𝍌 How to insert the GlassFin CCS theme to your JellyFin?
<b>Use the following Custom CSS to use the latest version of GlassFin:</b>
@import url("https://cdn.jsdelivr.net/gh/KBH-Reeper/GlassFin@latest/Theme/GlassFin-Theme-latest-stable.css");
<b>Use the following Custom CSS to use a specific version of GlassFin:</b> <u>Update the placeholder "xx.xx" with the specific version of GlassFin you wish to use</u>
@import url("https://cdn.jsdelivr.net/gh/KBH-Reeper/GlassFin@latest/Theme/GlassFin-Theme-Vxx.xx.css");
- Open the Dashboard option from the side mega menu.
- From the side menu, select the Branding tab
- Copy the import URL above and paste it into the Custom CSS input box.
- Click save
🧩 Plugins Customisation
<details> <summary><i>Media Bar plugin</i></summary> <b>Areas highlighted in red are the style changes (red indicators will not be present when added to JellyFin)</b><u>Requires Media Bar plugin to be installed: IAmParadox27</u>
<img width="640" height="auto" alt="Image" src="https://github.com/user-attachments/assets/bb8c590c-d7a2-4c89-8eea-d5e337bfdfef" />- copy and paste the following code at the end in Custom CSS box, click save. (Can require a refresh or deletion of browser cache to become available)
@import url("https://cdn.jsdelivr.net/gh/KBH-Reeper/GlassFin@main/Theme/PluginStyling/MediaBar-Plugin-latest.css");
- To undo this change, simply remove the import url related to the MediaBar.
- copy and paste the following code at the end in Custom CSS box, click save. (Can require a refresh or deletion of browser cache to become available)
@import url("https://cdn.jsdelivr.net/gh/KBH-Reeper/GlassFin@latest/Theme/Styling/ActivatePosterButtons.css");
- To undo this change, simply remove the import url related to the CardButtons.
⚡️ Additional Visual Customisation
Movie Watch & Episode Couter Badges
<b>Contributed by</b> jbar24
<details> <summary><i>Activate Movie & Episode Badges</i></summary> <u>Use the import below to activate the Movie & Episode Badges</u> <img width="994" height="422" alt="image" src="https://github.com/user-attachments/assets/3c9010e3-b516-4e1f-a95a-a6b97cd963fb" />- copy and paste the following code at the end in Custom CSS box, click save. (Can require a refresh or deletion of browser cache to become available)
@import url("https://cdn.jsdelivr.net/gh/KBH-Reeper/GlassFin@main/Theme/Styling/ActivateBadges.css");
Movie Watch & Episode Couter Badge Theming
<details> <summary>Glass</summary> <u>Requires the Movie & Episode Badges to be activated</u> <img width="987" height="382" alt="image" src="https://github.com/user-attachments/assets/a9915cf3-286e-41ed-91bd-fbf9971513ae" />- copy and paste the following code at the end in Custom CSS box, click save. (Can require a refresh or deletion of browser cache to become available)
@import url("https://cdn.jsdelivr.net/gh/KBH-Reeper/GlassFin@main/Theme/Styling/BadgeStyling/Glass.css");
- copy and paste the following code at the end in Custom CSS box, click save. (Can require a refresh or deletion of browser cache to become available)
@import url("https://cdn.jsdelivr.net/gh/KBH-Reeper/GlassFin@main/Theme/Styling/BadgeStyling/PurpleGlass.css");
- copy and paste the following code at the end in Custom CSS box, click save. (Can require a refresh or deletion of browser cache to become available)
@import url("https://cdn.jsdelivr.net/gh/KBH-Reeper/GlassFin@main/Theme/Styling/BadgeStyling/PurpleStainedGlass.css");
