Jump to content

Custom login screen fixed


CarlosLima
Go to solution Solved by Happy2Play,

Recommended Posts

CarlosLima

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.

 

5b99632ddba16_Capturar.jpg

Edited by CarlosLima
Link to comment
Share on other sites

Happy2Play

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

CarlosLima

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.

 

5b9bcb549f25f_img1.jpg

Link to comment
Share on other sites

CarlosLima

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

Happy2Play

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.

 

5b9bcb549f25f_img1.jpg

/*Shrink Login Form*/	
#loginPage .readOnlyContent, #loginPage form {
    max-width: 27em; }
  • Like 1
Link to comment
Share on other sites

Happy2Play

 

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?

  • Like 1
Link to comment
Share on other sites

CarlosLima
/*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

CarlosLima

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

  • Solution
Happy2Play

I'm sorry, but I can't understand this message.

 

Does removing this help?

    width: 1920px;
    height: 1080px;
  • Like 1
Link to comment
Share on other sites

CarlosLima

 

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.

 

5b9c00235b599_Capturar.jpg

  • Like 2
Link to comment
Share on other sites

  • 1 month later...
makarai

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

Happy2Play

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

makarai

 

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

Happy2Play

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

  • 3 weeks later...
CarlosLima

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

 

5be590e4a5480_Screenshot3.png

Edited by CarlosLima
Link to comment
Share on other sites

CarlosLima

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.

 

 

5be59045c10d9_Screenshot2.png

Link to comment
Share on other sites

CarlosLima

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

 

5be590e4a5480_Screenshot3.png

 

 

Solved:

 

#loginPage h1 {display: none }

Link to comment
Share on other sites

CarlosLima

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.

 

 

5be59045c10d9_Screenshot2.png

 

 

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

Happy2Play

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;}

 

  • Like 1
Link to comment
Share on other sites

CarlosLima

 

Here you go.

#loginPage .emby-checkbox-label {display: none;}

 

Amazing. Thank you so much for this.

Link to comment
Share on other sites

CarlosLima

Now, a fully customized login screen.

Thanks to everyone who provided the CSS codes.

 

 

5be5f4030527e_Capturar.jpg

Link to comment
Share on other sites

  • 5 months later...

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.

 

 

5be5f4030527e_Capturar.jpg

Link to comment
Share on other sites

Happy2Play

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

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.

 

 

5be59045c10d9_Screenshot2.png

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