The Colours for the Welcome Portal and Apps

After selecting a template from the Templates list, make it your own!

When modifying an existing template, customising the items will overwrite the original template.

There are various pre-set colour schemes available, and we recommend reviewing them first. You can also customise these schemes by loading them into the custom settings.

Loading a set of colours into the custom settings will overwrite the existing custom colours.

The colours for the Welcome Portal

The Top Bar of the Welcome Portal

Image and Title

To display the Top Bar, edit title, customise the background colour and text colour

1. Expand Welcome Portal > Definition
2. Ensure that Display Top Bar is set to Yes
3. Edit the Main Title, Subtitle and Upload the Main Image if applicable

Change colours of the background and texts

To change the background colour and text of the App Bar

1. Expand Colours for Welcome Portal and Apps
2. Ensure the Type is set to Custom
3. Expand Colours for the Welcome Portal
4. In the Top App Background select or edit the RGBA colour for the top app background and its transparency
5. In the Top App Texts, select or edit the RGBA colour for the texts in the top bar and adjust its transparency
6. Save the changes by clicking the Save button in the top right corner.

Change colours of the background and texts

To change the background colour and text

1. Expand Colours for Welcome Portal and Apps
2. Ensure the Type is set to Custom
3. Expand Colours for the Welcome Portal
4. In the App Bar Background, App Bar Texts and App Bar Button Background, select or edit the RGBA colour for the App Bar background and texts and their transparency
5. You can also change the colour of the selected app by customising their RGBA values in the Selected Item Background and Selected Item Texts
6. Save the changes by clicking the Save button in the top right corner.

The App Bar at the bottom

To display the App Bar

1. Expand Welcome Portal > App
2. Make sure that Display App Bar is set to Yes

If set to No, make sure the Info App or Login App is selected in the Default App

App Icons

To change the icons for the apps

1. Expand Welcome Portal > Icons for Apps
2. Select the Button Style
3. Then upload the image for each icon you want to change
4. Save the changes by clicking the Save button in the top right corner.

The colours for the Apps

The App Header

Image

To change the image for the app header

1. Expand Login or Info App
2. Then upload the image for the app you want to change
3. Save the changes by clicking the Save button in the top right corner.

Change the colours of the App header background and texts

To change the image and texts for the app header

1. Expand Welcome Portal > Colours for the Welcome Portal and Apps > Colours for Apps
2. In the Header Background and Header Texts select or edit the RGBA colour for the header background and texts, and their transparency
3. Save the changes by clicking the Save button in the top right corner.

The App

Change the Colours

To change the background colours and texts for the apps

1. Expand Welcome Portal > Colours for the Welcome Portal and Apps > Colours for Apps
2. In the Background select or edit the RGBA colour for the app background and its transparency
3. In the Titles and Texts, select or edit the RGBA colour for the text that appear on the app and their transparency
4. Save the changes by clicking the Save button in the top right corner.

The Highlighted Areas

Change the colours of the background and texts

To change the background colours and texts for the apps

1. Expand Welcome Portal > Colours for the Welcome Portal and Apps > Colours for Apps
2. In the Highlighted Areas Background select or edit the RGBA colour for the background of the highlighted areas and its transparency
3. In the Highlighted Areas Texts, select or edit the RGBA colour for the texts that appear on the highlighted areas and their transparency
4. Save the changes by clicking the Save button in the top right corner.

The colour you apply to Highlighted Texts in Highlighted Areas also impacts the border of the selected WiFi plan.

The CTA Buttons

Change the Background and Text Colours

To change the background colours and texts for the buttons

1. Expand Welcome Portal > Colours for the Welcome Portal and Apps > Colours for Apps
2. In the Action Button Background select or edit the RGBA colour for the button background and its transparency
3. In the Action Button Texts, select or edit the RGBA colour for the text that appear on the buttons and their transparency
4. Save the changes by clicking the Save button in the top right corner.

The Selection Buttons

Change the Background and Text Colours

To change the background colours and texts for the selection buttons

1. Expand Welcome Portal > Colours for the Welcome Portal and Apps > Colours for Apps
2. In the Selection Button Background and Selection Button Text select or edit the RGBA colour for the background, texts and their transparency for the Selection Buttons.
3. Save the changes by clicking the Save button in the top right corner.

The Hover Effect

The visual effect appears only when users hover their cursor over a selection button, such as for: Voucher, Surf, Complimentary Access, HelpDesk, all buttons within the Connection Status App, and the User Profile App (excluding the Disconnect button).

Change the Background and Text Colours

To change the background colours and texts for the hover effect

1. Expand Welcome Portal > Colours for the Welcome Portal and Apps > Colours for Apps
2. In the Hover Background and Hover Texts select or edit the RGBA colour for the button background and its transparency
3. Save the changes by clicking the Save button in the top right corner.

The Input Fields

Change the Background and Text Colours

To change the background colours and texts for the input fields

1. Expand Welcome Portal > Colours for the Welcome Portal and Apps > Colours for Apps
2. In the Input Field Background and Input Field Texts select or edit the RGBA colour for the button background and its transparency
3. Save the changes by clicking the Save button in the top right corner.

The Sidebar

Change the Background and Text Colours

To change the background colours and texts for the sidebar

1. Expand Welcome Portal > Colours for the Welcome Portal and Apps > Colours for The Welcome Portal
2. In the Sidebar Background and Sidebar Texts select or edit the RGBA colour for the sidebar background and texts, and their transparency
3. Save the changes by clicking the Save button in the top right corner.