How-to: Customize UCS web interfaces via CSS

[c-castens]

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.

For the Self Service following IDs are implemented to be able to address individual modules:

• #create-account
• #confirm-deregistration
• #protect-account
• #new-password
• #password-change
• #password-forgotten
• #profile
• #service-specific-passwords
• #verify-account

Example Self Service:

• Requirement 1: For the module ‘Protect Aaccount’ change the title of the field “E-Mail” to “externe E-Mail”, in order to signify for the user, that they should use separate (replacement) e-mail address.
• Requirement 2: For the module ‘WLAN-Password’ highlight the entry of the password as their regular domain password, to make sure they understand that they must first enter it, before they receive a generated new password → adjust the name of “Password” in the form (but ONLY in the “WLAN password” function!).

Code:

/* Adjust "E-Mail" in "Protect account" */

#protect-account .form-label[aria-label="Email"],
#protect-account .form-label[aria-label="E-Mail"],
#protect-account .form-label[aria-label="Email (retype)"],
#protect-account .form-label[aria-label="E-Mail (retype)"] {
    visibility: hidden;
}

#protect-account .form-label[aria-label="E-Mail"]::before,
#protect-account .form-label[aria-label="Email"]::before {
    content: "externe E-Mail";
    visibility: visible;
}
   
#protect-account .form-label[aria-label="E-Mail (retype)"]::before,
#protect-account .form-label[aria-label="Email (retype)"]::before {
    content: "externe E-Mail bestätigen";
    visibility: visible;
}
/* Adjust "Passwort" in "WLAN-Passwort" */

#service-specific-passwords label.form-label[aria-label="Passwort"] {
    visibility: hidden;
}

#service-specific-passwords label.form-label[aria-label="Passwort"]::before {
    content: "Standardlogin*";
    visibility: visible;
}

Then restart the browser window to see the changes.