/
Site Theme

Site Theme

Overview

Use predefined themes, or modify and save custom themes to apply to each site

Navigating Site Theme

  1. From the Main Menu click on Settings > Sites

  2. Select the Theme page.

image-20241016-042541.png

Change Theme - Predefined Themes

  1. Select any Predefined theme from the drop down list and select Load Selected Theme

image-20241105-051105.png

  1. Select the Preview Site Button to view how it will appear on your site

image-20241105-051254.png

  1. If satisfied with the theme click on the Save button.

image-20241105-051349.png

A popup screen will display - The predefined themes CANNOT be overwritten so the Update Current Theme will be greyed out.

  1. Under the ‘Save as a New Theme’ radio button, name the theme and select save

image-20241016-045824.png

Change Theme - Custom Themes

  1. Alternatively, select any Custom Theme from the drop down list and select Load Selected Theme

image-20241105-052426.png

  1. Select the Preview Site Button to view how it will appear on the site

image-20241105-051254.png

  1. If satisfied with the theme click on the Save button.

image-20241105-051349.png

 

  1. Select either the Update Current Theme radio button and select save
    or Select the Save as a New Theme radio button (and name the theme) and select save

image-20241016-050524.png

Colour Options

  1. Update the colour layout on the site. Below, you'll find detailed information about each colour and the areas where it will be applied.

image-20241101-052211.png
image-20241101-052217.png

 

Global Colours

image-20241101-052516.png
image-20241101-052109.png

  • Text Color - Adjusts the color of text within the calendar box, tour descriptions, and their titles in the homepage. IN the booking page it changes long description, dates and fares

image-20241101-055856.png

 

 

 

 

 

 

Homepage screenshot below

image-20250417-044537.png

 

Booking page screenshot below
(All the details that are in green are controlled by text colour settings)

image-20250417-044636.png

 

  • Secondary Colour - Modifies the color of Small headings on the booking page.

Image below is the site preview after changing Secondary Colour.

image-20241101-060703.png

 

image-20241101-060545.png

.

 

 

 

 

 

 

 

 

 

 

 

 

  • Text Muted Color - Alters the color of the “from” icon on both the homepage and booking page. It also updates the color of the tour information tabs and descriptions on the booking page

 

image-20241101-061834.png

 

 

 

 

 

 

 

Homepage screenshot below

image-20241101-061237.png

 

Booking Page screenshot below

image-20241101-061540.png

  • Border colour -Horizontal rules (lines) in the booking page

 

image-20241101-063933.png

 

 

image-20250417-045410.png

 

 

  • Shadow Colour-Tour Info tab shadow, Book Now button Shadow, From price circle shadow, Card shadow

 

 

image-20250417-045610.png

 

  • Call-to-Action Colour-Modifies the following: Button colour for Shopping Cart badge, Book Now button, Add to Cart button, Pay Now Button, and Checkout button.

image-20241101-072332.png

Homepage image below

image-20250417-045717.png

 

Booking Page screenshot below

image-20250417-050034.png

 

image-20250417-050049.png

 

 

  • Input Border Colour- Modifies Border outline colour on clickable input fields, calendar, search fares, and filed placeholders.

image-20241101-072825.png

 

 

 

Homepage image below

image-20241101-072714.png

Booking Page image below

image-20241101-072752.png

 

Layout Overlay

  • Overlay Gradient & Solid backgroud postion- Offset layout by the height of the masterhead

    • It offers two options: “Top” and “Offset.” Refer to the image below to see the differences between them.

    • Overlay gradient colour to select color

    • Overlay Gradient Opacity can be changed from 100% to 0%

    • Overlay Gradient size has 3 options “small”, “Medium”, and “Large”

image-20241101-080457.png

 

 

 

 

 

 

Top option position covered the entire masterhead on the homepage. (see attached image)

image-20241101-075439.png

 

Offset option position, the overlay did not cover the entire masterhead on the homepage. (see attached image)

image-20250417-050649.png

 

  • Overlay Solid Colour-Overlays the background image

    • Overlay solid opacity

 

image-20241104-025113.png

 

image-20241104-022320.png
Homepage with 100% opacity the background image is no longer visible

 

image-20241104-032124.png
Booking page with 100% opacity the background image is no longer visible.

 

the image below shows the homepage and booking page with low overlay gradient opacity and overlay solid opacity.

image-20241104-031903.png
image-20241104-031815.png

  • Modal Backdrop Colour- Modifies backdrop coulour for modal, gallery, and drawer.

image-20241104-025216.png

 

 

image-20241104-025031.png
the image below is when selecting an image in booking page.

 

Backgrounds

  • Enable image background you can turn this on or off

  • Layout background colour

 

image-20241104-034253.png

 

image-20241104-034132.png
Homepage with the image background off.
image-20241104-034215.png
Booking page with the image background off.
image-20241104-034508.png
Homepage with the image background on

 

image-20241104-034540.png
Booking page with the image background on.

 

  • Content Background Colour-Modifies the site colour behind the cards and navigation in homepage and booking page.

image-20241104-035209.png

 

image-20241104-035144.png
Homepage screenshot

  • Background light colour-Background of popup Windows, availability calendar and picker, card stock, the Apply smart rule button, background of the pax name header for extras

image-20241104-035917.png

 

image-20241104-035902.png
Booking page date & fares windows pop-up

 

  • Tour Flow Stub Background Colour

image-20241104-053643.png

 

image-20241104-053557.png
Booking page screenshot.

Page Heading

  • Page Heading Colour- Changes the color of your Tours Page (Homepage)

  • Page heading Shadow Colour-applies shadow effect to the tittle

  • Heading Uppercase: You can choose ‘Normal’ to keep the heading as it is set up on the website, or select the ‘Uppercase’ option to automatically convert each letter to uppercase

  • Heading Font Weight- Page title normal or bold

     

image-20241104-054830.png

 

 

 

 

 

 

 

 

 

image-20241104-055539.png
The ‘tour name here’ was originally typed in lowercase on the website. However, since the Heading Uppercase option is set to ‘Uppercase,’ all the letters were automatically converted to uppercase.

Masthead

  • Logo Position-Modifies the size of your logo or site header

image-20241104-060350.png

 

 

 

image-20241104-060113.png
In this Homepage image the Logo Position is set to “Oversized”

 

  • Masthead Button Text Colour- changes the text color for Redeem, account name or login button, and cart button

image-20241104-060318.png

 

image-20241104-060307.png

 

  • Masthead Button Color- This option changes the color of the header button when you hover over it to select. It has two options Primary and white, If the primary option is set, it will use the color specified in the Global Colors > Primary Color section. Then selecting the “white” option will just make the selection turn white when selecting or hovering to the header button.

 

image-20241104-061240.png

 

 

image-20241104-061308.png

 

image-20241104-061120.png

  • Masthead Backgroud Colour and Opaacity- It modifies the site header and background colour

 

image-20241104-062125.png

 

 

 

 

 

image-20241104-062559.png
This is the homepage looks like Masthead set up and changed to 100% opacity.

Tour Information Header

 

  • Header Background colour & Header background Opacity-Modifies colour of the box that contains the Tour Name, Description and From-Price on the booking page

 

image-20241104-064153.png

 

image-20241104-064009.png
The image shows the booking page, and the opacity is set to 100%

 

  • Header Heading Colour- Modifies the Tour Name text colour

image-20241104-064527.png

 

image-20241104-064515.png
This image is from the booking page

 

  • Header Description colour- Modifies the tour description text colour

image-20241104-064845.png

 

image-20241104-064827.png
This image is from the booking page.

Header Text Shadows- Adds a shadow effect to the tour title and tour description, enhancing their visual appeal

NOTE THE DESCRIPTION FOR THIS SETTING IS INCORRECT. STEVE ALREADY CREATED A TICKET TO DEV OP TO CHANGE THIS.

image-20241104-065102.png

 

 

image-20241104-071904.png
On the booking page, both the Header Heading color and Header Description color were set to black to enhance the shadow effect for this setting

  • Enable Header Description- This option allows you to hide or show the tour description. It will display only the tour name, and you can customize its size using the Header Heading Size settings, which can be set to ‘Small,’ ‘Normal,’ or ‘Large.

 

image-20241104-072427.png

 

 

 

image-20241104-072507.png
This image is from the booking page the Header description is on and Header Heading Size is Large.

From-Price Circle Color- When you hover over the ‘From’ circle, its color changes based on the configured settings

 

image-20241104-072859.png

 

image-20241104-072847.png

 

Progress Nav

 

  • Circle Colour- Modifies the top progres bar unhighlighted circle colour

image-20241105-010514.png

 

image-20241105-010322.png

 

  • Line Colour- Top Progress bar unhighlighted line colour

image-20241105-010614.png

 

image-20241105-010556.png

  • Text Colour-Modifies top progress bar unhighlighted text colour

image-20241105-010846.png

 

image-20241105-010832.png

 

  • Highlight Line & Circle Colour- Top progress bar highlighted line and circle colour

image-20241105-011159.png

 

20241105-0110-50.0419100.mp4

 

  • Highlight Text Colour- Top progress bar highlighted text colour

image-20241105-011707.png

 

20241105-0116-05.0986010.mp4
The progress bar color changes as I move from choosing tour to reserving tour.

 

  • Hover Text colour- Top progress bar hover unhighlighted text colour

image-20241105-012050.png

 

20241105-0120-11.7775605.mp4
Play the video to see clearly the changes progress text colour

Tour Flow Nav

  • Tour Flow Nav- Modifies side progress bar unhighlighted circle, dotted line & text colour

image-20241105-012617.png

 

image-20241105-012554.png

  • Sidenav Highlight- Changes the color of side progress bar highlighted circle colour

image-20241105-012901.png

 

20241105-0128-18.0736507.mp4
The video showcasing the color changes progress bar circle.

  • Sidenav Highlight Text- Side progress bar highlighted text colour.

image-20241105-013134.png

 

20241105-0130-58.5645436.mp4
The video showcasing the color changes on the progress bar text

 

Alert Colours

  • Success colour- Modified badge backgroud colour when High-availability, icon colour for success messages

image-20241105-014242.png

 

 

20241105-0142-00.6385792.mp4

FOR FOLLOW UP

image-20241105-022252.png

 

 

  • Warning Colour- Adjusts the badge background or availability icon when it is low

image-20241105-021956.png
image-20241105-020849.png

  • Danger Colour- Adjusts the badge background or availability icon when No-availability. It also changes determine the colour for missing fields.

image-20241105-022010.png

 

image-20241105-021412.png
Image of the available tour when it is very low
image-20241105-021936.png
It highlight boxes in red if it is missing a required filed.

Footer Colours

To update the contact details displayed in the footer of your site, follow these steps:

  1. Navigate to Settings: Access the settings menu of your site.

  2. Select ‘Sites’: From the settings menu, choose the ‘Sites’ option.

  3. Go to the Contact Section: Within the sites settings, locate and select the ‘Contact’ section.

  4. Update Your Details: Fill in the necessary information such as your name, email address, and any other contact details.Once you’ve completed these steps, the updated information will be reflected in the footer of your site.

  • Footer Background Colour- changes the background of the footer of bottom part of tour site.

image-20241105-023510.png

 

image-20241105-023245.png

  • Footer Heading Colour- Modifies the site footer heading or the Primary contact name

image-20241105-024835.png

 

image-20241105-024824.png

 

  • Footer text colour- Changes the site footer non-heading text colour.

image-20241105-025436.png

 

image-20241105-025421.png

  • Footer Link Colour- site footer URL link and contact number text colour

image-20241105-025706.png