atropa 8 Posted November 21, 2019 Share Posted November 21, 2019 (edited) 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 1 Link to comment Share on other sites More sharing options...
chef 3745 Posted November 21, 2019 Share Posted November 21, 2019 Are you using the '!important' keyword to override the css var. Link to comment Share on other sites More sharing options...
TheFlight 0 Posted November 23, 2019 Share Posted November 23, 2019 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 More sharing options...
atropa 8 Posted November 23, 2019 Author Share Posted November 23, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
chef 3745 Posted November 23, 2019 Share Posted November 23, 2019 It is because #loginPage is not an item anymore. Give me a moment and I can figure out a workaround. 2 Link to comment Share on other sites More sharing options...
chef 3745 Posted November 23, 2019 Share Posted November 23, 2019 Open the "Emby-Server/system/dashboard-ui/startup/login.html" On the first "div" add back "id=loginPage" 1 Link to comment Share on other sites More sharing options...
chef 3745 Posted November 23, 2019 Share Posted November 23, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
chef 3745 Posted November 23, 2019 Share Posted November 23, 2019 (edited) div[data-type=ForgotPassword] { } Edited November 23, 2019 by chef Link to comment Share on other sites More sharing options...
chef 3745 Posted November 23, 2019 Share Posted November 23, 2019 I did this and it worked great: div[data-type="ForgotPassword"], div[data-type="ManualLogin"], .btnForgotPassword { display: none !important; } 2 Link to comment Share on other sites More sharing options...
atropa 8 Posted November 23, 2019 Author Share Posted November 23, 2019 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 1 Link to comment Share on other sites More sharing options...
chef 3745 Posted November 23, 2019 Share Posted November 23, 2019 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. 2 Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted November 23, 2019 Share Posted November 23, 2019 (edited) 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 1 Link to comment Share on other sites More sharing options...
atropa 8 Posted November 23, 2019 Author Share Posted November 23, 2019 @@chef and @@Happy2Play Through your help i found out how it works. Thanky you All is working now as it should. 1 Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted November 23, 2019 Share Posted November 23, 2019 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. 1 Link to comment Share on other sites More sharing options...
atropa 8 Posted November 23, 2019 Author Share Posted November 23, 2019 (edited) 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 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted February 2, 2020 Share Posted February 2, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
chef 3745 Posted February 2, 2020 Share Posted February 2, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted February 2, 2020 Share Posted February 2, 2020 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 More sharing options...
chef 3745 Posted February 2, 2020 Share Posted February 2, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted February 2, 2020 Share Posted February 2, 2020 tks. i don't understand, nothing. sorry. Link to comment Share on other sites More sharing options...
chef 3745 Posted February 2, 2020 Share Posted February 2, 2020 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 More sharing options...
Happy2Play 8282 Posted February 2, 2020 Share Posted February 2, 2020 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 More sharing options...
CarlosLima 148 Posted February 2, 2020 Share Posted February 2, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now