+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: All I want is a logo on the login page (/t-all-i-want-is-a-logo-on-the-login-page)
Pages:
1
2
All I want is a logo on the login page - Kevin Nord - 2023-06-24
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!
RE: All I want is a logo on the login page - Prayag - 2023-06-27
Try creating a psuedo elem for the login title text. For more info search for psuedo css elements
RE: All I want is a logo on the login page - DemonWarrior - 2023-06-28
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
RE: All I want is a logo on the login page - thornbill - 2023-06-28
That doesn’t help when Jellyfin does not currently show any image there demon
RE: All I want is a logo on the login page - DemonWarrior - 2023-06-28
(2023-06-28, 02:14 AM)thornbill Wrote: 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/clients/css-customization/#minimalistic-login-page
RE: All I want is a logo on the login page - Prayag - 2023-07-02
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
RE: All I want is a logo on the login page - Kevin Nord - 2023-07-04
(2023-06-27, 06:17 PM)Prayag Wrote: 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!
(2023-06-28, 02:18 AM)DemonWarrior Wrote:(2023-06-28, 02:14 AM)thornbill Wrote: 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/clients/css-customization/#minimalistic-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!
RE: All I want is a logo on the login page - AshipaEkO - 2023-08-25
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;
}RE: All I want is a logo on the login page - bitmap - 2023-08-25
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)?
RE: All I want is a logo on the login page - Kevin Nord - 2023-08-31
(2023-08-25, 12:23 PM)AshipaEkO Wrote: You mean something like the attached image?
https://imgur.com/a/pinESli
Yes, brilliant! that is exactly what I am looking for
(2023-08-25, 12:23 PM)AshipaEkO Wrote: 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.