Login page background image (4.3 change)

[atropa 10]

Hello,

since the update the background image on the login page does not work anymore.

Of course I copied the picture back to the folder.

With this code everything worked before:

#loginPage {
    background: url("/web/css/images/myimage.jpg");
    background-size: cover;
}

Has anything changed ?

 

 

 

regards

Edited November 21, 2019 by atropa

[chef 3808]

Are you using the '!important' keyword to override the css var.

[TheFlight 0]

After update to 4.3.0.26 the backgroundimage isn't working for me too. I use the !important tag.

This is also not working anymore: .btnForgotPassword { display: none !important; }

Is there a solution?

[atropa 10]

Are you using the '!important' keyword to override the css var.

Tested with and without !important. Nothing worked.

 

 

After update to 4.3.0.26 the backgroundimage isn't working for me too. I use the !important tag.

This is also not working anymore: .btnForgotPassword { display: none !important; }

Is there a solution?

 

Yes i can confirm that

#loginPage .btnForgotPassword {display: none; }

is not working either.

 

 

All other css with images are working correctly.

Only the login page is not working.

Edited November 23, 2019 by atropa

[chef 3808]

It is because #loginPage is not an item anymore.

 

Give me a moment and I can figure out a workaround.

[chef 3808]

Open the "Emby-Server/system/dashboard-ui/startup/login.html"

 

On the first "div" add back "id=loginPage"

[chef 3808]

To get rid of the .btnForgotPassword

 

Remove #loginPage and just target the button

 

Target the data-type"Forgot Password"

Edited November 23, 2019 by chef

[chef 3808]

div[data-type=ForgotPassword] {

 

}

Edited November 23, 2019 by chef

[chef 3808]

I did this and it worked great:

div[data-type="ForgotPassword"],
div[data-type="ManualLogin"], .btnForgotPassword {
    display: none !important;
}

[atropa 10]

 

I did this and it worked great:

div[data-type="ForgotPassword"],
div[data-type="ManualLogin"], .btnForgotPassword {
    display: none !important;
}

Yes ) Thx that worked.

 

But

 

Open the "Emby-Server/system/dashboard-ui/startup/login.html"

 

On the first "div" add back "id=loginPage"

did not work

 

Should it look like this ?

 

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

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

 

regards

[chef 3808]

Yes ) Thx that worked.

 

But

 

did not work

 

Should it look like this ?

regards

Yes, but you'll have to go through and re-target all your elements to change them is CSS... Unfortunately. But having that #id there will help target the elements on the login page.

 

If you are not familiar with targeting these elements.

 

Open dev tools in the browser, find the element, right click and copy selector.

 

At least with the ID there on the top of the page, you should be able to target elements easier inside the login page.

[Happy2Play 9446]

Open the "Emby-Server/system/dashboard-ui/startup/login.html"

 

On the first "div" add back "id=loginPage"

Yes this works and may require a clearing your browser cache to see the change.

 

As for the backdrop issue, ^that is really the only way I see it be done by css^.  It can be done but will affect other areas as it is not specifically unique to that page.  I know this would affect User Preferences also.

html.layout-desktop.noScrollY div.backgroundContainer {
    background: url("/web/css/images/myimage.jpg");
    background-size: cover;
}

Edited November 23, 2019 by Happy2Play

[atropa 10]

@@chef and @@Happy2Play

 

Through your help i found out how it works.

Thanky you   All is working now as it should.

[Happy2Play 9446]

Note if you are adding "id=loginPage" back into the html page, this needs done with every server update do the the system folder being replaced with every update.

[atropa 10]

Note if you are adding "id=loginPage" back into the html page, this needs done with every server update do the the system folder being replaced with every update.

 

Yeah that´s ok. I use the stable version. So it has to be done only every 2 or 3 month

Edited November 23, 2019 by atropa

[Guest]

 

Hi,

Once again I ask for help to delete the 2 demarcated items, from the login screen, as the previously applied CSS codes are no longer working and "id

#loginPage h1 {display: none;}

#loginPage label.checkboxContainer {display: none;}

---

#manualloginPage h1 {display: none;}

#manualloginPage label.checkboxContainer {display: none;} 

"id=loginPage" and "id=manualloginPage" is also applied.

I also cleared the browsing data.

Thanks for any help.

Edited February 2, 2020 by CarlosLima

[chef 3808]

Carlos, try Something like:

 

#loginPage > form > input[type=checkbox]

 

You may have to allow for more specificity on the selector.

Edited February 2, 2020 by chef

[Guest]

Hi, thanks for responding.

So should I replace my CSS code with the test you mentioned?

#loginPage> form> input [type = "checkbox"]

[chef 3808]

Hey Carlos here is some good info that will help you target elements in the DOM with specificity:

 

1. Right Click Inspect Element:

 

 

2. High light the element in the dev tools, and right click

 

3. Find "Copy" and then choose Copy > Selector:

 

 

What is copied to the clipboard is the entire route to the element from the root.

 

You may not need the entire route, you may only have to use pieces of it.

body > div.mainAnimatedPages.skinBody > div:nth-child(2) > div > form > label > input

Kevin Powell helped me understand specificity better, he's fantastic to watch:

 

https://www.youtube.com/watch?v=c0kfcP_nD9E

 

then you could narrow results down to something like this:

#loginPage > form > label > input[type="checkbox"]

But, probabaly more like this:

#loginPage > form > label

since Emby uses the Checkbox label hack to style the input.

Test it and then see if you have the proper route

 

I hope that helps a bit with finding the right elements you want to target in CSS. Or maybe it's something you already knew.

Edited February 2, 2020 by chef

[Guest]

tks. i don't understand, nothing. sorry.

[chef 3808]

tks. i don't understand, nothing. sorry.

Did the selector work to route to the checkbox like you wanted?

[Happy2Play 9446]

 

Hi,

 

Once again I ask for help to delete the 2 demarcated items, from the login screen, as the previously applied CSS codes are no longer working and "id

#loginPage h1 {display: none;}

#loginPage label.checkboxContainer {display: none;}

---

#manualloginPage h1 {display: none;}

#manualloginPage label.checkboxContainer {display: none;} 

"id=loginPage" and "id=manualloginPage" is also applied.

 

I also cleared the browsing data.

 

Thanks for any help.

Don't understand as this works for me.

 

https://emby.media/community/index.php?/topic/79816-login-screen-manualloginhtml-file

[Guest]

Hi,

This time the CSS code did not work for, on the two items marked above. So, I removed the 4 codes and added the commands to the html file and yes, they all worked, thanks.

I kept notes to redo the process with each new update of EmbyServer.

Using version 4.3.1.0

Edited February 2, 2020 by CarlosLima