Skip to main content

Theme Editor

Theme Editor enables you to personalize the appearance of your Captive Portal themes and email styles to align with your brand identity. You can customize elements such as colors and background opacity for a cohesive look.
For advanced users, the option to apply Global CSS and JavaScript provides deeper customization, ensuring your Captive Portal meets your specific needs and delivers a unique, branded experience for your guests.

image.png


1. Themes

This section allows yo to customize the theme colors of your Captive Portal, providing a unique look that aligns with your brand identity. You can either paste the color hex codes into the editor or use the integrated color picker for easy selection. This flexibility ensures that your portal not only looks great but also resonates with your brand's visual style.

image.png

Applies to all themes (Grey, Black, Brown, Dark Blue, Custom Background, Elegant)
The fields displayed below are from "Custom Background" theme.


Fields:

  • Main Text: The color of the primary text displayed on the portal.
    Example: 333333 (Default color: 333333)

  • Main Background: The background color of the Theme 
    Example: (Default color: empty)

  • Main Background Opacity: Adjust the opacity of the main background color.
    Example: (e.g., 0.8 for 80% opacity)

  • Link Text: The color of hyperlinks in the portal.
    Example: 333333 (Default color: 333333)

  • Link Text Hover: The color of hyperlinks when hovered over.
    Example: 69b2d5 (Default color: 69b2d5)

  • Button Text: The color of the text on buttons.
    Example: ffffff (Default color: ffffff)

  • Button Background: The background color of buttons.
    Example: 083e6c (Default color: 083e6c)

  • Button Hover: The background color of buttons when hovered over.
    Example: 69b2d5 (Default color: 69b2d5)

  • Border: The color of borders throughout the portal.
    Example: ffffff (Default color: ffffff)



Set a color using the color picker
To set a new color using the color picker, click on the color field to open the picker. After selecting your desired color, click the round color icon in the bottom-right corner of the popup to save it. Once you’ve made all your changes, click the "Save" button to apply them.

image.png



2. Email Styles

This section allows administrators to customize the appearance of HTML emails sent by the device, which can be configured through the Campaigns feature. The customizable colors on the email template help create visually appealing emails that reflect your brand identity and engage your guests effectively.

⚠️ Note: Emails are sent in the following cases: for OTP-based Email Connect authentication, as automated messages to guests, or as part of a Discount Coupon campaign. The preview section displays a sample email template. We use a Discount Coupon email as the preview example, as it includes multiple content elements - allowing you to see detailed customization options.


image.png


Fields:

  • Dark Text: Color of the main text in the email.
    Example: 212121 (Default color: 212121)

  • Medium Text: Color of secondary text elements.
    Example: 709d41 (Default color: 709d41)

  • Light Text: Color for lighter text elements.
    Example: 7f8c8d (Default color: 7f8c8d)

  • Extra Text Background: Background color for sections with additional text.
    Example: 212121 (Default color: 212121)

  • Email Body Background: Background color for the main body of the email.
    Example: fafafa (Default color: fafafa)

  • Header/Footer Background: Background color for the email header and footer.
    Example: ffffff (Default color: ffffff)

  • HTML Body Background: Background color for the HTML body of the email.
    Example: f5f5f5 (Default color: f5f5f5)


3. Custom Code (CSS/JS)

The Custom Code page allows you to enhance the appearance and functionality of your Captive Portal by adding your own CSS and JavaScript code. This is particularly useful for making unique design adjustments and implementing interactive features that align with your brand's identity.

⚠️ Note: By using custom code, you can customize your Captive Portal to better meet your needs and enhance the guest experience. If you're not familiar with these customizations, consider working with a front-end developer for further assistance.


image.png


Fields:

  • Custom CSS Code: Use this section to modify the visual style of your Captive Portal. You can adjust font sizes, colors, spacing, and other design elements to create a cohesive look that reflects your branding.

    Example: The CSS code below sets the "home_text" element font size to 36 pixels and the line height to 46:

    #home_text p {
    font-size: 36px; 
    line-height: 46px;
}



  • Custom JS Code: This section enables you to add interactive behaviors and animations to your Captive Portal. You can create dynamic effects, enhance user experience, and implement custom functionality that standard settings may not cover.

    Example: The JavaScript code below will move the "home_text" paragraph 70 pixels to the right:

     
    document.addEventListener("DOMContentLoaded", function() {
    const homeTextParagraphs = document.querySelectorAll("#home_text p");
    homeTextParagraphs.forEach(paragraph => {
    paragraph.style.transform = "translateX(70px)"; }); 
});

Back to top