Jump to content

Recommended Posts

tomnjerry74
Posted (edited)

Edit (12/19/2020 - Cleaned up code, Re-wrote guide for step-by-step method)

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:

netflix.thumb.jpg.939e30a5c8539a3ef9cacebe3c979d48.jpg

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

 

Steps

First, there are some edits in manuallogin.html:

1. Find the line

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow" data-mousewheel="true" data-horizontal="false" data-centerfocus="card">

and add "custombg" as a class, like so

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow custombg" data-mousewheel="true" data-horizontal="false" data-centerfocus="card">

 

2. Find the line

<div class="scrollSlider flex-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page">

and add "custombody" as a class, like so

<div class="scrollSlider flex-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page custombody">

 

3. Find the line with the <form> tag and replace it with

<form class="customoverlay">

 

Optional: If you'd like to add custom buttons, simply place and alter the following code after a </button> tag

<a is="emby-button" class="raised block emby-button" href="https://myforum.com">Forum</a>

 

 

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

.customoverlay
{
  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%
}

.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
}

Optional: Add the following css as well in order to hide the "Forgot Password" and "Cancel" buttons.

.btnForgotPassword
{
  display:none!important
}

.buttonCancel
{
  display:none!important
}

 

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 by tomnjerry74
Cleaned up code, Re-wrote guide for step-by-step method
  • Like 2
  • Haha 1
  • Thanks 1
riothamus
Posted

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

  • Like 1
tomnjerry74
Posted
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
Posted

sensacional

  • Like 1
riothamus
Posted
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
Posted
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
Posted
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:

netflix.thumb.jpg.939e30a5c8539a3ef9cacebe3c979d48.jpg

 

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"  ??

 

  • Like 1
tomnjerry74
Posted
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.

  • 2 weeks later...
Augenstern
Posted (edited)

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 by Emby-Media Center
  • 4 months later...
KobayashiM
Posted (edited)

Don't mean to hijack but I'm using Emby docker in Unraid and wasn't able to locate the manuallogin.html file. So I found a way to do it using custom css only. The downside is that this will also change the background image on all of your settings screens which I personally do not mind too much. Just change the settings theme to one that works with your background ("dark" theme works well with the background in my example below).

Backgrounds on the homepage, categories and movies/shows are not affected if you have them turned on. Feel free to use my background image (not mine but I modified it to look "netflixy").


/* Background image on Login screen  */

.backgroundContainer{
  background-image: url(https://i.imgur.com/dXB5cfN.jpg)!important;
}

Sample_Login_Background.png

Image Links:

15% Opacity:
https://i.imgur.com/pMZxedJ.jpeg


15% Opacity w/ Large Fade:
https://i.imgur.com/YPnzXwJ.jpg


15% Opacity w/ Small Fade:
https://i.imgur.com/dXB5cfN.jpg


10% Opacity:
https://i.imgur.com/qLSkLYB.jpg

Edited by KobayashiM
Added image
  • Like 2
tomnjerry74
Posted
1 hour ago, KobayashiM said:

Don't mean to hijack but I'm using Emby docker in Unraid and wasn't able to locate the manuallogin.html file. So I found a way to do it using custom css only. The downside is that this will also change the background image on all of your settings screens which I personally do not mind too much. Just change the settings theme to one that works with your background ("dark" theme works well with the background in my example below).

Backgrounds on the homepage, categories and movies/shows are not affected if you have them turned on. Feel free to use my background image (not mine but I modified it to look "netflixy").


/* Background image on Login screen  */

.backgroundContainer{
  background-image: url(https://i.imgur.com/pMZxedJ.jpeg)!important;
}

poster-bg-4k-dim-15.jpg

Nice work! Glad you figured something out.😄

After looking back, my original code could definitely use some tidying up, as it's pretty "unoptimized". All of the styling should be done with the custom css sheet.

  • Like 1
Posted (edited)

And is there a way to have a background image ONLY on a login page and not on every page using only css?

 

Edited by cochize1
tomnjerry74
Posted
2 hours ago, cochize1 said:

And is there a way to have a background image ONLY on a login page and not on every page using only css?

 

I don't believe so, as you need to add something (an extra div, an id, etc..) into manuallogin.html in order to be able to specifically target the page.

I wouldn't entirely rule out a master coder coming around and proving how it's possible, but from my understanding it isn't.

  • Like 2
  • 5 months later...
ryzilla
Posted

This is great looks amazing, well done

  • 11 months later...
KrakaClue
Posted

This guide save my day, thank you all!

Regarding the Docker Emby image and what @KobayashiM said, I would like to clarify that as of April 2022 it is now possible to edit directly the manuallogin.html page inside the docker image.

STEPS:

  1. Get access to tour docker image: sudo docker exec -ti <docker-id> /bin/bash
  2. Navigate to: /app/emby/dashboard-ui/startup/
  3. Open with nano or others: nano manuallogin.html
  4. OPTIONAL install nano: apt-get -y update && apt -y install nano
  5. Follow same steps as indicated by @tomnjerry74

Done :)

  • 2 weeks later...
Guest phoenixexcinere
Posted (edited)
On 4/24/2022 at 11:31 AM, KrakaClue said:

This guide save my day, thank you all!

Regarding the Docker Emby image and what @KobayashiM said, I would like to clarify that as of April 2022 it is now possible to edit directly the manuallogin.html page inside the docker image.

STEPS:

  1. Get access to tour docker image: sudo docker exec -ti <docker-id> /bin/bash
  2. Navigate to: /app/emby/dashboard-ui/startup/
  3. Open with nano or others: nano manuallogin.html
  4. OPTIONAL install nano: apt-get -y update && apt -y install nano
  5. Follow same steps as indicated by @tomnjerry74

Done :)

does it work with docker under unraid? I tried, but i can't find the manuallogin and i can't install nano or anything else

Edited by phoenixexcinere

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...