CSS
The application allows setting your own CSS - Cascade Style Sheets - in the user interface.
The CSS applied to the user interface is set in Profile General tab section.
That helps the administrator to 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
It cannot be two css with the same name.
- At the top right, click on the New CSS icon.
- Fill in the fields.
- Name.
- Context available is frontend or mobile.
- Active.
- Click on Create button.
Edit a CSS
- Click on
Edit CSS icon.
- Modify the fields.
- Click on the Edit button.
Delete a CSS
- Click on
Delete CSS icon.
- Click on Delete button.
Clone a CSS
- Click on
Clone CSS icon.
- Modify the fields.
- Click on Clone button.
Download a CSS
- Click on
Download CSS icon.
- Elapsed some seconds, will be retrieved a CSS file.
Samples
OpenKM 7.1.x comes with two UI, the classical UI ( frontend ) and a new one named KCenter.
Because the technologies used in both UI are pretty different, the changes in the CSS style should consider which UI will be used by the 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 from OpenKM version 7.1.31 and upper.
In the case of Arabic can be used several fonts:
- "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;
}
