Internal appearance
Via the Main settings you get to the section "Design". Here you can select the tab "Internal appearance" show (/Administration/Design/Basics/Theme/Edit).
The color design of your Umantis solution can be customized there. This gives you the possibility to customize the color design of your Umantis solution. This function is relevant in the context of your company-specific specifications regarding corporate design, because the appearance of the solution can be customized for certain elements.
Important information:
- Adjusting the individual color codes and activating the "Activate color design" checkbox has an immediate effect on the internal appearance of your solution.
- If you make changes, we recommend that you do so together with your design managers.
- As an aid, a table with color codes is linked. Please note that this table does not contain # characters. Please add them manually in front of each color code. Besides the provided codes, you can of course insert other hexadecimal codes.
- Please note that after each adjustment a "hard refresh" via "CTRL+F5" or clearing the cache may be necessary (because the CSS of the solution is cached).
- Through this innovation, the general appearance (look & feel) can be adjusted to be closer to your own design.
- Informationen about the font
View on color design settings
Customization of the Umantis design 2024
If you would like to customize the Umantis Designs 2024 you will find helpful information in the following document:
Color picker
You can use a color picker in the new Umantis Design 2024. This is available in every section and makes it very easy to select the desired color for the respective interface element (body, header, navigation bar, etc.).
Color design settings
Notes:
- A table with sample color codes can be found at the following Link.
- Entering the parameter "!important" after the color code is no longer necessary and will be ignored.
- If the color of the link is not applied globally, go to each section and set the same hexa code for the link in that section.
- Apply color design
- Activate this checkbox if you have entered individual color codes in the lower section and these are to be applied.
Body
You can customize the following here using hexa code:
- Background color
- Font color
The grey area in the background is the so-called "body":
Note: After you have changed the text/font color of the body, this is not applied "globally", but you must also change the text/font color
color of the Article box section and the color of the body text in the Table section. As the sections can be customized separately, you must define the color
color accordingly for each section.
Header
This section is used to adjust the background color of the sibar/page menu (formerly header). Please note that this setting does not apply to the top header, which is always white.
You can customize the following here using hexa code:
- Link color
- Background color of the active link/submenu
- Submenu hover link color
Sie können hier mithilfe von Hexa-Code Folgendes anpassen:
- Hintergrundfarbe (Nummer 1 im Bild oben)
- Link-Farbe (Nummer 2 im Bild oben)
- Link-Hover-Farbe (Nummer 3 im Bild oben)
- Farbe des aktiven Links (Nummer 4 im Bild oben)
Links/buttons/symbols
You can customize the following here using hexa code:
- Color
- Hover color
Note: If the color of a link/button/icon does not change, please adjust the link color in the Article box section. If the color is still not displayed correctly, adjust the link/font color in the Table section.
Color of the counter symbol
You can customize the following here using hexa code:
- Background color
- Font color
Article box
You can customize the following here using hexa code:
- Background color
- Font color
- Heading color
- Link color
- Link hover color
You can customize the following here using hexa code:
- Background color
- Link color
- Link hover color
- Heading color
Settings/profile panel
You can customize the following here using hexa code:
- Background color
- Header background color
- Link color
- Link hover color
Left toggle slider Panel/Switcher (sidebar)
You can customize the following here using hexa code:
- Background color
- Font color
Table
You can customize the following here using hexa code:
- Header background color
- Header font color
- Body background color
- Body font color
- Body link color
- Body link hover color
- Table footer background color
- Table footer font color
The tables are divided into three sections
- Header
- Body
- Footer
1. Header
2. Body
3. Footer
Toggle switch
You can adjust the following here using hexa code:
- Background color inactive
- Font color inactive
- Background color active
- Font color active
- Hover background color
- Hover font color
