Fortinet white logo
Fortinet white logo

Administration Guide

Color scheme options

Color scheme options

The Edit Custom Color Scheme window has the following panes:

  1. Reset to: From the dropdown, select either Dark or Light theme to reset to.
  2. Global Settings: From the Font Family dropdown, select a font style.
  3. General Colors: Colors for the general GUI features.

    Body Background

    The body background color of FortiPortal.

    Font Color

    Font color for the content pane and the page header.

    Font Link Color

    Font color for sub-menus.

    Link

    The link color, e.g., the Forgot password link in the image below.

    Link Hover

    The link color when hovering.

    Link Disabled

    Disabled link color.

    Login Background

    Login screen background color.

    Disclaimer Text

    The legal disclaimer text color.

    Dividers Line

    The color of the lines marking out the entire window.

    Notification Unread Background

    The background color of unread messages.

    Summary Background

    The background color of the column names.

  4. Modal: The background color of the dialog that displays.

  5. Header & Footer: Header and footer colors.

    Header Background

    The color of the header background.

    Header Text

    The color of the header icons and the message in the header.

    Footer Background

    The color of the footer background.

  6. Menu: Menu background and font colors.

    Background

    The menu background color.

    Active Background

    The color of the selected menu item, e.g., Dashboard in the menu.

    Font Color

    The color of the font for the menu items on the left.

  7. Table: Table related colors.

    Border

    The color of the borders for a table.

    Background

    The color of the table background.

    Row Border

    The color of the border separating rows in a table, e.g., the yellow line separating the two rows below.

    Row Hover

    The color when you hover over a row in a table.

    Active Color

    The color of the active contents in a table.

    Row Checked Text

    The font color when an item is selected in the table.

    Thead Background

    The background color of the table header.

    Thead Text

    The font color of the table header.

    Section Heading Background

    The background color of the pane heading.

    Pagination Active Color

    The color of the current page number, e.g., font color of page 1 in the image below.

    Pagination Color

    The pagination color.

  8. Buttons - Primary: Buttons related colors.

    Background

    The primary button background color, e.g., the Save button background color in the image below.

    Text

    The primary button font color, e.g., the color of the text in the Save button.

    Disabled Background

    The disabled primary button background color.

    Disabled Text

    The disabled primary button text color.

    Active Background

    The active primary button background color, e.g., the color of the background of the Save button.

  9. Buttons - Secondary:

    Background

    The secondary button background color, e.g., the Cancel button background color.

    Border

    The secondary button border color, e.g., the color of the border of the Cancel button.

    Text

    The secondary button font color, e.g., the color of the text in the Cancel button.

    Active Background

    The active secondary button background color, e.g., the color of the background of the Cancel button.

    Active Border

    The active secondary button border color, e.g., the color of the border of the Cancel button.

    Disabled Background

    The disabled secondary button background color.

    Disabled Border

    The disabled secondary button border color.

    Disabled Text

    The disabled secondary button text color.

  10. Buttons - Light:

    Text

    The font color of the action buttons.

    Active Text

    The font color of the active action button.

    Disabled Text

    The font color of the disabled action buttons, e.g., Edit, Delete, Poll Now, and devices_switch_ap buttons in the image below.

  11. Dropdown:

    Background

    The color of the dropdown background.

    Border

    The color of the dropdown border.

    Text

    The color of the text in a dropdown.

  12. Forms Input: Forms related colors.

    Input Border

    The borders colors of the input fields in a form.

    Input Active Color

    The color of the border of the active field in a form.

    Input Text Color

    The color of the text in a field.

    Input Disabled Background

    The color of the disabled input field.

    Input Disabled Text

    The font color in a disabled field, e.g., Test in the disabled fields below.

    Input Disabled Border

    The color of the border of disabled fields in a form.

    Input File Selected Text

    The font color of the Choose File option when selected.

    Select Option background

    The background color when selecting an option.

    Select Option Text

    The font color when entering information in a Select Option field.

    Select Option Active Text

    The font color for options being selected in a Select Option field.

    Select Disabled Border

    The border color for the selected options where the options cannot be changed.

    Select Disabled Text

    The font color for the selected options where the options cannot be changed.

    Select Disabled Background

    The background color for the selected options where the options cannot be changed.

    Select Disabled Tag Background

    The background color for the selected options tags where the options cannot be changed.

    Placeholder Font Color

    The font color of the placeholder in a form, e.g., the text in the Domains option.

  13. Forms - Checkbox & Radio Group: Checkbox and radio buttons related colors.

    Radio & Checkbox Disabled

    The color when a radio button or checkbox is disabled, e.g., the Enable Trusted Hosts checkbox

    Radio & Checkbox Checked Disabled

    The color when a radio or checkbox is selected and the setting is disabled.

    Radio Group Text

    The font color of the radio buttons group text.

    Radio Group Checked Disabled Text

    The font color of the radio group text when selected, but the options cannot be changed.

    Radio Group Checked Disabled Background

    The background color of the radio group when selected, but the options cannot be changed.

    Radio Group Checked Disabled Border

    The border color of the radio group when selected, but the options cannot be changed.

  14. Card: Card related colors.

    Background

    The background color of the widget.

    Border

    The border color of a widget.

    Percent Text

    The color of the percent text.

    Text

    The font color of the heading in a widget.

    Device Selector Border

    The border color for the device selector option.

  15. Chart: Color settings related for charts in the dashboard.
  16. Loading: The loading background and text related colors.
  17. Navbar: Navigation bar related colors.

    Text Color

    The font color for the navigation bar elements.

    Active Border

    The border color of the active navigation bar element, e.g., the border color for the General tab.

  18. Progress Bar: Progress bar related colors.

    Active

    The color of the progress bar.

    Border

    The border color of the progress bar, e.g., the border color for CPU Usage and Memory Usage.

Color scheme options

Color scheme options

The Edit Custom Color Scheme window has the following panes:

  1. Reset to: From the dropdown, select either Dark or Light theme to reset to.
  2. Global Settings: From the Font Family dropdown, select a font style.
  3. General Colors: Colors for the general GUI features.

    Body Background

    The body background color of FortiPortal.

    Font Color

    Font color for the content pane and the page header.

    Font Link Color

    Font color for sub-menus.

    Link

    The link color, e.g., the Forgot password link in the image below.

    Link Hover

    The link color when hovering.

    Link Disabled

    Disabled link color.

    Login Background

    Login screen background color.

    Disclaimer Text

    The legal disclaimer text color.

    Dividers Line

    The color of the lines marking out the entire window.

    Notification Unread Background

    The background color of unread messages.

    Summary Background

    The background color of the column names.

  4. Modal: The background color of the dialog that displays.

  5. Header & Footer: Header and footer colors.

    Header Background

    The color of the header background.

    Header Text

    The color of the header icons and the message in the header.

    Footer Background

    The color of the footer background.

  6. Menu: Menu background and font colors.

    Background

    The menu background color.

    Active Background

    The color of the selected menu item, e.g., Dashboard in the menu.

    Font Color

    The color of the font for the menu items on the left.

  7. Table: Table related colors.

    Border

    The color of the borders for a table.

    Background

    The color of the table background.

    Row Border

    The color of the border separating rows in a table, e.g., the yellow line separating the two rows below.

    Row Hover

    The color when you hover over a row in a table.

    Active Color

    The color of the active contents in a table.

    Row Checked Text

    The font color when an item is selected in the table.

    Thead Background

    The background color of the table header.

    Thead Text

    The font color of the table header.

    Section Heading Background

    The background color of the pane heading.

    Pagination Active Color

    The color of the current page number, e.g., font color of page 1 in the image below.

    Pagination Color

    The pagination color.

  8. Buttons - Primary: Buttons related colors.

    Background

    The primary button background color, e.g., the Save button background color in the image below.

    Text

    The primary button font color, e.g., the color of the text in the Save button.

    Disabled Background

    The disabled primary button background color.

    Disabled Text

    The disabled primary button text color.

    Active Background

    The active primary button background color, e.g., the color of the background of the Save button.

  9. Buttons - Secondary:

    Background

    The secondary button background color, e.g., the Cancel button background color.

    Border

    The secondary button border color, e.g., the color of the border of the Cancel button.

    Text

    The secondary button font color, e.g., the color of the text in the Cancel button.

    Active Background

    The active secondary button background color, e.g., the color of the background of the Cancel button.

    Active Border

    The active secondary button border color, e.g., the color of the border of the Cancel button.

    Disabled Background

    The disabled secondary button background color.

    Disabled Border

    The disabled secondary button border color.

    Disabled Text

    The disabled secondary button text color.

  10. Buttons - Light:

    Text

    The font color of the action buttons.

    Active Text

    The font color of the active action button.

    Disabled Text

    The font color of the disabled action buttons, e.g., Edit, Delete, Poll Now, and devices_switch_ap buttons in the image below.

  11. Dropdown:

    Background

    The color of the dropdown background.

    Border

    The color of the dropdown border.

    Text

    The color of the text in a dropdown.

  12. Forms Input: Forms related colors.

    Input Border

    The borders colors of the input fields in a form.

    Input Active Color

    The color of the border of the active field in a form.

    Input Text Color

    The color of the text in a field.

    Input Disabled Background

    The color of the disabled input field.

    Input Disabled Text

    The font color in a disabled field, e.g., Test in the disabled fields below.

    Input Disabled Border

    The color of the border of disabled fields in a form.

    Input File Selected Text

    The font color of the Choose File option when selected.

    Select Option background

    The background color when selecting an option.

    Select Option Text

    The font color when entering information in a Select Option field.

    Select Option Active Text

    The font color for options being selected in a Select Option field.

    Select Disabled Border

    The border color for the selected options where the options cannot be changed.

    Select Disabled Text

    The font color for the selected options where the options cannot be changed.

    Select Disabled Background

    The background color for the selected options where the options cannot be changed.

    Select Disabled Tag Background

    The background color for the selected options tags where the options cannot be changed.

    Placeholder Font Color

    The font color of the placeholder in a form, e.g., the text in the Domains option.

  13. Forms - Checkbox & Radio Group: Checkbox and radio buttons related colors.

    Radio & Checkbox Disabled

    The color when a radio button or checkbox is disabled, e.g., the Enable Trusted Hosts checkbox

    Radio & Checkbox Checked Disabled

    The color when a radio or checkbox is selected and the setting is disabled.

    Radio Group Text

    The font color of the radio buttons group text.

    Radio Group Checked Disabled Text

    The font color of the radio group text when selected, but the options cannot be changed.

    Radio Group Checked Disabled Background

    The background color of the radio group when selected, but the options cannot be changed.

    Radio Group Checked Disabled Border

    The border color of the radio group when selected, but the options cannot be changed.

  14. Card: Card related colors.

    Background

    The background color of the widget.

    Border

    The border color of a widget.

    Percent Text

    The color of the percent text.

    Text

    The font color of the heading in a widget.

    Device Selector Border

    The border color for the device selector option.

  15. Chart: Color settings related for charts in the dashboard.
  16. Loading: The loading background and text related colors.
  17. Navbar: Navigation bar related colors.

    Text Color

    The font color for the navigation bar elements.

    Active Border

    The border color of the active navigation bar element, e.g., the border color for the General tab.

  18. Progress Bar: Progress bar related colors.

    Active

    The color of the progress bar.

    Border

    The border color of the progress bar, e.g., the border color for CPU Usage and Memory Usage.