Page Comparison

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

...

You can update the Colour layout on your site. See below further information about each colour and where it updates on your site.

...

SITE THEME CATEGORIES

Expand

title	Global Colours Section

Global Colours

Primary Colour - Write an overview/caption here of what this updates on the site and capture of screenshot of the change

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

Expand

title	Layout Overlay

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.
Image Modified
Modal Backdrop Colour- Modifies backdrop coulour for modal, gallery, and drawer.
the image below is when selecting an image in booking page.
Image Modified

Expand

title	Backgrounds

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

...

Expand

title	Masthead

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

Expand

title	Tour Information Header

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 Added

Header Heading Colour- Modifies the Tour Name text colour

Image Added

Header Description colour- Modifies the tour description text colour

Image Added

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

Image Added

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 Added

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

Image Added

Expand

title	Progress Nav

Progress Nav

Circle Colour- Modifies the top progres bar unhighlighted circle colour

Image Added

Line Colour- Top Progress bar unhighlighted line colour

Image Added

Text Colour-Modifies top progress bar unhighlighted text colour

Image Added

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

Image Added

20241105-0110-50.0419100.mp4

Highlight Text Colour- Top progress bar highlighted text colour

Image Added

20241105-0116-05.0986010.mp4

Hover Text colour- Top progress bar hover unhighlighted text colour

Image Added

20241105-0120-11.7775605.mp4

Expand

title	Tour Flow Nav

Tour Flow Nav

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

Image Added

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

Image Added

20241105-0128-18.0736507.mp4

Sidenav Highlight Text- Side progress bar highlighted text colour.

Image Added

20241105-0130-58.5645436.mp4

Expand

title	Alert Colours

Alert Colours

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

Image Added

20241105-0142-00.6385792.mp4

FOR FOLLOW UP

Image Added

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

Image Added

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

Image Added

Expand

title	Footer Colours

Footer Colours

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

Navigate to Settings: Access the settings menu of your site.
Select ‘Sites’: From the settings menu, choose the ‘Sites’ option.
Go to the Contact Section: Within the sites settings, locate and select the ‘Contact’ section.
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.