Jellyfin Forum
log in customization - Printable Version

+- 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: log in customization (/t-log-in-customization)

log in customization - Para Apps - 2025-02-27

Hey, so im trying to customize my log in page and looks like this [Image: qeRU4tt] i selected "Por Favor, inicie sesion"

How can i get rid of it?



This is my Custom CSS login section

    #loginPage:after {
        background: url(https://galacticbikes.com/wp-content/uploads/2016/08/galaxy-wallpaper-36.jpg);
        background-size: cover;
        content: "";
        filter: blur(2px);
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        width: 100vw;
        z-index: 1
    }
    .padded-left.padded-right.flex.align-items-center.justify-content-center {

        background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEg8NV9QmdemqvZm41yQ4e50ojsMDzDM1uNvLpEt_Lt6CPYptH8lYaW-IlRpMyaxBYqXTU95AQJP6jDBV7NAG9yo421hDc-yrfhSuwP_nV2ZdAkO-8ZBjcg431fpmm4q6_Y9w2W9MVSBTdm20uqOlkPdIFnkoN2JdGVcWZjayAfTWhE_bYYmUa1mKi_V2E2_=s16000);

        background-size: contain;

        padding-bottom: 30px;

        height: 500px;

        background-position: center;

        background-repeat: no-repeat;

    }
    #loginPage:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* 10% de oscuridad */
        z-index: 1;
    }
   
    #loginPage>div {
        left: 50%;
        max-width: 50vw;
        min-width: 40vw;
        padding: 0 !important;
        position: absolute;
        top: 50%;
        bottom: 50%;
        transform: translate(-50%, -50%);
        z-index: 2
    }
   
    #loginPage #divUsers {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow: auto
    }
   
    #loginPage #divUsers .card {
        width: 30%
    }
   
    #loginPage #divUsers .card .cardBox {
        box-shadow: none !important
    }
   
    #loginPage .emby-button {
        background: transparent;
        border: .2em solid
    }
   
    #loginPage .emby-button:after {
        all: unset !important
    }
   
    #loginPage .emby-button:focus-visible,
    #loginPage .emby-button:hover {
        background: hsla(0, 0%, 100%, .2)
    }
   
    #loginPage .checkboxOutline {
        background: transparent !important;
        border: .152em solid #fff !important
    }
   
    #loginPage .emby-input:focus,
    #loginPage .inputLabelFocused {
        border-bottom-color: #fff !important;
        color: #fff !important
    }
   
    .layout-mobile #loginPage>div {
        max-width: 85vw;
        width: 85vw
    }

RE: log in customization - LeviSnoot - 2025-03-14

Code:
#loginPage .visualLoginForm > h1:first-child {
visibility: hidden;
}

Code:
#loginPage .visualLoginForm > h1:first-child {
display: none;
}

Either of these will get rid of it but display: none; may mess with padding.
To explain what this does, it selects the first h1 element inside the visualLoginForm div on the login page, which is where the text you want to hide resides. This could change in future versions of Jellyfin, so keep an eye out when updating. As the element does not have a distinct class name, we have to select it from its parent div.