Technical Note: How to customize FortiPortal UI theme with CSS file

[glebras_FTNT]

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.

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:

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

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:

Save the file and then Import it in the FortiPortal:

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