• Login
  • Register
  • Login Register
    Login
    Username/Email:
    Password:
    Or login with a social network below
  • Forum
  • Website
  • GitHub
  • Status
  • Translation
  • Features
  • Team
  • Rules
  • Help
  • Feeds
User Links
  • Login
  • Register
  • Login Register
    Login
    Username/Email:
    Password:
    Or login with a social network below

    Useful Links Forum Website GitHub Status Translation Features Team Rules Help Feeds
    Jellyfin Forum Support Themes & Styles All I want is a logo on the login page

    Pages (2): 1 2 Next »

     
    • 1 Vote(s) - 3 Average

    All I want is a logo on the login page

    I'm sure there's an easy way but I don't know it
    Kevin Nord
    Offline

    Junior Member

    Posts: 27
    Threads: 7
    Joined: 2023 Jun
    Reputation: 0
    #1
    2023-06-24, 03:42 PM (This post was last modified: 2023-06-24, 03:46 PM by Kevin Nord. Edited 1 time in total.)
    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
    Offline

    Junior Member

    Posts: 15
    Threads: 4
    Joined: 2023 Jun
    Reputation: 4
    #2
    2023-06-27, 06:17 PM
    Try creating a psuedo elem for the login title text. For more info search for psuedo css elements
    DemonWarrior
    Offline

    Junior Member

    Posts: 29
    Threads: 10
    Joined: 2023 Jun
    Reputation: 4
    #3
    2023-06-28, 02:12 AM
    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
    Check out my Youtube for more Jellyfin + Reverse Proxy Tutorials
    DemonWarriorTech-YT
    Docs Site
    thornbill
    Offline

    Core Team

    Posts: 174
    Threads: 6
    Joined: 2023 Jun
    Reputation: 8
    Country:United States
    #4
    2023-06-28, 02:14 AM
    That doesn’t help when Jellyfin does not currently show any image there demon
    1
    DemonWarrior
    Offline

    Junior Member

    Posts: 29
    Threads: 10
    Joined: 2023 Jun
    Reputation: 4
    #5
    2023-06-28, 02:18 AM (This post was last modified: 2023-06-28, 02:26 AM by DemonWarrior. Edited 1 time in total.)
    (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/client...login-page
    Check out my Youtube for more Jellyfin + Reverse Proxy Tutorials
    DemonWarriorTech-YT
    Docs Site
    Prayag
    Offline

    Junior Member

    Posts: 15
    Threads: 4
    Joined: 2023 Jun
    Reputation: 4
    #6
    2023-07-02, 05:47 PM
    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
    1
    Kevin Nord
    Offline

    Junior Member

    Posts: 27
    Threads: 7
    Joined: 2023 Jun
    Reputation: 0
    #7
    2023-07-04, 11:15 AM (This post was last modified: 2023-07-04, 11:18 AM by Kevin Nord.)
    (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/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
    Offline

    Junior Member

    Posts: 9
    Threads: 0
    Joined: 2023 Jun
    Reputation: 0
    #8
    2023-08-25, 12:23 PM (This post was last modified: 2023-08-25, 12:30 PM by AshipaEkO. Edited 2 times in total. Edit Reason: added CSS )
    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
    Offline

    Community Moderator

    Posts: 841
    Threads: 9
    Joined: 2023 Jul
    Reputation: 27
    #9
    2023-08-25, 04:38 PM
    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)?
    Jellyfin 10.10.7 LSIO Docker | Ubuntu 24.04 LTS | i7-13700K | Arc A380 6 GB | 64 GB RAM | 79 TB Storage

    [Image: AIL4fc84QG6uSnTDEZiCCtosg7uAA8x9j1myFaFs...qL0Q=w2400]
    Kevin Nord
    Offline

    Junior Member

    Posts: 27
    Threads: 7
    Joined: 2023 Jun
    Reputation: 0
    #10
    2023-08-31, 02:47 PM
    (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.
    I don't want to change my sig with every new version. I'm running whatever the currently packaged version for Ubuntu Server 22.04 Smiling-face
    Pages (2): 1 2 Next »

    « Next Oldest | Next Newest »

    Users browsing this thread: 1 Guest(s)


    • View a Printable Version
    • Subscribe to this thread
    Forum Jump:

    Home · Team · Help · Contact
    © Designed by D&D - Powered by MyBB
    L


    Jellyfin

    The Free Software Media System

    Linear Mode
    Threaded Mode