CSS
The application allows setting your own CSS - Cascading Style Sheets - in the user interface.
The CSS applied to the user interface is set in the Profile General tab section.
This helps the administrator change the look and feel of the application.
For example, change the font size for Cyrillic or logographic languages.
CSS is shown in a table structure.
|
Name |
Context |
Active |
Actions |
Create a new CSS
There cannot be two CSS entries with the same name.
- At the top right, click on the New CSS icon.
- Fill in the fields.
- Name.
- Context: available options are frontend or mobile.
- Active.
- Click the Create button.
Edit a CSS
- Click on
Edit CSS icon.
- Modify the fields.
- Click the Edit button.
Delete a CSS
- Click on
Delete CSS icon.
- Click the Delete button.
Clone a CSS
- Click on
Clone CSS icon.
- Modify the fields.
- Click the Clone button.
Download a CSS
- Click on
Download CSS icon.
- After a few seconds, a CSS file will be retrieved.
Samples
OpenKM 7.1.x comes with two UIs, the classical UI (frontend) and a new one named KCenter.
Because the technologies used in both UIs are quite different, changes in the CSS should take into account which UI will be used by users.
Classical UI samples ( frontend )
Large font sample
body, td, a, p, div, input, input.submit , textarea, select, button{
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 13px;
}
.gwt-MenuItem, .okm-TopMenuBar .gwt-MenuItem-selected, .okm-Input, .okm-TextArea, .okm-Select {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 13px;
}
.okm-Popup .Caption, .okm-Popup-Error .Caption, .okm-Image-Popup .Caption {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 15px;
}Medium font sample
body, td, a, p, div, input, input.submit , textarea, select, button{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.gwt-MenuItem, .okm-TopMenuBar .gwt-MenuItem-selected, .okm-Input, .okm-TextArea, .okm-Select {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.okm-Popup .Caption, .okm-Popup-Error .Caption, .okm-Image-Popup .Caption {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}Default font sample
body, td, a, p, div, input, input.submit , textarea, select, button{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.gwt-MenuItem, .okm-TopMenuBar .gwt-MenuItem-selected, .okm-Input, .okm-TextArea, .okm-Select {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.okm-Popup .Caption, .okm-Popup-Error .Caption, .okm-Image-Popup .Caption {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}New UI samples ( KCenter )
Large font sample
body, td, a, p, div, input, textarea, select, b-tab {
font-size: 1.2rem !important; // also can be used 14px;
font-weight: 400; // Standard weight
}Medium font sample
body, td, a, p, div, input, textarea, select, b-tab {
font-size: 1.1rem !important; // also can be used 13px;
font-weight: 400; // Standard weight
}Arabic sample
The following example will work in OpenKM version 7.1.31 and later.
For Arabic, several fonts can be used:
- "Noto Sans Arabic"
- "Noto Naskh Arabic"
- "Noto Kufi Arabic"
- "IBM Plex Sans Arabic"
- "Tajawal"
/*
* Notes about some attribute values:
* font-size: 1.2rem !important; // Also can be used 14px;
* font-weight: 400; // Standard weight value
*/
body, td, a, p, div, input, textarea, select, b-tab, button, ion-app, ion-menu, ion-header, ion-item, ion-content, ion-footer, ion-label {
font-size: 1.2rem !important;
font-weight: 400;
font-family: "Noto Kufi Arabic" !important;
}
/* Properties */
li, td, th {
font-size: 1.2rem !important;
}
/* breadcrumb */
li.breadcrumb-item.mt-1 a {
font-size: 1.2rem !important;
}
#rootNodes div {
min-height: 35px !important;
}
/* navbar */
#okm-mainMenu .navbar-nav > li.active > a {
padding-top: 12px !important;
padding-bottom: 11px !important;
line-height: unset !important;
}
#okm-mainMenu .navbar-nav > li > a {
padding-top: 12px !important;
line-height: unset !important;
}
/* search */
.okm-forceEmptyLabel-topPadding {
padding-top: 18px !important;
}
/* button */
.btn-group.okm-small-button > button {
height: 30px !important;
}
/* verticalbar */
.okm-headerIcon-rtl {
padding-bottom: 125px !important;
}
