To customize CSS parameters, go to the Admin tab > Settings > Edit.
Then in the Interface custom CSS field insert the customized CSS code following the example below. The example includes all the fields that can be customized: replace the required values, delete the unnecessary lines and click Apply.
CSS parameters example:
body {
--active-color: #ff4e02;
--active-nav-item: var(--active-color);
--non-active-nav-item: #ffffff;
--navigation-bg: #4b5360;
--navigation-dropdown-bg: transparent;
--popup-bg-color: #ffffff;
--active-subnav-item: var(--active-color);
--non-active-subnav-item: #59616c;
--session-header-bg-color: #181818;
--session-header-color: #ffffff;
--header-logo-max-height: 30px;
--header-logo-max-width: 160px;
--footer-logo-max-height: 30px;
--footer-logo-max-width: 160px;
--button-text-color: #ffffff;
--button-bg-color: var(--active-color);
--button-secondary-color: var(--active-color);
--input-bg-color: #ffffff;
--input-border-color: #e1e1e1;
--table-header-color: #ffffff;
--table-header-bg-color: #8c8c8c;
--table-color: #181818;
--table-row-odd-bg-color: #ffffff;
--table-row-even-bg-color: #f7f7f7;
--select-highlited-option-color: #ffffff;
--select-highlited-option-bg: var(--active-color);
--form-bg-color: #f7f7f7;
--table-link-color: #026578;
}
html {
--font-family-base: "Montserrat", sans-serif;
--font-size-base: 16px;
--color: #181818;
}
Table: The description of interface CSS parameters:
|
|
Parameter name |
Description |
|
1 |
--color |
The base font color. |
|
2 |
--active-color |
The color for active elements, such as buttons or links. |
|
3 |
--active-nav-item |
The color for the currently selected navigation item. |
|
4 |
--non-active-nav-item |
The color for non-selected navigation items. |
|
5 |
--navigation-bg |
The background color for the top navigation bar (the one with Admin, Account Manager, Support Manager tabs). |
|
6 |
--navigation-dropdown-bg |
The background color for dropdown menus in the navigation. |
|
7 |
--popup-bg-color |
The background color for pop-up or modal windows. |
|
8 |
--active-subnav-item |
The color for active sub-navigation items. |
|
9 |
--non-active-subnav-item |
The color for non-active sub-navigation items. |
|
10 |
--session-header-bg-color |
The background color for the header of the login form. |
|
11 |
--session-header-color |
The font color for the header of the login form. |
|
12 |
--header-logo-max-height |
The maximum height for the header logo. |
|
Parameter name |
Description |
|
|
13 |
--header-logo-max-width |
The maximum width for the header logo. |
|
14 |
--footer-logo-max-height |
The maximum height for the footer logo. |
|
15 |
--footer-logo-max-width |
The maximum width for the footer logo. |
|
16 |
--button-text-color |
The color of text within buttons |
|
17 |
--button-bg-color |
The background color for primary buttons. |
|
18 |
--button-secondary-color |
The background color for secondary buttons. |
|
19 |
--font-size-base |
The base font size for the design. |
|
20 |
--font-family-base |
The primary font family used. |
|
21 |
--input-bg-color |
The background color for input fields. |
|
22 |
--input-border-color |
The border color for input fields. |
|
23 |
--table-header-color |
The text color for table headers. |
|
24 |
--table-header-bg-color |
The background color for table headers. |
|
25 |
--table-color |
The text color for table content. |
|
26 |
--table-row-odd-bg-color |
The background color for odd-numbered table rows. |
|
27 |
--table-row-even-bg-color |
The background color for even-numbered table rows. |
|
28 |
--select-highlighted-option- color |
The color for the highlighted options in select dropdowns. |
|
29 |
--select-highlighted-option-bg |
The background color for highlighted options |
|
30 |
--form-bg-color |
The background color for form elements. |
|
31 |
--table-link-color |
The link color within tables. |
Interface elements and the corresponding CSS parameters (1)
Interface elements and the corresponding CSS parameters (2–3)