{"id":23447240,"url":"https://github.com/lscambo13/elegantfin","last_synced_at":"2025-05-16T18:10:47.876Z","repository":{"id":265885927,"uuid":"896802513","full_name":"lscambo13/ElegantFin","owner":"lscambo13","description":"A Jellyfin theme inspired from Jellyseerr. This theme improves the overall look and experience with various little fixes to the UI.","archived":false,"fork":false,"pushed_at":"2025-04-03T18:57:15.000Z","size":47281,"stargazers_count":255,"open_issues_count":5,"forks_count":32,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-04T07:16:54.746Z","etag":null,"topics":["android-app","css","custom-css","design","elegant","elegant-theme","elegantfin","jellyfin","jellyfin-client","jellyfin-theme","jellyfin-web","jellyseerr","mod","modern","self-hosted","theme","ui","ux"],"latest_commit_sha":null,"homepage":"https://github.com/lscambo13/ElegantFin/blob/main/README.md","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lscambo13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-01T10:55:03.000Z","updated_at":"2025-04-03T18:57:18.000Z","dependencies_parsed_at":"2024-12-17T21:28:51.626Z","dependency_job_id":"f13225d1-de4e-434e-9ddf-c837ac71a6e8","html_url":"https://github.com/lscambo13/ElegantFin","commit_stats":null,"previous_names":["lscambo13/elegantfin"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lscambo13%2FElegantFin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lscambo13%2FElegantFin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lscambo13%2FElegantFin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lscambo13%2FElegantFin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lscambo13","download_url":"https://codeload.github.com/lscambo13/ElegantFin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248632270,"owners_count":21136655,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android-app","css","custom-css","design","elegant","elegant-theme","elegantfin","jellyfin","jellyfin-client","jellyfin-theme","jellyfin-web","jellyseerr","mod","modern","self-hosted","theme","ui","ux"],"created_at":"2024-12-23T21:16:53.160Z","updated_at":"2025-05-16T18:10:47.870Z","avatar_url":"https://github.com/lscambo13.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ElegantFin Theme\nThis is a Jellyfin theme inspired from JellySeerr to improve the overall look and experience with various fixes to the UI and behaviour.\n\n\n#### **Author:** [lscambo13](https://github.com/lscambo13)\n\n\u003chr\u003e\n\n### ✨ Key Features  \n- modern layouts and colors\n- new animations on some elements\n- reduced clutter by hiding unimportant buttons and elements\n- overall rounded design\n- stylish borders, hover effects and shadows\n- various fixes to the user experience\n\n\u003chr\u003e\n\n### ▶️ Demo\n\nhttps://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef\n\n\u003chr\u003e\n\n### 🖼️ Previews\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003eClick here to reveal (last updated: 2025-01-19)\u003c/i\u003e\u003c/summary\u003e\n  \n\u003cimg src=\"https://github.com/lscambo13/ElegantFin/blob/main/Previews/1.%20Homepage.png\" style=\"width:360px;height:auto;\"\u003e\u003c/img\u003e\n\u003cimg src=\"https://github.com/lscambo13/ElegantFin/blob/main/Previews/2.%20Movies%20Library.png\" style=\"width:360px;height:auto;\"\u003e\u003c/img\u003e\n\u003cimg src=\"https://github.com/lscambo13/ElegantFin/blob/main/Previews/3.%20Sidebar.png\" style=\"width:360px;height:auto;\"\u003e\u003c/img\u003e\n\u003cimg src=\"https://github.com/lscambo13/ElegantFin/blob/main/Previews/4.%20Movie%20Page.png\" style=\"width:360px;height:auto;\"\u003e\u003c/img\u003e\n\u003cimg src=\"https://github.com/lscambo13/ElegantFin/blob/main/Previews/5.%20Extra%20Dialog.png\" style=\"width:360px;height:auto;\"\u003e\u003c/img\u003e\n\u003cimg src=\"https://github.com/lscambo13/ElegantFin/blob/main/Previews/6.%20Settings%20Page.png\" style=\"width:360px;height:auto;\"\u003e\u003c/img\u003e\n\u003cimg src=\"https://github.com/lscambo13/ElegantFin/blob/main/Previews/7.%20Metadata%20Menu.png\" style=\"width:360px;height:auto;\"\u003e\u003c/img\u003e\n\u003cimg src=\"https://github.com/lscambo13/ElegantFin/blob/main/Previews/8.%20Dashboard%20Settings.png\" style=\"width:360px;height:auto;\"\u003e\u003c/img\u003e\n\u003cimg src=\"https://github.com/lscambo13/ElegantFin/blob/main/Previews/9.%20Web%20Player.png\" style=\"width:360px;height:auto;\"\u003e\u003c/img\u003e\n\n\u003c/details\u003e\n\n\u003chr\u003e\n\n### 👇 How to install/setup this theme? \n\n\u003cb\u003ePaste the following in Custom CSS code box:\u003c/b\u003e\n\n\t@import url(\"https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css\");\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003eDetailed steps for server-side implementation\u003c/i\u003e\u003c/summary\u003e\n\n1. Open Dashboard from Administration tab in Settings.\n2. Select General tab from the side bar.\n3. Scroll down to find Custom CSS code box under Branding section.\n4. Paste the custom css in Custom CSS code box.\n5. Click save\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003eDetailed steps for client-side implementation\u003c/i\u003e\u003c/summary\u003e\n\n1. Open Display tab in Settings.\n2. Scroll down to find Custom CSS code box.\n3. Paste the custom css in Custom CSS code box.\n4. Click save.\n\u003c/details\u003e\n\n\n\u003chr\u003e\n\n### 🧩 How to customise this theme? \n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003e1. Custom media covers for user media libraries\u003c/i\u003e\u003c/summary\u003e\n\n- [Previews](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md#%EF%B8%8F-presets-modify-these-styles-according-to-your-own-liking)\n- Read more about this experimental add-on [here](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003e2. Custom background image for the login page\u003c/i\u003e\u003c/summary\u003e\n\n- [Preview](https://user-images.githubusercontent.com/16425113/129554147-6ac7ba51-43e7-4c8e-ba77-e646a3ef6b12.jpg)\n- To enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.\n- Second, copy and paste the following code at the end in Custom CSS box but don't save yet.\n  ```\n  :root{\n    --loginPageBgUrl: url(\"\u003cYOUR-JELLYFIN-SERVER-ADDRESS\u003e/Branding/Splashscreen?format=webp\u0026foregroundLayer=1\u0026quality=33\u0026width=3840\u0026height=2160\u0026blur=2\");\n  }\n  ```\n- Third, replace `\u003cYOUR-JELLYFIN-SERVER-ADDRESS\u003e` with your Jellyfin server address, for example, `http://192.168.0.1:8097`.\n- Don't forget the correct http or https in your domain.\n- You can also modify the parameters, for example blur size or the resolution, according to your liking.\n- Once done, save and refresh your apps and webpages.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003e3. Bring back the home button in the app header\u003c/i\u003e\u003c/summary\u003e\n\n- Read more about steps [here](https://github.com/lscambo13/ElegantFin/issues/51)\n\n\u003c/details\u003e\n\n\u003chr\u003e\n\n### 🆗 Tested on \n- Jellyfin Server v10.10.6\n- Jellyfin Android App v2.6.2\n\n\u003chr\u003e\n\n### 🛠️ Troubleshooting \n\u003cdetails\u003e\n  \u003csummary\u003e1️⃣ - \u003ci\u003eHow do I check if I am using the latest version on ElegantFin?\u003c/i\u003e\u003c/summary\u003e\n\n- To make sure that you are using the latest version of ElegantFin, check the version number at the bottom in the Dashboard screen. \n- It should be something like ElegantFin v25.03.XX\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e2️⃣ - \u003ci\u003eI see that a newer version is available, but I have not received it yet. Why?\u003c/i\u003e\u003c/summary\u003e\n\n- If Dashboard footer shows an old version, it means that your app is still using an old cache.\n- Once that cache is updated, the new version will be loaded. \n- To get the latest version, you will need to clear cache. There are multiple ways to do it.\n- On web version, force a hard refresh of the page using CTRL + F5.\n- On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder. That should definitely pull the latest version.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e3️⃣ - \u003ci\u003eWhy do I notice visual bugs and inconsistencies on Jellyfin Media Player?\u003c/i\u003e\u003c/summary\u003e\n\n- Currently JMP uses Qt 5.x which uses an outdated web engine, so many new CSS features do not work. Once they release a new version based on Qt 6.x, most issues should automatically be resolved. Until then, I advise using the web app instead.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e4️⃣ - \u003ci\u003eAll the icons on my LG TV seem to be broken. How to fix them?\u003c/i\u003e\u003c/summary\u003e\n\n- It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this.\n- This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.\n- Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:\n  \n  ```\n  :root{\n    --iconPack: 'Material Icons';\n  }\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e5️⃣ - \u003ci\u003eHow do I report bugs/issues?\u003c/i\u003e\u003c/summary\u003e\n\n- First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know. \n- Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).\n\n\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e6️⃣ - \u003ci\u003eWhen can I expect another update?\u003c/i\u003e\u003c/summary\u003e\n\n- 🤷\n\u003c/details\u003e\n\n\u003chr\u003e\n\n\n## 🙏 FEEDBACK APPRECIATED\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flscambo13%2Felegantfin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flscambo13%2Felegantfin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flscambo13%2Felegantfin/lists"}