Themes: General Template Style Settings

The Theme functionality is an essential tool in customising your Itinerary output and making them your own style and design. The Theme Customiser allows you to easily make these changes and in this document we will cover how to style your itinerary template, completely changing the overall look and feel of it. You are able to add sophistication to your itineraries by applying fonts and colours to your headings, itinerary body as well as the icons featured in your itinerary.

This functionality is only available on the Digital Enterprise and Day Tour Packages

Getting Started

When you open the Theme Customiser, you can choose whether you want to style your itinerary using Wetu's default styles or create your own from scratch, the options available here should have your itineraries standing out in no time!

Wetu Default Styles
Use Wetu’s predefined styling settings to quickly style your itinerary. Different font styles have been carefully paired with 3 colour options which we have been broken down into primary, secondary and accent colours. You'll learn more about this in the 'colour palette' section further down.

These Wetu Default Styles were created to assist you as a starting point for your styling. When you select a Wetu Default Style, it will apply the predefined styling changes to your itinerary.

My Theme styles
Create your own theme styles from scratch. This is also where all your previously saved themes will sit.

Choosing Colours

Choosing colours for your itinerary can be quite a daunting process, we have created a separate document to help you with some tips and tricks. Refer to the article How to Choose Your Colours to learn more.

Fonts

Select from a very wide range of font styles and sizes to apply to the itinerary heading and body text.

Heading Font
This setting will affect all headings on all pages of your itinerary.

Body Text Font
This setting will affect the body text of your itinerary.

Note: Changing the font size will only affect the headings and not the body text.

A reset button will appear beside each option once a change is made. Clicking 'reset' will return the style to the last saved version.

Colour Palette

These have been broken down into primary, secondary and accent colours.

Primary Colour
This will affect the main headings in your itinerary.

Secondary Colour
This will affect the subheadings in the itinerary. Trip information details, Consultant details as well as the daily information page subheadings will all carry the colour you set here.

Accent Colour
The tab of the page which you are currently viewing will be highlighted by your accent colour. Your accent colour is also applied to your call-to-action button on the top right corner of the banner. In this example, the Enquire button will be the call to action button.

Note: You are able to have the call to action button set to Enquire, Book Now, Register or even hidden. Refer to the article Creating Themes to learn more.

By default, a softer tint of your accent colour will appear as you hover over the rest of the tabs in the navigation bar.

Wetu Suggests: Bright colours are best suited for accent colors as it calls attention to key elements catching ones attention immediately.

Smart Color
Establishes visual hierarchy and focal points throughout your itinerary by generating colour variants. We suggest leaving this box checked if you don't have specific company colours. You want your itinerary to stand out but not overwhelm.

Font Colours

Choose between white and charcoal as the font colour of the headings in your itinerary.

Primary Heading Font Colour
This font colour will affect the main headings in your itinerary.

Secondary Heading Font Colour
This font colour will affect the sub headings in your itinerary.

Icon Colour

Social Media Icon Colour
This will affect the social media icons on the banner as well as in the footer of your itinerary.

General Icon Colour
This will affect the contact detail icons under consultant info as well some icons on the Overview page depending on the template setting selected for the trip summary mode. Refer to the article Classic Template Settings to learn more.

Note: Social media icons will only display on your banner and the footer if you have set up the links in your Admin and selected to display sharing options in your template settings. Refer to the article Creating Themes to learn more.

Additional Tweaks

Choose quick options to set navigation, background, landing page overlay and footer colours of your itinerary. These options are based on the colours you have defined as your primary, secondary and accent colours under the colour palette section. This will allow for a clean finish to your itinerary styled with variations of the same colours.

Navigation Bar Colour Options
These will affect the navigation bar of your itinerary.

Background Colour Options
These will affect the background of your itinerary.

Landing Page Overlay Colour
These will affect the colour of the overlay on the landing page. The landing page is what your clients see first once they open your itinerary. Depending on the landing page template your itinerary is set to, the landing page overlay colour will either affect the entire page or only a section behind the itinerary details.

Footer Colour Options
These will affect the footer of your itinerary. You may want to stick to colors that make your logo stand out. If your logo is dark, select a lighter footer colour and vice versa.

Note: Background Color Options will only be affected should you apply a color change to the primary colour palette otherwise, it will maintain Wetu’s default standard colors. Should you choose to apply a primary colour to your itinerary, by default the background colour options will pull through a darker or lighter version of your primary colour choice for the contrast between the heading colours and the background.
Applying the same colour to the headings and the background will be overwhelming. However having to specify an additional colour for the background adds another layer of complexity.
That’s how we came up with the idea to generate a lighter and darker version of the primary color. To create the lighter version, we mix 15% of the primary color with 85% white. To create the darker version, we mix 50% of the primary color with 50% black. The light and dark versions in the backgound colour options will update accordingly should changes be made to the primary colour.

Wetu Suggests: Do not style your itinerary with multiple prominent colours as this could be distracting.

If you are still not satisfied with the styling changes you have made and would like to do further styling changes, this is possible in our Advanced Template Styles section. Refer to the article Advanced Template Style Settings to learn more.