Guest Themes
You can create guest portal themes as per your business requirement. FortiGuest provides a default theme that you can download, customize and upload it. Ensure that you comply to the Rules, to successfully upload guest themes.
- Navigate to Guest Portal > Guest Themes.
- Select the default theme (or any existing theme) and click Download.
- Unzip the downloaded file to view the folder structure of the theme.
- Update the following files and folders and upload them on this page.
theme.css
This file is in the css directory of the theme structure and contain all the styles that are applied to the several HTML pages that make up the portal site.
theme.json
The theme.json file lists all resources used by the theme as well as defining the default values for several elements. You can update the following elements.
- id
- public_name
- author
- mandatory_pages
- optional_pages
- images
- standard_palettes and high_contrast_palettes
id
This is a mandatory element, it should only contain letters, digits and the underscore symbol, theme IDs are unique so if there is already a theme with this ID installed on FortiGuest, then you cannot install this theme.
public_name
This is an optional element, it should contain the name displayed on the administration interface when referring to the theme, this element does not have the restrictions that apply to the ID element. If the public_name element is not present, the theme's internal name is displayed.
author
This attribute is used by the theme author to place his name and/or contact details.
mandatory_pages
In this element, you can list the HTML templates for every kind of page the portal uses as well as declaring what content areas each page has and what should be it’s default value.
"login": {
"menu_item_weight": 1,
"label": "Login",
"components": [
{
"label": "Title",
"tag": "%TITLE%",
"content": "Login to the network"
},
{
"label": "Header",
"tag": "%HEADER%",
"content": "Login to the network"
},
{
"label": "Main",
"tag": "%MAIN%"
}
]
}
This example specifies the HTML template for the login page in the html folder. The login.html file uses the following components.
<h2 id="pageTitle">%HEADER%</h2>
<div class="feedbackContent">%FEEDBACK_AREA%</div>
<div class="mainContent">%MAIN%</div>
<div class="widgetContainer">%LOGIN_WIDGET%</div>
<div id="loginNavigation" class="col-md-4 hidden-sm hidden-xs"> %NAVIGATION_MENU% </div>
The placeholder variables for the several components defined in theme.json are placed amongst the markup, when the portal pages are generated the placeholders are replaced with the content associated with them. The content of these placeholders is built dynamically by FortiGuest depending on what options are selected during the portal setup. When creating your own themes you should make sure that these placeholders are in your template files otherwise the portal might not work as expected.
optional_pages
This section allows you to specify any optional pages you want to make available to portals using your theme. The default theme defines several optional pages, to add more you can copy one of the existing definitions and edit it as appropriate.
"menu_item_weight": 1000,
"label": "Welcome",
"id": "welcome",
"description": "Welcome page, can be used as alternative landing page to portal",
"components": [
{
"label": "Title",
"tag": "%TITLE%",
"content": "Welcome"
},
{
"label": "Header",
"tag": "%HEADER%",
"content": "Welcome"
},
{
"label": "Main",
"tag": "%MAIN%",
"content": "Welcome"
}
]
images
This element of the file is used to list all image files that are referenced by the HTML and CSS for the theme. You can modify the default images by replacing them with your own file_name.
{
"label": "Company logo large",
"description": "Used on the login page on large screen devices",
"tag": "%IMG_LOGO%", "file_name": "Logo.png",
"dimensions": "300x40"
}
This snippet specifies the label, description and recommended dimensions for the image. This information is displayed on the portal setup page so the administrator knows what this image is used for and can upload the right image for this purpose. The tag element specifies what placeholder variable is used in HTML and CSS template files to refer to this particular image, file element specifies which file is the default value for this image. All files are placed in the images folder.
To use this image in the login HTML template, add this to login.html.
<div id="headerImage" class="text-center"><img src="%IMG_LOGO%" class="img-responsive"/></div>
standard_palettes and high_contrast_palettes
These elements contain a list of all customizable colours used in the theme. The default theme already has a set of colour palettes defined, to add a new one, you can edit as follows.
{
"tag": "%CL_BODY_BACKGROUND%",
"label": "Body background color",
"value": "#f6f6f6"
}
This snippet specifies the label and value for the colour, this information is displayed on the portal setup page so the administrator knows where and what for the colour is used for. The tag specifies what placeholder variable is used in HTML and CSS template files to refer to this colour, the value element specifies the colour hex value.
images
This folder contains all images used in your guest theme. Add all the images that you want to use in this folder.
html
This folder contains all the HTML files that are a part of the guest portal. You can edit all these files as per your requirement and portal design.
Rules
To successfully enable the upload of guest themes, ensure that the following rules are complied with.
|
Rule |
Acceptable values |
|---|---|
| HTML elements | html, body, nav, a, abbr,
acronym, address, area, b, big, blockquote, br, button,
caption, center, cite, code, col, colgroup, dd, del, dfn,
dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6,
hr, i, img, ins, kbd, label, legend, li, map, menu, ol,
p, pre, q, s, samp, small, span, strike, strong, sub, sup,
table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var
|
| HTML attributes | abbr, accept, accept-charset, accesskey,
action, align, alt, axis, border, cellpadding, cellspacing,
char, charoff, charset, checked, cite, clear, cols,
colspan, color, compact, coords, datetime, dir,
enctype, for, headers, height, href, hreflang, hspace,
id, ismap, label, lang, longdesc, maxlength, method,
multiple, name, nohref, noshade, nowrap, prompt,
rel, rev, rows, rowspan, rules, scope, shape, size,
span, src, start, summary, tabindex, target, title, type,
usemap, valign, value, vspace,
width, class, role, data-toggle,
data-target, style
|
| HTTP schemes | http, https, lml
|