Custom Login Page for Jellyfin with Shuffling Background and Profile Selection

[jjabharams]

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:

1. Shuffling Background: I’d like the background of the login page to shuffle between different images, creating a dynamic and visually appealing effect.
   
2. Profile Selection: I want to add the ability to choose profiles directly from the login page. This would make it easier for users to switch between different profiles.
   

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.

[BobHasNoSoul]

I'm guessing you mean like this https://github.com/BobHasNoSoul/jellyfin...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.

[kiyani]

#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;
  }
}