Jump to content

login screen - customization - EmbyServer 4.4.2.0


CarlosLima
Go to solution Solved by Happy2Play,

Recommended Posts

CarlosLima

hi,
I come to ask for new customization help with CSS or HTML

the image is my login screen (manuallogin) and I would like to know if these customizations are possible:
 

a. replace the background color of the login screen, as I would like a full black, as intense as possible.

b. the fields of arrow 1, I would like to change the color of the text when focused (it turns green and I would like it to be shown in blue)

c. in the same fields as arrow 1, I would like to edit the texts.

d. the field of arrow 2, I would like to have the border in wider focus.

 

thanks for any tips.

5ea1cf88cbceb_Screenshot.png

Edited by CarlosLima
Link to comment
Share on other sites

  • Solution
Happy2Play

@@CarlosLima

 

Only way to target only the manual login page is add a page id to the manuallogin.html as discussed in the other topics.

 

a ) The background is already Black, what are you wanting changed?

 

b ) Labels focus color

label.inputLabelFocused,label.selectLabelFocused,label.textareaLabelFocused{color:blue}
c ) You can modify your language.json in \Emby-Server\system\dashboard-ui\bower_components\emby-webcomponents\strings folder, see {LabelUsername} and {LabelPassword}

 

or css overwrite the current, see note below.

 

just modify "content" to your needs

/*Replace Username Header title*/
label[for="txtUserName"] {  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}
label[for="txtUserName"]:after {
  content: "My Username";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}
/*Replace Password Header title*/
label[for="txtPassword"] {  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}
label[for="txtPassword"]:after {
  content: "My Password";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}
 

d ) adjust border value to your needs, or do you means something different?

input.emby-input, input.emby-textarea {
    border: .07em solid var(--button-background);}
 

Note

If you do not apply a page id and add that id to all previous code you will be applings changes to all other places in Emby.

  • Like 1
Link to comment
Share on other sites

CarlosLima

Perfect. You are the best.
Thank you very much.

 

5ea2282518861_Screenshot.png

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