Portal Templates

From Airangel Wiki
Jump to: navigation, search


Portal templates are the inner workings of the portal. This is where you'll go if you want to dive in and create something bespoke.

NB - The portal templates should only be edited if you have a degree of experience using HTML and CSS.

The default template will always be available and cannot be deleted. It is recommend that this template be cloned and any new templates be built from this one.

Portal templates can be used to write your own HTML, CSS and JS while still being able to use the portal editor to configure replacement values ( for example ${color:body:background}). The editor has an auto-complete and hint function which you can use by pressing ctrl+enter.

  • HTML: contains HTML but can also contain CSS and JS.
  • CSS: contains the style of the page. Make sure the HTML editor contains <style>${css} </style> or the style will not be applied.
  • JavaScript: contains scripting. Make sure the HTML editor contains <script>${javascript}</script> or non of the scripts will work. Also make sure ${javascript:autodetect} is present if you intend to use an autodetect form.
An example of the portal template (HTML/CSS/JavaScript) editor with some replacement values in use.

Replacement Values

Possible replacement values, all replacement values are placed between ${}, for example ${layout:font-family} [name] means you can type a-z characters to define your own style, the portal editor will make this style available to configure.

  • css all content from the CSS editor
  • javascript all content from the JavaScript editor
  • javascript:autodetect JavaScript needed to support the autodetect login form
  • form:terms needed for social authentication terms
  • form:pan needed if you want Personal Area Network configuration
  • form:802.1x needed if you want the option to connect to a secure network
  • form:language selection Language selection
  • forms all forms configured in the portal login section (when editing the portal page). It's also possible to include a specific form like ${form:[form name]}
  • border:[name]:type -full,-top,-bottom,-right,-left, can be used to define the border you want to style, for example: border${border:header:type}-width:${border:header:width};
  • border:[name]:radius for example 10px
  • border:[name]:width for example 2px
  • border:[name]:style solid, dashed,
  • border:[name]:color for example #ececec
  • color:[name]:background for example #ececec
  • color:[name]:text for example #ececec
  • content:[name] content configured in the portal
  • get:[name] get variable, error messages can be printed by using ${get:error}
  • image:[name]:src image source, for example https://mydomain.com/images/image.png
  • image:[name]:background-position image position, can be 'left', 'right' or 'center'
  • image:[name]:background-repeat how to repeat the image, can be repeat, no-repeat, repeat-y or repeat-x
  • image:[name]:slideshow needs to be placed in the HTML editor if you want to support slideshow images. This will return a list like < ul >< li ></ li ></ ul > Make sure you added the slideshow CSS into your template (see point 3)
  • image:[name]:css will create the entire background image CSS for you, this entry should always be the latest entry in a CSS block
  • label:[name] any available label translation (including guest data), for example ${label:firstname}
  • layout:box opacity value between 0 and 1, for example 0.4
  • layout:font-family for example: Arial

Slideshow CSS Requirement

.slideshow{ position:absolute; top:0px; left:0px; width: 100%; height: 100%; z-index:0; liststyle:none; } .slideshow li,.slideshow li span{ height:100%; position:absolute; top:0px; left:0px; width:100%; z-index: 0; } .page-slideshow li span{ position: fixed !important } .slideshow li span{ color: transparent; } @keyframes hideImages{ 0% { opacity: 0; } 49% { opacity: 0; } 50% {opacity: 1; } 99% { opacity: 1; } 100% { opacity: 1; } }


The portal templates give the user access to functions and designs that are not editable on the portal dashboard. The portal templates are accessed through the ‘Settings’ menu on the dashboard. It is recommended that you duplicate the template before starting to edit in the event you need to revert and start again, this Is easily done by hitting clone on the default template.

How do i change the colour of a button?

  1. Hit CTRL+F to open the search bar
  2. Search for ‘.button {’
  3. Find ‘Background-Color:’
  4. Enter the HEX or RGB code or simply spell out the colour you want
  5. Ensure the colour ends with a semi colon

How do i remove the border of a button?

  1. Hit CTRL+F to open the search bar
  2. Search for ‘.button’
  3. Find ‘border: 1px solid rgba (0,0,0,1);’
  4. Replace ‘1px solid rgba (0,0,0,1)’ with ‘None;’
  5. Ensure the colour ends with a semi colon

How do i add a hover transition to a button?

  1. Hit CTRL+F to open the search bar
  2. Search for ‘.button:hover’
How do i change the button colour when hovered over?

.button:hover{ Background-color: (enter your color here); }

How do i change the transition speed when hovered over?

.button:hover{ Transition: 0.5s (for .5 seconds. Enter any value between .1 and .9); }

How do i chamge font size when hovered over?

.button:hover{ Font-size: (enter font size here in px); }