Site Theme

Owned by support_howto
Last updated: 19 Nov, 2024
12 min read

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

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

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

Change Theme - Custom Themes

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

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

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

 

  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

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.

 

Global Colours

  • 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

 

 

 

 

 

 

Homepage screenshot below

 

 

 

 

 

 

 

 

 

 

Booking page screenshot below

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

Image below is the site preview after changing Secondary Colour.

 

.

 

 

 

 

 

 

 

 

 

 

 

 

  • 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

 

 

 

 

 

 

 

 

Homepage screenshot below

 

Booking Page screenshot below

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

 

 

 

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

 

  • 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.

Homepage image below

 

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

 

 

 

Homepage image below

Booking Page image below

 

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”

 

 

 

 

 

 

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

 

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

  • Overlay Solid Colour-Overlays the background image

    • Overlay solid opacity

 

 

 

 

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

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

 

 

 

Backgrounds

  • Enable image background you can turn this on or off

  • Layout background colour

 

 

 

 

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

 

  • 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

 

 

  • Tour Flow Stub Background Colour

 

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

     

 

 

 

 

 

 

 

 

 

Masthead

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

 

 

 

 

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

 

 

  • 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.

 

 

 

 

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