Netflix Style Login Page

[tomnjerry74 8]

Hi everyone,

I recently decided to ditch my server's landing page and just use emby itself. I've been making changes to the login page to give it a "Netflix" style and have come up with this:

 

Now, if anyone is interested in accomplishing this, you should know it isn't just CSS.

First, replace your manuallogin.html with this:

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow custombg" data-mousewheel="true" data-horizontal="false" data-centerfocus="card">
    <div class="scrollSlider flex-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page custombody">
        <form style="background-color:rgba(0,0,0,.75);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 auto;min-height:515px;padding:40px 40px 40px;width:100%;">

            <h1 style="text-align: left;margin-top:0;">${HeaderPleaseSignIn}</h1>

            <div class="inputContainer">
                <input is="emby-input" class="txtUserName" type="text" id="txtUserName" autocomplete="off" label="${LabelUsername}" required />
            </div>
            <div class="inputContainer">
                <input is="emby-input" class="txtPassword" type="password" id="txtPassword" autocomplete="off" label="${LabelPassword}" />
            </div>
            <label class="checkboxContainer">
                <input is="emby-checkbox" type="checkbox" class="chkRememberLogin" checked />
                <span>${RememberMe}</span>
            </label>
            <button is="emby-button" type="submit" class="raised block paperSubmit">
                <span>${HeaderSignIn}</span>
            </button>
          
          <a is="emby-button" class="raised block emby-button" href="https://myforum.com">Forum</a>
          
            <button is="emby-button" type="button" class="raised block buttonCancel">
                <span>${Cancel}</span>
            </button>


            <div style="margin-top:2em;">
                <button is="emby-button" type="button" class="raised cancel block btnForgotPassword">
                    <span>${HeaderForgotPassword}</span>
                </button>

                <button is="emby-button" type="button" class="raised hide block btnSelectServer">
                    <span>${HeaderChangeServer}</span>
                </button>

                <p class="disclaimer" style="text-align:center;margin-top:2em;"></p>
            </div>

        </form>
    </div>
</div>

Note that you can change the custom button I left in or just delete it entirely.

 

Then, in your Emby settings, add this custom CSS:

.btnForgotPassword {
	display: none !important;
}

.buttonCancel {
	display: none !important;
}

.custombg {
	background: url('https://i.imgur.com/ynv9BKl.jpg');
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	height: 100vh;
	position: fixed;
	background-position: center center;
	background-repeat: no-repeat;
} 

.custombody {
	height: 100vh;
	overflow-y: auto;
  	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

You can now replace the background url with any image you want to use. I've kept in a temporary one.

Note: In order to see the changes to manuallogin.html, you likely have to clear your browser cache.

 

Hopefully someone might find this post useful. Special thanks to @Happy2Play for always answering my CSS questions.

Edited July 15 by tomnjerry74

[riothamus 48]

That's pretty slick!  Where did you get the background image from?

[tomnjerry74 8]

2 hours ago, riothamus said:

That's pretty slick!  Where did you get the background image from?

Glad you like it. The background from my screenshot is something I quickly put together in photoshop. I can share the PSD so people can use their own posters if there's any interest.

[jefersonjatobaa 2]

sensacional

[riothamus 48]

23 hours ago, tomnjerry74 said:

Glad you like it. The background from my screenshot is something I quickly put together in photoshop. I can share the PSD so people can use their own posters if there's any interest.

Yeah, if you don't mind, I would like to see the PSD file.  I might give this a go myself.  Appreciate it!

[tomnjerry74 8]

29 minutes ago, riothamus said:

Yeah, if you don't mind, I would like to see the PSD file.  I might give this a go myself.  Appreciate it!

Sure! Changing the posters can be a  little tedious but you essentially just resize yours right over top of the ones already there.

Background Posters.psd

[jefersonjatobaa 2]

On 13/07/2020 at 22:16, tomnjerry74 said:

Hi everyone,

I recently decided to ditch my server's landing page and just use emby itself. I've been making changes to the login page to give it a "Netflix" style and have come up with this:

 

Now, if anyone is interested in accomplishing this, you should know it isn't just CSS.

First, replace your manuallogin.html with this:

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow custombg" data-mousewheel="true" data-horizontal="false" data-centerfocus="card">
    <div class="scrollSlider flex-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page custombody">
        <form style="background-color:rgba(0,0,0,.75);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 auto;min-height:515px;padding:40px 40px 40px;width:100%;">

            <h1 style="text-align: left;margin-top:0;">${HeaderPleaseSignIn}</h1>

            <div class="inputContainer">
                <input is="emby-input" class="txtUserName" type="text" id="txtUserName" autocomplete="off" label="${LabelUsername}" required />
            </div>
            <div class="inputContainer">
                <input is="emby-input" class="txtPassword" type="password" id="txtPassword" autocomplete="off" label="${LabelPassword}" />
            </div>
            <label class="checkboxContainer">
                <input is="emby-checkbox" type="checkbox" class="chkRememberLogin" checked />
                <span>${RememberMe}</span>
            </label>
            <button is=  
                
            
          
             
          
               
                
            


             
                   
                    
                

                   
                    
                

                  
            

        
    

Observe que você pode alterar o botão personalizado que eu deixei ou apenas excluí-lo completamente.

 

Em suas configurações do Emby, adicione este CSS personalizado:

Agora você pode substituir o URL do plano de fundo por qualquer imagem que desejar usar. Eu mantive em um temporário.

Espero que alguém ache este post útil. Agradecimentos especiais para@ Happy2Play por sempre responder minhas perguntas sobre CSS.

Hi. I made the changes, but I was unsuccessful.

The right path would be "\ system \ dashboard-ui \ startup \ manuallogin.html"  ??

 

[tomnjerry74 8]

3 minutes ago, jefersonjatobaa said:

Hi. I made the changes, but I was unsuccessful.

The right path would be "\ system \ dashboard-ui \ startup \ manuallogin.html"  ??

 

I believe that is the correct path. Make sure you completely clear your browser cache too. I forgot to mention that.

[Augenstern 0]

hi

Thank you for sharing

I have a problem and want to ask. After modifying the login background, clear the cookies. We have been able to see the background successfully. If you replace a computer, you must repeat this step. You can't show the background directly. Is it because the cookies on the new computer don't have CSS? Is there any way to solve this problem?

thank you

Edited July 27 by Emby-Media Center