mirror of
https://github.com/lscambo13/ElegantFin.git
synced 2025-09-23 18:49:38 +00:00
79 lines
2.7 KiB
Markdown
79 lines
2.7 KiB
Markdown
# ElegantFin Theme
|
|
This is a Jellyfin theme inspired from JellySeerr to improve the overall look and experience with various fixes to the UI and behaviour.
|
|
|
|
|
|
#### **Author:** [lscambo13](https://github.com/lscambo13)
|
|
|
|
<hr>
|
|
|
|
### ✨ Key Features
|
|
- modern layouts and colors
|
|
- new animations on some elements
|
|
- reduced clutter by hiding unimportant buttons and elements
|
|
- overall rounded design
|
|
- stylish borders, hover effects and shadows
|
|
|
|
<hr>
|
|
|
|
### ▶️ Demo
|
|
|
|
https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
|
|
|
|
<hr>
|
|
|
|
### 🖼️ Previews
|
|
|
|
<details>
|
|
<summary><i>Click here to reveal</i></summary>
|
|
|
|
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/1.%20Homepage.png" style="width:480px;height:auto;"></img>
|
|
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/2.%20Movies%20Library.png" style="width:480px;height:auto;"></img>
|
|
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/3.%20Sidebar.png" style="width:480px;height:auto;"></img>
|
|
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/4.%20Movie%20Page.png" style="width:480px;height:auto;"></img>
|
|
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/5.%20Extra%20Dialog.png" style="width:480px;height:auto;"></img>
|
|
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/6.%20Settings%20Page.png" style="width:480px;height:auto;"></img>
|
|
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/7.%20Metadata%20Menu.png" style="width:480px;height:auto;"></img>
|
|
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/8.%20Dashboard%20Settings.png" style="width:480px;height:auto;"></img>
|
|
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/9.%20Web%20Player.png" style="width:480px;height:auto;"></img>
|
|
|
|
</details>
|
|
|
|
<hr>
|
|
|
|
### 👇 How to install/setup this theme?
|
|
|
|
<b>Paste the following in Custom CSS code box:</b>
|
|
|
|
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css");
|
|
|
|
<details>
|
|
<summary><i>Detailed steps for server-side implementation</i></summary>
|
|
|
|
1. Open Dashboard from Administration tab in Settings.
|
|
2. Select General tab from the side bar.
|
|
3. Scroll down to find Custom CSS code box under Branding section.
|
|
4. Paste the custom css in Custom CSS code box.
|
|
5. Click save
|
|
</details>
|
|
|
|
<details>
|
|
<summary><i>Detailed steps for client-side implementation</i></summary>
|
|
|
|
1. Open Display tab in Settings.
|
|
2. Scroll down to find Custom CSS code box.
|
|
3. Paste the custom css in Custom CSS code box.
|
|
4. Click save.
|
|
</details>
|
|
|
|
|
|
<hr>
|
|
|
|
### 🆗 Tested on
|
|
- Jellyfin Server v10.10.3
|
|
- Jellyfin Android App v2.6.2
|
|
|
|
<hr>
|
|
|
|
|
|
## 🙏 FEEDBACK APPRECIATED
|