A small remark upfront:
The following solution should be used with caution. Making custom changes to the UCS web interfaces is generally not supported and can lead to unexpected or undesired behavior, especially after upgrades of the underlying packages. This method will make use of custom CSS that overwrites the existing default CSS. The UCS web interfaces may change in the future and therefore may no longer work as intended with the custom CSS.
What can I learn here?
This article describes how to make small, persistent adjustments to a UCS web interface, such as the Portal, the Self Service or the UMC Login, using CSS only.
When do I make use of this?
You can use this if you want to change a certain content, behavior or appearance of an element in one of the UCS web interfaces and there is absolutely no other way of doing so via provided and supported configuration methods like UCR variables or other documented ways.
How does it work?
As stated in the first paragraph, your custom CSS will overwrite the default CSS of the underlying component and it will automatically be loaded - no further steps needed after you put it into the file.
Choose the right custom.css file for the component you want to modify:
-
UCS Portal:
/usr/share/univention-portal/css/custom.css -
UMC login:
/usr/share/univention-management-console-login/css/custom.css
Then, go ahead and paste your custom CSS into one of the files. It is important that your CSS is as specific as possible in regard to the elements it is intended to change. Otherwise you could inadvertently change elements from other components. Also remember that text that is changed by your custom CSS is not translated by default.
If we put the following CSS snippet into /usr/share/univention-portal/css/custom.css, we for example change the text labels of the email input fields in a Self Service form from “Email” to “Recovery Email” and from “Email (retype)” to “Recovery Email (confirm)”.
.dialog--selfservice .form-label[aria-label="Email"],
.dialog--selfservice .form-label[aria-label="E-Mail"],
.dialog--selfservice .form-label[aria-label="Email (retype)"],
.dialog--selfservice .form-label[aria-label="E-Mail (retype)"] {
visibility: hidden;
}
.dialog--selfservice .form-label[aria-label="E-Mail"]::before,
.dialog--selfservice .form-label[aria-label="Email"]::before {
content: "Recovery Email";
visibility: visible;
}
.dialog--selfservice .form-label[aria-label="E-Mail (retype)"]::before,
.dialog--selfservice .form-label[aria-label="Email (retype)"]::before {
content: "Recovery Email (confirm)";
visibility: visible;
}