Create a custom color scheme
Define a custom color scheme by selecting colors in the Color Picker or by changing the FortiPortal CSS file. Although you can switch between the two methods, these systems are independent. For example, changes made in Color Picker do not modify the colors in the CSS file.
The following figure shows the Color Scheme panel after you select to customize a scheme:
Using the color picker
To use the color picker to create a custom color scheme, select custom in the Color Scheme drop-down menu, select Color Picker as the Type, and then select Create New Color Scheme or Edit Custom Color Scheme. This opens the Add Custom Color Scheme or Edit Custom Color Scheme form.
The form is divided into the following sections:
- Global Settings
- Select the font family for all text on the site.
- Background Color Settings
- Select the background colors for various page elements.
- Font/Text Color Settings
- Select the text colors for various text fields.
- Chart Series Color Settings
- Color selection for each slice in a pie chart.
Changes take effect when the theme is saved successfully.
The following three figures show the page elements that have background colors and text colors that can be customized (see the table for descriptions of the callouts):
The following table describes the callout labels in the three figures:
|
Callout |
Label |
Description |
|---|---|---|
|
1 |
Page |
Background and text color for the overall page, excluding the header and footer |
|
2 |
Page Header |
Background and text color for the top portion of the page. |
|
3 |
Menu |
Background and text color for the menu. |
|
4 |
Button |
Background and text color for the buttons on the page |
|
5 |
Page Footer |
Background and text color for the bottom portion of the page. |
|
6 |
Widget header |
Background and text color for the widgets (and dialog boxes) on the dashboard and for some content on other pages. |
|
7 |
Progress Bar |
Background and text color for the progress indicator. |
Chart Series Color Settings
Chart Series Color Settings refer to pie charts and bar charts on the dashboard page (see the table for descriptions of the callout labels):
The following table describes the callout labels in the preceding figure:
|
Settings |
Callout |
Impacted Chart Segment |
|---|---|---|
|
Series #1 |
1 |
First |
|
Series #2 |
2 |
Second |
|
Series #3 |
3 |
Third |
|
Series #4 |
4 |
Fourth |
|
Series #5 |
5 |
Fifth |
|
Series #6 |
6 |
Sixth |
Using a custom CSS file
Upload a custom CSS file to have more control over the appearance of the web interface.
To update the CSS file, follow these steps:
- Select custom in the Color Scheme drop-down menu.
- Select Upload CSS for the type.
- Select Export to export the current CSS file. The file is saved in the Downloads folder of your local machine.
- Edit the file to make changes as needed and save the file.
- Select Import place_holder_custom.css.
- Use the file chooser to select your updated CSS file.
|
|
If the imported file contains any invalid CSS style, the style will be reset to the default CSS style. |
