How can I change text color on login screen?

ℹ️ Support
1

Nextcloud version 18.0.4
Operating system and version OpenSuse Leap 51.1
Apache 2.4.33
PHP version 7.2.5

I’m using the "theming " app and would like to use a specific black&white wikimedia commons photo for login page background image.

Unfortunately the text on the login screen, esp. important texts like “forgot my password” are shown in white, meaning more or less completely unreadable.

How can I change this text color on the login screen?

Found a reference to css4 variables: https://github.com/nextcloud/server/blob/master/core/css/css-variables.scss but as there are no “%-login-%” “text” params I’m not sure if this would be the right starting point.

Thanks,
Michael

2

Perhaps you can find the configuration with the Firefox-Inspektor (F12).

3

Can’t you change it on the theming settings page?

4

I’ve installed the app “Custom CSS”.
In admin settings -> design you can add your styles. For changing color on login screen i’ve used following css code:

#body-login a, #body-login label, #body-login footer p, #body-login #alternative-logins legend, #body-login .lost-password-container #lost-password {
  color: white;
}
1 Like
5

@michi bloody cool hint, THANK YOU so much!!!

6

Hey michi,

I have been using your custom css code, but it seems to be broken with Nextcloud > 20.2 Can you verfiy this?

Regards

7

Hi scrooby,

yes - it changed.
Here my new code:

#body-login a, #body-login label, #body-login footer p, #body-login #alternative-logins legend, #body-login .lost-password-container #lost-password, #body-login > div.wrapper > div > main > div > div > form > fieldset > p.warning.wrongPasswordMsg {
  color: white !important;
}
8

Hi michi,

they broke it, again. I think they changed body-login to body-public in some of the versions >20, but I cannot get it to work:

#body-public a, #body-public p, #body-public label, #body-public footer, #body-public footer p, #body-public footer p a, #body-public, #alternative-logins legend, #body-login .lost-password-container #lost-password {
  color: #fff !important;
}

Any idea?

edit: seems that #body-login footer p has an influence on the slogan, nothing else.

9

Found nice solution here