Customization of the Captive Portal

Introduction #

The Captive Portal provides administrators with a wide range of customization options to enhance branding, usability, and the user experience. Through the Admin Portal, you can modify the portal’s layout, colors, fonts, buttons, background images, and text elements.

This guide explains how to configure and apply these settings, ensuring that your portal aligns with your organization’s branding and accessibility standards.

Accessing Portal Customization Settings #

To access customization settings:

1. Navigate to 📌 Sign In Administration > Login Portal > Look and Feel.
2. Within this section, you can configure the following:
   • Background and logo images
   • Fonts and styles
   • Button style and colors
   • Portal texts and labels colors
   • Additional image files

Customization Options #

1. Background and Logo Customization #

Background Image #

• The background image defines the overall look of the captive portal.
• You can upload a custom background image via the admin interface.
• Supported formats: JPG, PNG
• Recommended resolution: 1920×1080 pixels
• Avoid using files larger than 1MB, as it may increase rendering time for users accessing the captive portal.

Logo Image #

• The portal can display a custom organization logo.
• Supported formats: JPG, PNG
• Ensure that the logo has a transparent background (PNG recommended) for the best visual appearance.

To update either image:

1. Navigate to Looks and Files.
2. Select the Background Image or Logo Image tab.
3. Upload the new image file.
4. Click Save Changes.

2. Font Customization #

The Captive Portal supports font customization for both header and body text.

• Header Font: Used for titles and headings on the portal.
• Body Font: Used for paragraph text and general content.
• The system supports WOFF (Web Open Font Format) for the best compatibility across browsers.
• Font sizes can be adjusted to optimize readability.

To modify fonts:

1. Upload a WOFF file containing the font.
2. Select the font for headers and body text from the dropdown menu.
3. Click Save Changes to apply the new font.

3. Color & Button Customization #

Administrators can modify colors for various UI elements within the captive portal. All color values can be defined using a HEX color code or selected from the color palette.

Login Panel Colors #

The login panel is the main interactive area where users enter credentials. You can modify:

• Text Color: Defines the color of general text inside the panel.
• Input Text Color: Affects the text inside input fields.
• Tabs Text Color: Defines the color of text in navigation tabs (e.g., “Guest Access”, “Email Access”).
• Front Color: Applies to links and emphasized UI elements.
• Terms Color: Defines the color of “Terms and Conditions” and “Privacy Policy” links.
• Background Color: Adjusts the background of the login panel (separate from the full-page background).
• Background Opacity (%): Controls how transparent the panel appears over the background image (0% = fully transparent, 100% = solid).
• Shadow Offset & Blur: Adds a shadow effect to the login panel for depth and contrast.

Button Customization #

• Choose Button Type: Select between Rounded or Square buttons.
• Button Color: Defines the background color of all buttons on the portal.
• Button Text Color: Specifies the text color inside buttons.

To modify these settings:

1. Navigate to Colors & Buttons under the Looks and Files menu.
2. Adjust each color field using a HEX code or color picker.
3. Click Update Colors and Buttons to apply the changes.

Where These Settings Apply in the Captive Portal #

Login Panel Appearance #

• The panel’s background color and opacity determine how much of the background image is visible.
• Tabs text color defines the appearance of the tabbed navigation options (e.g., “Guest Access”, “Attending a Conference”, “Email Access”).
• The input text color affects the display of credentials inside text fields.

Buttons & Forms #

• The Button color and text color control the Request Access and Login buttons.
• Rounded or square buttons define the overall button shape.
• Form type (rounded or square) adjusts the appearance of input fields.

Terms & Conditions Links #

• The Terms color affects the links to Terms and Privacy Policy inside the login panel.

File Management for Customization #

The Looks and Files section provides a complete overview of uploaded images, fonts, and text files used in the portal.

Managing Custom Files #

1. Navigate to 📌 Sign In Administration > Login Portal > Looks and Feel > File.
2. Upload new images or font files.
3. Delete or replace outdated files as needed.
4. File type limitations:
   • Images: JPG, PNG
   • Fonts: WOFF
   • Text Files: JSON, TXT