Fortinet black logo

Administration Guide

Edit style sheets

Copy Link
Copy Doc ID dc02a854-ab11-11ea-8b7d-00505692583a:79723
Download PDF

Edit style sheets

The Style Sheet Editor allows you to modify the look and feel of the portal pages seen by your network users. This editor only modifies portal pages distributed with FortiNAC in version 4.1.1 or higher. Legacy portal pages cannot be edited using this tool. See Portal content editor for additional information.

When the Style Sheet Editor is accessed it displays a sample portal page. This gives you a way to preview your changes as you make them. There are two methods for editing your style sheets.

The first method is to click on an item in the sample page to pop-up a window of options that can be modified.

The second method allows you to enter custom rules for different items in the sample page. This option requires knowledge about cascading style sheets and elements within those style sheets.

Some mobile devices may automatically interpret any text resembling a phone number as a hyperlink. As a result, all rules relative to hyperlinks, including text color, are applied and may cause unexpected results. You may need to supply custom rules in the Style Editor to correct any unexpected issues.

Modifying styles using the sample portal page

  1. Select System > Portal Configuration.
  2. Click on the Content Editor tab.
  3. If you have created more than one portal, select the portal to be edited from the drop-down list at the bottom of the view.
  4. In the tree on the left, select Global > Styles to display the style editor.

  5. As you pass the mouse over the page, a hand is displayed for items that can be edited.

    For example, if you pass the mouse over the word Registration on the right side of the window, a hand is displayed and you may see a blue block that reads "editable". Click on the word Registration to open a properties window. Options contained within the window will vary depending on the item selected.

  6. Make changes as needed and click Preview to return to the Style Editor. Your changes display on the sample portal page.
  7. When all of the necessary changes have been made,click the Apply button.

Modify styles using the custom rules definitions

Note

In order to use custom rules, you must have a working knowledge of CSS.

  1. Select System > Portal Configuration.
  2. Click on the Content Editor tab.
  3. If you have created more than one portal, select the portal to be edited from the drop-down list at the bottom of the view.
  4. In the tree on the left, select Global > Styles to display the style editor.
  5. Scroll to the Custom Rules Definitions section at the bottom of the window. Using the Custom Rules option you can add multiple rules and each rule can contain multiple properties.

  6. To add a rule, click in the field and enter the selector and name of the element you wish to configure. The selector indicates the type of element being modified. For example a period (.) indicates that you are adding a property to a class in the style sheet. In the screen shot shown above, .pagetitle represents the banner at the top of the sample window.
  7. Click in the Property field and enter the name of the property you wish to set. In the example above, the color property is being set.
  8. Click in the Value field and enter the value of the property, such as blue for color or bold for font-weight.
  9. To add another property to the rule, click the Add Property button and an addition set of fields is displayed.
  10. To add another rule, click the Add Rule button and a new rule section is displayed.
  11. The Preview button allows you to see your changes on the sample page.
  12. The Reset button discards all changes and returns the sample page and the custom rules to the state they were in when the Style Editor was first opened.
  13. To save, click Apply at the bottom of the Content Editor View. This saves changes both in the rules section and in the sample page section.

Edit style sheets

The Style Sheet Editor allows you to modify the look and feel of the portal pages seen by your network users. This editor only modifies portal pages distributed with FortiNAC in version 4.1.1 or higher. Legacy portal pages cannot be edited using this tool. See Portal content editor for additional information.

When the Style Sheet Editor is accessed it displays a sample portal page. This gives you a way to preview your changes as you make them. There are two methods for editing your style sheets.

The first method is to click on an item in the sample page to pop-up a window of options that can be modified.

The second method allows you to enter custom rules for different items in the sample page. This option requires knowledge about cascading style sheets and elements within those style sheets.

Some mobile devices may automatically interpret any text resembling a phone number as a hyperlink. As a result, all rules relative to hyperlinks, including text color, are applied and may cause unexpected results. You may need to supply custom rules in the Style Editor to correct any unexpected issues.

Modifying styles using the sample portal page

  1. Select System > Portal Configuration.
  2. Click on the Content Editor tab.
  3. If you have created more than one portal, select the portal to be edited from the drop-down list at the bottom of the view.
  4. In the tree on the left, select Global > Styles to display the style editor.

  5. As you pass the mouse over the page, a hand is displayed for items that can be edited.

    For example, if you pass the mouse over the word Registration on the right side of the window, a hand is displayed and you may see a blue block that reads "editable". Click on the word Registration to open a properties window. Options contained within the window will vary depending on the item selected.

  6. Make changes as needed and click Preview to return to the Style Editor. Your changes display on the sample portal page.
  7. When all of the necessary changes have been made,click the Apply button.

Modify styles using the custom rules definitions

Note

In order to use custom rules, you must have a working knowledge of CSS.

  1. Select System > Portal Configuration.
  2. Click on the Content Editor tab.
  3. If you have created more than one portal, select the portal to be edited from the drop-down list at the bottom of the view.
  4. In the tree on the left, select Global > Styles to display the style editor.
  5. Scroll to the Custom Rules Definitions section at the bottom of the window. Using the Custom Rules option you can add multiple rules and each rule can contain multiple properties.

  6. To add a rule, click in the field and enter the selector and name of the element you wish to configure. The selector indicates the type of element being modified. For example a period (.) indicates that you are adding a property to a class in the style sheet. In the screen shot shown above, .pagetitle represents the banner at the top of the sample window.
  7. Click in the Property field and enter the name of the property you wish to set. In the example above, the color property is being set.
  8. Click in the Value field and enter the value of the property, such as blue for color or bold for font-weight.
  9. To add another property to the rule, click the Add Property button and an addition set of fields is displayed.
  10. To add another rule, click the Add Rule button and a new rule section is displayed.
  11. The Preview button allows you to see your changes on the sample page.
  12. The Reset button discards all changes and returns the sample page and the custom rules to the state they were in when the Style Editor was first opened.
  13. To save, click Apply at the bottom of the Content Editor View. This saves changes both in the rules section and in the sample page section.