CarlosLima 148 Posted November 28, 2019 Share Posted November 28, 2019 Hi,The embyserver 4.3.0.30 update broke several CSS and HTML codes that I used in version 4.2.1.0.I would like to know how to remove the 4 highlighted fields.Thank you Link to comment Share on other sites More sharing options...
Happy2Play 8249 Posted November 28, 2019 Share Posted November 28, 2019 (edited) Have you tried adding the page id back to the html to allow previous code to work? https://emby.media/community/index.php?/topic/79505-login-page-background-image-43-change/?p=810395 Otherwise I believe you have to use the entire element selector. Edited November 28, 2019 by Happy2Play Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 29, 2019 Author Share Posted November 29, 2019 I have read the topic 3 or 4 times and I must confess I don't understand how to proceed.The curious thing is that I also have on a local machine, the same version I use for testing and on it, the changes had the effect.I even copied the manuallogin.html file to the vps machine and it doesn't work. Link to comment Share on other sites More sharing options...
Solution Happy2Play 8249 Posted November 29, 2019 Solution Share Posted November 29, 2019 (edited) The previous version used a form, now it has its own html page. But there is no page id so it is harder to target. So you can attempt to uses the entire selector for the element or add a page id like I linked to. body > div.mainAnimatedPages.skinBody > div:nth-child(1) > div > form > h1 {display: none;} body > div.mainAnimatedPages.skinBody > div:nth-child(1) > div > form > label {display: none;} body > div.mainAnimatedPages.skinBody > div:nth-child(1) > div > form > button.raised.block.buttonCancel.emby-button {display: none;} body > div.mainAnimatedPages.skinBody > div:nth-child(1) > div > form > div:nth-child(7) > button.raised.cancel.block.btnForgotPassword.emby-button {display: none;} If you add a page id="manualloginPage" to the manuallogin.html then #manualloginPage h1 {display: none;} #manualloginPage label.checkboxContainer {display: none;} #manualloginPage button.raised.block.buttonCancel.emby-button {display: none;} #manualloginPage button.raised.cancel.block.btnForgotPassword.emby-button {display: none;} Edited December 5, 2019 by Happy2Play 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 30, 2019 Author Share Posted November 30, 2019 (edited) Hi, thanks for all your help and patience.I tried the first alternative. Did not work.Tried the second alternative, also did not work.I used these CSS codes in version 4.2 and were working fine. /*Remove o botão Esqueci a Senha na tela de login*/ .btnForgotPassword.emby-button{ visibility: hidden !important; } /*Remove o botão Cancelar na tela de login*/ .buttonCancel.emby-button{ visibility: hidden !important; } /* #12 - Remove a texto Por favor, Entre na tela de login */ #loginPage h1 {display: none } /* #13 - Remove a caixa Lembrar de mim */ #loginPage .emby-checkbox-label {display: none;} Edited November 30, 2019 by CarlosLima Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 30, 2019 Author Share Posted November 30, 2019 Updating list ... Now I applied these old CSS codes above all others and it worked ... /*Remove o botão Esqueci a Senha na tela de login*/ .btnForgotPassword.emby-button{ visibility: hidden !important; } /*Remove o botão Cancelar na tela de login*/ .buttonCancel.emby-button{ visibility: hidden !important; } ... however, these other codes are not even working at all. /* Remove a texto Por favor, Entre na tela de login */ #loginPage h1 {display: none } /* Remove a caixa Lembrar de mim */ #loginPage .emby-checkbox-label {display: none;} Link to comment Share on other sites More sharing options...
Happy2Play 8249 Posted November 30, 2019 Share Posted November 30, 2019 I guess you could edit the manualllogin.html directly, but everything in post 4 worked for me. 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 30, 2019 Author Share Posted November 30, 2019 I guess you could edit the manualllogin.html directly, but everything in post 4 worked for me. In that case, I certainly applied this code wrong. Can you indicate where I should add? Thank you so much Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 30, 2019 Author Share Posted November 30, 2019 SORTED OUT I certainly made some mistake with so many attempts. You are the best. Extremely grateful to you. Link to comment Share on other sites More sharing options...
Happy2Play 8249 Posted November 30, 2019 Share Posted November 30, 2019 (edited) Here is the manuallogin.html with the code added directly to it, if you are not getting the css to work. <div 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-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page"> <form style="margin:0 auto;"> <h1 style="text-align: left;margin-top:0; visibility: hidden;">${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" style="display: none;"> <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> <button is="emby-button" type="button" class="raised block buttonCancel" style="display: none;"> <span>${Cancel}</span> </button> <div style="margin-top:2em;"> <button is="emby-button" type="button" class="raised cancel block btnForgotPassword" style="display: none;"> <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> <p class="disclaimer hide" style="text-align: center; margin-top: 2em;"></p> </form> </div> </div Edited November 30, 2019 by Happy2Play 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 30, 2019 Author Share Posted November 30, 2019 Here is the manuallogin.html with the code added directly to it, if you are not getting the css to work. Hi, Yes, CSS worked the 4 fields, but taking advantage of your new tip, for embyserver performance, is there any better way to use between the CSS and HTML you created now? Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 30, 2019 Author Share Posted November 30, 2019 (edited) ... and here is my login screen, thanks for your patience, thanks.One more nuisance, it's possible for me to have my "ESQUECI A SENHA / Forgot Password" link look like the "ENTRAR / Sign In" button, with a gray background like a button, or even turn my link into a button, to follow the EmbyServer standard? Edited November 30, 2019 by CarlosLima Link to comment Share on other sites More sharing options...
Happy2Play 8249 Posted November 30, 2019 Share Posted November 30, 2019 ... and here is my login screen, thanks for your patience, thanks. One more nuisance, it's possible for me to have my "ESQUECI A SENHA / Forgot Password" link look like the "ENTRAR / Sign In" button, with a gray background like a button, or even turn my link into a button, to follow the EmbyServer standard? Don't know what code you used to create your link, but see how I changed the Emby link on the Dashboard to a button. Changed button-link to raised block. 1 Link to comment Share on other sites More sharing options...
Happy2Play 8249 Posted December 1, 2019 Share Posted December 1, 2019 Hi, Yes, CSS worked the 4 fields, but taking advantage of your new tip, for embyserver performance, is there any better way to use between the CSS and HTML you created now? As for performance I don't think there would be much difference. Custom css just requires less manual intervention with every update. With code evolving it is just a matter on knowing all the changes you have to maintain. 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted December 1, 2019 Author Share Posted December 1, 2019 Don't know what code you used to create your link, but see how I changed the Emby link on the Dashboard to a button. Changed button-link to raised block. Extremely grateful for all your help. Thank you very much. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted December 1, 2019 Author Share Posted December 1, 2019 As for performance I don't think there would be much difference. Custom css just requires less manual intervention with every update. With code evolving it is just a matter on knowing all the changes you have to maintain. I understand perfectly. I will always keep CSS when possible, in fact it provides less manual work. Thank you. Link to comment Share on other sites More sharing options...
chef 3745 Posted December 1, 2019 Share Posted December 1, 2019 (edited) As for performance I don't think there would be much difference. Custom css just requires less manual intervention with every update. With code evolving it is just a matter on knowing all the changes you have to maintain.Carlos, I thought I might mention, that inorder to change some of the styles with the new layout I have had to use both intersection Observer and mutationObserver to change items and lazy load changes. I use the index.html to add script changes and I only use custom css to do global style changes to items that can be affected: buttons, lists, etc. If you really wanted to make changes to layout then I would use a program like visual studio code, to open the entire web app solution and make changes that way. Do a solution wide search and replace for '!important', and look for html pages like 'loginPage', and library layouts and give them IDs inorder to target them easier. But again, using JavaScript to target elements with Observers. Get to know the different buttons styles, paperList style that emby uses, and you can make changes that look like they fit. Using the 'raised' property in the buttons class will give you the look you want. Also, embys css now uses global variables for themes under 'root:' which changes the entire color scheme. Edited December 1, 2019 by chef Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted December 1, 2019 Author Share Posted December 1, 2019 Hi, reading other topics, I understand that it is no longer working to apply a background image on the login screen and the alternative found seems not appropriate.In this case, is it possible to use CSS only to change the background color to full black (# 000000) ? Link to comment Share on other sites More sharing options...
Happy2Play 8249 Posted December 2, 2019 Share Posted December 2, 2019 Hi, reading other topics, I understand that it is no longer working to apply a background image on the login screen and the alternative found seems not appropriate. In this case, is it possible to use CSS only to change the background color to full black (# 000000) ? Without a page id, I don't see a way to target it. So either add a page id or apply directly to the page html. Link to comment Share on other sites More sharing options...
atropa 8 Posted December 3, 2019 Share Posted December 3, 2019 Hi, reading other topics, I understand that it is no longer working to apply a background image on the login screen and the alternative found seems not appropriate. It IS working. Like Happ2Play said adding a page id in the login.html and the manuallogin.html works fine for me. Ok you have to do it manually every server update and I understand that it is annoying in a beta cycle. Link to comment Share on other sites More sharing options...
Moisés Oliveira 0 Posted February 25, 2020 Share Posted February 25, 2020 Pode passar codigo I understand perfectly. I will always keep CSS when possible, in fact it provides less manual work. Thank you. Extremely grateful for all your help.Thank you very much. Link to comment Share on other sites More sharing options...
Moisés Oliveira 0 Posted February 27, 2020 Share Posted February 27, 2020 (edited) Como fazer para alterar o tamanho dos capos Extremamente grato por toda a sua ajuda. Muito obrigado. Edited February 27, 2020 by vannessa Link to comment Share on other sites More sharing options...
Happy2Play 8249 Posted February 27, 2020 Share Posted February 27, 2020 Como fazer para alterar o tamanho dos capos What do you mean? Link to comment Share on other sites More sharing options...
KalashDOG 0 Posted May 22, 2020 Share Posted May 22, 2020 Hi, The embyserver 4.3.0.30 update broke several CSS and HTML codes that I used in version 4.2.1.0. I would like to know how to remove the 4 highlighted fields. Thank you Qual comando coloco ou qual arquivo edito para colocar um LOGO abaixo do campos de login? e como funciona esse "Pedir teste gratuito"? pretendo colocar isso no meu. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 22, 2020 Author Share Posted May 22, 2020 (edited) Oi, sobre o último botão é um link que vai para uma página determinada.A edição é no arquivo manuallogin.html. Basta adicionar o código abaixo alterando os campos, URL_PAGE, XXXXXX e TEXT_BUTTON <p><center><a is="emby-linkbutton" class="raised block emby-button" href="URL_PAGE" style="text-decoration: none;color: #XXXXXX;" target="_self"><font size=3>TEXT_BUTTON</font></a></center></p> Sobre o "logo abaixo do login" eu não o utilizo mais e sinceramente não lembro o código, mas você o encontrará aqui no fórum com certeza. Edited May 22, 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