login screen - customization - EmbyServer 4.4.2.0

[Guest]

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.

Edited April 23, 2020 by CarlosLima

[Happy2Play 9459]

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

[Guest]

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

 

Edited April 23, 2020 by CarlosLima