Jump to content

Login page background image (4.3 change)


atropa

Recommended Posts

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 by atropa
  • Like 1
Link to comment
Share on other sites

TheFlight

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?

Link to comment
Share on other sites

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 by atropa
Link to comment
Share on other sites

It is because #loginPage is not an item anymore.

 

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

  • Like 2
Link to comment
Share on other sites

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

 

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

  • Like 1
Link to comment
Share on other sites

To get rid of the .btnForgotPassword

 

Remove #loginPage and just target the button

 

Target the data-type"Forgot Password"

Edited by chef
Link to comment
Share on other sites

I did this and it worked great:

div[data-type="ForgotPassword"],
div[data-type="ManualLogin"], .btnForgotPassword {
    display: none !important;
}
  • Like 2
Link to comment
Share on other sites

 

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Happy2Play

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 by Happy2Play
  • Like 1
Link to comment
Share on other sites

Happy2Play

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.

  • Like 1
Link to comment
Share on other sites

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 by atropa
  • Like 1
Link to comment
Share on other sites

  • 2 months later...
CarlosLima

5e36e90ce35f2_Screenshot2.png

 

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 by CarlosLima
Link to comment
Share on other sites

Carlos, try Something like:

 

#loginPage > form > input[type=checkbox]

 

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

Edited by chef
Link to comment
Share on other sites

CarlosLima

Hi, thanks for responding.

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

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

Link to comment
Share on other sites

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

 

1. Right Click Inspect Element:

 

5e36f65492ef4_inspect1.png

 

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

5e36f6a51420c_inspect2.png

 

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

 

5e36f6e024815_inspect3.png

 

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 by chef
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

Happy2Play

5e36e90ce35f2_Screenshot2.png

 

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

Link to comment
Share on other sites

CarlosLima

5e373ad198c52_Screenshot2.png

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 by CarlosLima
Link to comment
Share on other sites

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