![]() |
Custom Login Page for Jellyfin with Shuffling Background and Profile Selection - Printable Version +- Jellyfin Forum (https://forum.jellyfin.org) +-- Forum: Support (https://forum.jellyfin.org/f-support) +--- Forum: General Questions (https://forum.jellyfin.org/f-general-questions) +--- Thread: Custom Login Page for Jellyfin with Shuffling Background and Profile Selection (/t-custom-login-page-for-jellyfin-with-shuffling-background-and-profile-selection) |
Custom Login Page for Jellyfin with Shuffling Background and Profile Selection - jjabharams - 2024-05-12 Title: Custom Login Page for Jellyfin with Shuffling Background and Profile Selection Hello everyone, I’m currently working on customizing my Jellyfin server and I need some help. I want to create a custom login page with a unique look and feel. Here are the specific features I’m looking to implement:
I’m not sure how to go about implementing these features. Could anyone provide some guidance or point me in the right direction? Any help would be greatly appreciated!
Thank you in advance for your time and assistance.
RE: Custom Login Page for Jellyfin with Shuffling Background and Profile Selection - BobHasNoSoul - 2024-05-23 I'm guessing you mean like this https://github.com/BobHasNoSoul/jellyfin-mods?tab=readme-ov-file#login-background-that-changes-every-10-seconds-and-reload It's for 10.8.x but will be updates for 10.9.x either this weekend or next weekend That is if that is what you mean.. also poke around there for the 10.9.x page and see what you can currently do with the login page.. I like the splash mod login page. RE: Custom Login Page for Jellyfin with Shuffling Background and Profile Selection - kiyani - 2025-04-04 #loginPage { background-image: url('/Branding/Splashscreen?format=jpg&foregroundLayer=1'); background-position: center; background-size: cover; background-attachment: fixed; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } {background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.2)); } /* Form container styling */ #loginPage .padded-left.padded-right.padded-bottom-page { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } /* Box container */ #loginPage .readOnlyContent, #loginPage form { width: 100%; max-width: 380px; background-color: rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(6px); border-radius: 20px; padding: 30px; box-shadow: 0 0 18px rgba(0, 0, 0, 0.6); box-sizing: border-box; } /* Input fields */ #loginPage input[type="text"], #loginPage input[type="password"] { width: 100%; background-color: rgba(255, 255, 255, 0.05); color: #fff; border: 1px solid #09a8e2; border-radius: 6px; padding: 10px; margin-top: 10px; box-sizing: border-box; } /* Buttons */ #loginPage .emby-button { margin-top: 16px; border-radius: 10px; font-weight: bold; font-size: 15px; width: 100%; box-sizing: border-box; } /* Checkbox alignment */ #loginPage .checkboxLabel { margin-top: 15px; margin-bottom: 5px; } /* Optional: Fade-in effect */ #loginPage .readOnlyContent { animation: fadeIn 1s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* ✅ Responsive Fix: Make sure it's centered on small screens */ @media (max-width: 600px) { #loginPage .readOnlyContent, #loginPage form { max-width: 100%; padding: 20px; margin: 0 10px; } } |