FortiPortal
FortiPortal provides a comprehensive set of security management and analytics within a multi-tenant, multi-tier management framework.
glebras_FTNT
Staff
Staff
Article Id 190898
Description
This article describes how to customize the FortiPortal UI with a custom Cascading Style Sheets (CSS) file.

Solution
FortiPortal provides a default UI theme that is applied to the Administrative Web Interface and the Customer Portal Interface.

The Theme page provides configuration fields that allows to customization of this theme.

Configuration changes apply to both user interfaces (Administrative and Customer portal).

From the Administrative Web Interface in Admin > Theme tab, configure customizations such as:
  • Select a predefined color scheme.
  • Create a custom color scheme.
  • Define custom URLs and text fields.
  • Upload custom images.
  • Upload custom CSS file.

glebras_FD40976_tn_FD40976-1.jpg

This article describe how it is possible to customize the shape of tabs buttons to remove the "round" effect and have square buttons.

The result of this change is shown in the following before and after images:

glebras_FD40976_tn_FD40976-2.jpg

The first step is to download the default CSS file by selecting "custom" in the Color Scheme selector then clicking on "Export".

glebras_FD40976_tn_FD40976-3.jpg

Edit the "place_holder_custom.css" CSS file and then search for the ".menu_button_on_c" class and set the border-top-left-radius and border-top-right-radius to 0px:

glebras_FD40976_tn_FD40976-4.jpg

Save the file and then Import it in the FortiPortal:

glebras_FD40976_tn_FD40976-5.jpg

Click on Save.  The FortiPortal menu tabs buttons are now square.

Contributors