CarlosLima 148 Posted September 12, 2018 Share Posted September 12, 2018 (edited) Hi, it's possible to use CSS code to change the color on the login screen? I know there are several themes, but I would like to make only the login screen with a single color for all users, as an example, the green color in the image, change to blue. On the same subject, you can reduce the width of the fields to enter the login data. I plan to have a wallpaper to fill the entire screen. Can you tell me the default size in width and height? I tried 1920x1080 but the image appears to be larger than the login screen area. I appreciate any tips. Tks. Edited September 12, 2018 by CarlosLima Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted September 12, 2018 Share Posted September 12, 2018 (edited) Something like this /*Shrink Login Form*/ #loginPage .readOnlyContent, form { max-width: 27em; } #loginPage .button-submit { background: blue; } #loginPage .inputLabelFocused { color: blue !important; } #loginPage .checkboxOutline, .emby-input:focus { border-color: blue !important; } #loginPage .checkboxOutline { background-color: blue !important; } Look at how the Blue Radiance Theme backdrop is applied? Image size is 1920x1080 .backgroundContainer { background: url(bg.jpg) center top no-repeat #033361; -webkit-background-size: cover; background-size: cover; } #loginPage { background-image: url(Enter URL); -webkit-background-size: cover; background-size: cover; background-size: contain; background-repeat: no-repeat; } Edited September 13, 2018 by Happy2Play Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted September 14, 2018 Author Share Posted September 14, 2018 Hi, @Happy2Play First, thank you for responding so quickly, it helped a lot.By reducing the width of the fields, (which was excellent) affected an internal screen of the emby server. Is it possible to correct this, so that only the login screen receives the new width and not the internal page?image ...- login screen with fields in excellent size- internal screen affected by the reduction of fields. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted September 14, 2018 Author Share Posted September 14, 2018 With respect to the wallpaper image of the login screen (Whitney Houston), I use yes in 1920x1080 but the login screen gains a vertical scrool, that is, the image has much more height than the space on the screen. I would like to have this image in the exact size of the screen, without the need to scroll down. This code causes the image to be displayed only on the login screen and not on the embyserver's internal screens. Thank you in advance. /* CSS#1 - Loginscreen custom */ .logoLibraryMenuButtonText { display: none; } .imgLogoIcon { display: none; } img[src*="css/images/mblogoicon.png"] { display: none; } #loginPage { padding-top: 100px; } #loginPage { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 0px; content: " "; background: url(JPG IMAGE); background-size: 100% 100%; width: 1920px; height: 1080px; } Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted September 14, 2018 Share Posted September 14, 2018 Hi, @Happy2Play First, thank you for responding so quickly, it helped a lot. By reducing the width of the fields, (which was excellent) affected an internal screen of the emby server. Is it possible to correct this, so that only the login screen receives the new width and not the internal page? image ... - login screen with fields in excellent size - internal screen affected by the reduction of fields. /*Shrink Login Form*/ #loginPage .readOnlyContent, #loginPage form { max-width: 27em; } 1 Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted September 14, 2018 Share Posted September 14, 2018 With respect to the wallpaper image of the login screen (Whitney Houston), I use yes in 1920x1080 but the login screen gains a vertical scrool, that is, the image has much more height than the space on the screen. I would like to have this image in the exact size of the screen, without the need to scroll down. This code causes the image to be displayed only on the login screen and not on the embyserver's internal screens. Thank you in advance. /* CSS#1 - Loginscreen custom */ .logoLibraryMenuButtonText { display: none; } .imgLogoIcon { display: none; } img[src*="css/images/mblogoicon.png"] { display: none; } #loginPage { padding-top: 100px; } #loginPage { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 0px; content: " "; background: url(JPG IMAGE); background-size: 100% 100%; width: 1920px; height: 1080px; } Doesn't removing width and height accomplish what you what? 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted September 14, 2018 Author Share Posted September 14, 2018 /*Shrink Login Form*/ #loginPage .readOnlyContent, #loginPage form { max-width: 27em; } This worked perfectly now. Thank you very much. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted September 14, 2018 Author Share Posted September 14, 2018 Doesn't removing width and height accomplish what you what? I'm sorry, but I can't understand this message. Link to comment Share on other sites More sharing options...
Solution Happy2Play 8282 Posted September 14, 2018 Solution Share Posted September 14, 2018 I'm sorry, but I can't understand this message. Does removing this help? width: 1920px; height: 1080px; 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted September 14, 2018 Author Share Posted September 14, 2018 Does removing this help? width: 1920px; height: 1080px; Now I understood and yes, it worked beautifully. I am very grateful to you for all your help and patience. Thank you very much. 2 Link to comment Share on other sites More sharing options...
makarai 108 Posted October 22, 2018 Share Posted October 22, 2018 @@Happy2Play i like to hide the top bar just on logon screen how would i accomplish this. i tried a simple: #loginPage .skinHeader{display:none; !important; } but that did not work. Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted October 22, 2018 Share Posted October 22, 2018 @@Happy2Play i like to hide the top bar just on logon screen how would i accomplish this. i tried a simple: #loginPage .skinHeader{display:none; !important; } but that did not work. Look like this applies to only that area. div.skinHeader.skinHeader-withBackground.headroom.noHeaderRight {display:none; } Link to comment Share on other sites More sharing options...
makarai 108 Posted October 22, 2018 Share Posted October 22, 2018 Look like this applies to only that area. div.skinHeader.skinHeader-withBackground.headroom.noHeaderRight {display:none; } Thank you very much, i could have sworn i have tried that one before! I would also like to hide the Forget Password button or insert a new button, is that possible as well ? Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted October 22, 2018 Share Posted October 22, 2018 Thank you very much, i could have sworn i have tried that one before! I would also like to hide the Forget Password button or insert a new button, is that possible as well ? Removing is the easy one part. Adding is a different story. #loginPage .btnForgotPassword {display: none; } Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 9, 2018 Author Share Posted November 9, 2018 (edited) Hi, Is it possible to create a CSS code to remove (delete) this phrase marked with the arrow? If you can not remove the phrase, I'd like to be able to edit it. From now on, I am very grateful.Thank you Edited November 9, 2018 by CarlosLima Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 9, 2018 Author Share Posted November 9, 2018 Hi, Still on the login screen, is it possible to remove the highlighted button?The reason is that it just does not work for all my client, ie even keeping marked, the new login will always ask for the data and this has annoyed some.Thank you. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 9, 2018 Author Share Posted November 9, 2018 Hi, Is it possible to create a CSS code to remove (delete) this phrase marked with the arrow? If you can not remove the phrase, I'd like to be able to edit it. From now on, I am very grateful. Thank you Solved: #loginPage h1 {display: none } Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 9, 2018 Author Share Posted November 9, 2018 Hi, Still on the login screen, is it possible to remove the highlighted button? The reason is that it just does not work for all my client, ie even keeping marked, the new login will always ask for the data and this has annoyed some. Thank you. I tried this but it does delete all tags and I want to delete only one of them. #loginPage label {display: none} Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted November 9, 2018 Share Posted November 9, 2018 I tried this but it does delete all tags and I want to delete only one of them. #loginPage label {display: none} Here you go. #loginPage .emby-checkbox-label {display: none;} 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 9, 2018 Author Share Posted November 9, 2018 Here you go. #loginPage .emby-checkbox-label {display: none;} Amazing. Thank you so much for this. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 9, 2018 Author Share Posted November 9, 2018 Now, a fully customized login screen. Thanks to everyone who provided the CSS codes. Link to comment Share on other sites More sharing options...
STLK 1 Posted April 30, 2019 Share Posted April 30, 2019 Bom dia amigo, gostaria de deixar minha tela assim, teria como me enviar esse codigo. grato Link to comment Share on other sites More sharing options...
STLK 1 Posted April 30, 2019 Share Posted April 30, 2019 como vc deixou na sua tela de login o esqueci minha senha daquele jeito. grato Now, a fully customized login screen. Thanks to everyone who provided the CSS codes. Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted April 30, 2019 Share Posted April 30, 2019 Bom dia amigo, gostaria de deixar minha tela assim, teria como me enviar esse codigo. grato Post 4 has the majority of the code, minus some of the changes discuss in the topic. Not all of the changes in that image can be done with custom css. Link to comment Share on other sites More sharing options...
STLK 1 Posted April 30, 2019 Share Posted April 30, 2019 como vc excluiu o botao esqueci senha e deixou apenas escrito Hi, Still on the login screen, is it possible to remove the highlighted button?The reason is that it just does not work for all my client, ie even keeping marked, the new login will always ask for the data and this has annoyed some.Thank you. 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