All I want is a logo on the login page

[Kevin Nord]

Hello, recently transplanted here from Reddit.
I have been working on improving my Jellyfin instance with the custom CSS tutorials and examples, but one thing has been eluding me. All I want is my logo above the login form as shown here:     

For the life of me, I can't figure out what I need to do. I have 25 years background as a sysadmin and developer but I never learned CSS. I've picked up a little as I go but for the life of me, I can't figure this one out.

Running JF 10.8.10 on Ubuntu server 22.04.2, non-docker.

Thanks for any help, looking forward to growing with this community!

[Prayag]

Try creating a psuedo elem for the login title text. For more info search for psuedo css elements

[DemonWarrior]

just replace the img with a logo in your /jellyfin-server/jellyfin-web/assets/img i dont know where specifically the jellyfinweb folder directory is on linux but once you find it replace these logos.
banner-dark.png
banner-light.png
and if you want a shorter icon logo
icon-transparent.png

this is what it should look like once you replace the images.
https://i.imgur.com/SfzRBdn.png



**NOTE** You need to stop jellyfin to replace the items then restart it. after that ctrl+f5 or open a private/incognito browser

[thornbill]

That doesn’t help when Jellyfin does not currently show any image there demon

[DemonWarrior]

That doesn’t help when Jellyfin does not currently show any image there demon

Im assuming he used the minimalistic login screen which some of that code removes the logos on the login screen. So the next step is him posting his css so we can tell him what to remove or edit to fix his issue. I did not see his current issue with no logos. But thats my best guess currently. I think he used this https://jellyfin.org/docs/general/client...login-page

[Prayag]

Seeing the image he wants the logo to appear just above the login form and the best way to do this is to create a psuedo element for the form wrapper and add image to it

[Kevin Nord]

Try creating a psuedo elem for the login title text. For more info search for psuedo css elements

Thanks I'll give it a crack this morning!

---

That doesn’t help when Jellyfin does not currently show any image there demon

Im assuming he used the minimalistic login screen which some of that code removes the logos on the login screen. So the next step is him posting his css so we can tell him what to remove or edit to fix his issue. I did not see his current issue with no logos. But thats my best guess currently. I think he used this https://jellyfin.org/docs/general/client...login-page

You are correct, I'll post my CSS here:

Code:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/compactPosters.css");

/* Make count indicator icon dark and transparent */
.countIndicator {background: #ff000058;}
/* Make watched icon dark and transparent */
.indicator { background: #ff0000 !important; }

.skinHeader,
.mainDrawer,
.emby-input,
.emby-textarea,
.emby-select,
.navMenuOption-selected,
.cardBox,
.paperList {
  background: #300000;
}
.backgroundContainer.withBackdrop,
.backdropContainer,
.backgroundContainer {
  background: #1a0000;
}
/* Backdrop Image */
.backdropImage {
  display: none;
}

.emby-input,
.emby-textarea,
.emby-select {
  border-color: #ffffff;
}

.emby-input:focus,
.emby-textarea:focus,
.emby-select-withcolor {
  border-color: #cc0000 !important;
}
.backgroundContainer {
  background-color: rgba(0, 0, 0, 0);
  background-image: url('https://ko4bep.net/img/nordflix_bg.png');
  filter: blur(10px);
  background-size: cover;
}
.pageTitleWithDefaultLogo {
    background-image: url('https://ko4bep.net/img/nordflix.png');
}
.playedIndicator {
  background: #DB202C;
}

.headerSyncButton {
  display: none;
}

div.starRatingContainer {
  display: none;
}

#homeTab
  > div
  > div.section2
  > div:nth-child(1)
  > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
  > a
  > h2 {
  display: none;
}
#homeTab
  > div
  > div.section2
  > div:nth-child(1)
  > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
  > a
  > span {
  display: none;
}
#homeTab
  > div
  > div.section2
  > div:nth-child(1)
  > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
  > a:after {
  content: 'Recently Added Movies ›';
  font-size: 24px;
  font-weight: normal;
}


#loginPage {
  background: url('https://ko4bep.net/img/nordflix_bg.png');
  background-size: cover;
}

/* Adjust both "size-adjust" and "size" to modify size */
.headerTabs.sectionTabs {
  text-size-adjust: 100%;
  font-size: 100%;
}
.pageTitle {
  margin-top: auto;
  margin-bottom: auto;
}
.emby-tab-button {
  padding: 1.75em 1.7em;
}

/* Narrow the login form */
#loginPage .readOnlyContent,
#loginPage form {
  max-width: 22em;
}

/* Hide "please login" text, margin is to prevent login form moving too far up */
#loginPage h1 {
  display: none;
}
#loginPage .padded-left.padded-right.padded-bottom-page {
  margin-top: 50px;
}

/* Hide "manual" and "forgot" buttons */
#loginPage .raised.cancel.block.btnManual.emby-button {
  display: none;
}
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
  display: none;
}

/* Size episode preview images in a more compact way */
.listItemImage.listItemImage-large.itemAction.lazy {
  height: 100px;
}
.listItem-content {
  height: 100px;
}
.secondary.listItem-overview.listItemBodyText {
  height: 61px;
  margin: 0;
}

Thanks for taking the time to reply!

[AshipaEkO]

You mean something like the attached image?


https://imgur.com/a/pinESli



You can do that with this bit of CSS, but you will need to fix it.   it puts the same logo on top of each library unfortunately, but since you know how to use CSS i'm sure you can fix it


obviously replace the images

Code:

#loginPage {
    background: url(https://wallpapercave.com/wp/wp1946560.jpg), radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)) !important;
    background-size: cover !important;
    background-blend-mode: overlay;
}

.padded-left.padded-right.flex.align-items-center.justify-content-center {
    background-image: url(https://i.imgur.com/kawOEKl.png);
    background-size: contain;
    padding-bottom: 30px;
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
}

[bitmap]

Damn, that's pretty cool. I mean...I never see the login page, but that's cool. Is there a way to do this same kind of thing for the splash pages on various platforms (I'm getting into new topic territory, sorry)?

[Kevin Nord]

You mean something like the attached image?


https://imgur.com/a/pinESli

Yes, brilliant! that is exactly what I am looking for

You can do that with this bit of CSS, but you will need to fix it.   it puts the same logo on top of each library unfortunately, but since you know how to use CSS i'm sure you can fix it

I'm sorry if I've given the impression that I "know" CSS. Any custom CSS I used was either copy-pasted or hacked together based on examples I found elsewhere as I try to figure it out enough to get something working lol. Maybe I'll take another swing at it this weekend.