Skip to main content

Themes

Product Management avatar
Written by Product Management
Updated this week

Overview

TripBuilder offers flexibility in customising its visual appearance by allowing you to:

  • Select images for the primary logo, header picture, and loading placeholder.

  • Configure themes.

Each configuration is tailored per distribution channel, enabling distinct visual branding.

This article addresses theme configuration

Know more:

For further details on image configuration, please see the article on the Primary Logo, Header Picture, and Loading Placeholder.

You can adjust colours, fonts, buttons, and borders through theme configuration to align with your travel brand's visual style. CSS overwrites can also be used for more advanced styling (IT expertise is required).

Note:

  • Theme configuration only applies to the TripBuilder booking funnel (Discovery, Planner, and Checkout) for B2B and B2C use.

  • Theming does not apply to the Cockpit application.

Theme Selection

Follow the steps below to customise the consumer-facing pages:

  1. Go to Settings.

  2. Click on Distribution Channels.

  3. Click on your TripBuilder ID.

  4. Ensure the General tab is selected.

  5. Scroll down to the Theme setting under the Styles section.
    ​

    Screenshot 2024-09-14 at 23.44.50.png

  6. Choose from the following options:
    ​

    • Neutral: a built-in theme managed by Nezasa.

    • Configurable: This option allows you to configure your own theme. It will display an additional Edit Theme Settings button for detailed UI customisation.

Note:
​

Nezasa is phasing out hard-coded custom themes previously used by some long-standing customers in favour of flexible, configurable themes. If needed, Nezasa can assist in transitioning from custom themes to the new configurable themes.
​

Identifying Deprecated Themes:

  • If your selected theme name differs from neutral or configurable, e.g. your travel brand or TripBuilder instance name, complemented with a (Deprecated) label.

  • A warning message below the theme name will read: "A custom-implemented theme is configured for this distribution channel. The configurable theme is replacing hard-coded custom themes, please migrate to the configurable theme. Contact customer support for assistance."

Configurable Theme Options

Once the Configurable theme option is selected, an additional Edit Theme Settings button will become available. Clicking this button allows the TripBuilder admin to configure and adjust various visual settings.

Hint: Focus on adjusting the main settings, which include base colours, font size, font family, and button settings. Aligning these 5-8 settings should closely match your travel brand's style. Additional settings can be adjusted for fine-tuning the overall appearance.

Displayed examples are taken from the Neutral theme, where placeholders expose its defaults.

Colours

Base Colours

Screenshot 2024-09-14 at 23.48.35.png

State Colours

Screenshot 2024-09-14 at 23.49.30.png

Planner Colours

Screenshot 2024-09-14 at 23.50.26.png

B2B Page Header Colours

Screenshot 2024-09-14 at 23.50.50.png

Colours "Varia"

Screenshot 2024-09-14 at 23.51.43.png

Fonts

Screenshot 2024-09-14 at 23.52.33.png

Buttons

Screenshot 2024-09-14 at 23.53.17.png

Borders

Screenshot 2024-09-14 at 23.55.48.png

Custom Styles

Screenshot 2024-09-14 at 23.56.32.png
Did this answer your question?