Most Commonly asked CSS tweaks

To add the CSS scripts, please CLICK HERE and follow the steps to install the CSS Script.If you want to add a script to trigger on a specific page, please CLICK HERE and follow the steps.

Prevent copying content
Removal of sticky footer (Call Us button) in Mobile view
Removing Grayscale Filter from Logos
Trip details page > Remove grayscale from the related content units in the the sidebar
Trip details page > Remove black gradient overlay from related content units
Banner images > Remove black gradient overlay
Removing banner text
Removing the Book button from the Dates and Rates section
Increasing the width of the Variant column in the Dates and Rates section
Reduce the height of the trip banner image on mobile screens
Remove the duration, availability, and location section from the tour page
Increase the height of the trip banner image

Prevent copying content

The CSS script will be added to prevent copying content from the website. This will disable the functionality of selecting the text and copying it.

<style> html { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } </style>

The CSS script will remove the “Call Us” button displayed in the footer in the mobile view.

<style> .sticky-footer { display: none; } </style>

Removing Grayscale Filter from Logos

The CSS script will remove the grayscale filter from logos, and the logos will be shown in color.

<style> .section-type-accreditations .content .logo-item .logo { filter: none !important; } </style>

The CSS script is applied to display the tour cards and activity tiles in color, while also removing the overlay from the sidebar on the tour details page.

<style> .page-type-trip .popular-tours-widget .item { filter: none !important; -webkit-filter: grayscale(0%) !important; } .section-type-activities-we-provide .content .collection { filter: none !important; -webkit-filter: grayscale(0%) !important; } </style>

<style> .page-type-trip .popular-tours-widget .item { opacity: 1 !important; } .section-type-activities-we-provide .content .collection { opacity: 1 !important; } </style>

The CSS script will remove the black and image gradient overlay from the banner image.

<style> .section-type-banner.banner-slide .black-50-overlay { display: none; } .image-gradient-overlay { display: none; } </style>

Removing banner text

The CSS script will remove the banner text. Generally, it is not recommended from an SEO standpoint.

<style> .section-type-banner.banner-slide h1 { display: none; } .section-type-banner h1 { display: none; } </style>

Removing the Book button from the Dates and Rates section

The below CSS script will remove the Book button from the Dates and Rates section, which is enabled on the Tour page.

<style> .page-type-trip .dates-rates-section .dates-rates-section-container .dates-rates-listing-container .departure-info .action a.trip-book-btn { display: none; } </style>

Increasing the width of the Variant column in the Dates and Rates section

The below CSS script will increase the width of the Variant column in the Dates and Rates section, which is enabled on the Tour page.

<style> .tour-variant { width: 25%; } </style>

Note: Please adjust the width as per your requirement.

The CSS script below will reduce the height of the banner image on tour pages when viewed on a mobile screen.

<style> @media (max-width: 767px) { .page-type-trip .section-type-banner.bigger-slide { height: calc(100vh - 350px); } } </style>

Note: Please adjust the height according to your requirements.

Remove the duration, availability, and location section from the tour page

To completely hide this section from both mobile and desktop views, use the following CSS.

<style> .trip-line-items { display: none; }</style>

To remove this section only on mobile devices and keep it visible on desktops, you can use the following CSS.

<style> @media (max-width: 768px) { .trip-line-items { display: none; } }</style>

<style> .page-type-trip .section-type-banner { height: 540px; /* Adjust the height as per your requirements */ } </style>

Related articles