3.5. Customization#
The LinOTP web components are based on stylesheets (CSS) and uses templates. You can change the appearance of the WebUI. We recommend that you do not change the default stylesheets when doing so, as an update could destroy your changes. You can define your own stylesheets for this purpose. These must contain only the changed sections, which should be overwritten in the standard stylesheet.
3.5.1. Custom LinOTP3 Selfservice#
Examples /selfservice:
The example shows:
how to customize the colors of the header and the buttons for the dark and light theme
use your own image for the logo for dark and light theme
add an imprint url and a footer via policy
If the changes are made as described here, they are retained when the software is updated.
Change color
nano /etc/linotp-selfservice/customization/custom-styles.css
...
/* Use '.theme-dark' class for dark theme changes and '.theme-light' for light theme changes. */
/* changing the background and font color of the toolbar for light theme */
.theme-light mat-toolbar.mat-primary {
background: #008B8B!important;
color: white!important;
}
/* changing the background and font color of the toolbar for dark theme */
.theme-dark mat-toolbar.mat-primary {
background: #008B8B!important;
color: white!important;
}
/* changing the background and font color of the raised and flat buttons for light theme */
.theme-light .mat-mdc-raised-button.mat-primary,
.theme-light .mat-mdc-unelevated-button.mat-primary {
background: #008B8B!important;
color: white!important;
}
/* changing the background and font color of the raised and flat buttons for dark theme */
.theme-dark .mat-mdc-raised-button.mat-primary,
.theme-dark .mat-mdc-unelevated-button.mat-primary {
background: #008B8B!important;
color: white!important;
}
...
Change logo
The logo will be processed if it is named logo.png for light theme and logo-dark.png for dark theme. The files should be located under the specified path:
/etc/linotp-selfservice/customization/logo.png
/etc/linotp-selfservice/customization/logo-dark.png
Policy for imprint and footer
Policy for imprint and footer design the footer of the login view. Here imprint contains a URL and footer a text string
3.5.2. Style Sheets - LinOTP3#
The style sheets can be used among other things to change the logo as described in the next chapter and are located in the following directorys:
Style sheet for manage and selfservice-legacy corresponding to LinOTP2
Style sheet for selfservice from LinOTP3
# style sheet for manage and selfservice-legacy
/usr/lib/python3/dist-packages/linotp/public
# style sheet for selfservice
/usr/share/linotp-selfservice/dist/en/assets
/usr/share/linotp-selfservice/dist/de/assets
The default stylesheets are:
/usr/lib/python3/dist-packages/linotp/public/manage/style.css
/usr/lib/python3/dist-packages/linotp/public/selfservice/style.css
# for assets currently only color matching is supported
/usr/share/linotp-selfservice/dist/en/assets/custom-styles.css
/usr/share/linotp-selfservice/dist/de/assets/custom-styles.css
The following files can be create to overrule the default style sheets. They are applied on top of the default style sheets. It is recommended to include only required changes in the custom files:
/etc/linotp/custom-style/selfservice-style.css
/etc/linotp/custom-style/manage-style.css
/etc/linotp-selfservice/customization/custom-styles.css
After changing the style sheets the Pylons cache needs too be emptied and it is not necessary to restart the web server.
3.5.3. Changing the Logo#
It is easy to change the logos on the /manage
and on the /selfservice-legacy
portal.
The LinOTP logo is defined as a background image of the div
#logo
(/selfservice
) or #header #logo
(/manage
).
Note
Please setup the custom style sheets as described in the previous chapter before following the next steps.
These stylesheets need to be modified:
/etc/linotp/custom-style/selfservice-style.css
/etc/linotp/custom-style/manage-style.css
There is the id definition #logo
(/selfservice
) or #header #logo
(/manage
) which points to the corresponding image file at
/usr/lib/python3/dist-packages/linotp/public/images/
.
Transfer the new logo file to the correct position:
mkdir /etc/linotp/custom-style/images
cp /root/<IMAGE.PNG> /etc/linotp/custom-style/images/
Tip
The /etc/linotp/custom-style/
directory can be referenced with /custom
in the CSS files.
Example /manage:
nano /etc/linotp/custom-style/manage-style.css
#header #logo {
background-image: url(/static/custom/images/logo.png);
background-size: contain;
}
Example /selfservice-legacy:
nano /etc/linotp/custom-style/selfservice-style.css
#logo{
background-image: url(/static/custom/images/logo.png);
background-size: contain;
}
The background-size: contain
parameter fits the image in the correct size.