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>

Removal of sticky footer (Call Us button) in Mobile view

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>

Trip details page > Remove grayscale from the related content units in the the sidebar

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>

Trip details page > Remove black gradient overlay from related content units

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

Banner images > Remove black gradient overlay

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.

Reduce the height of the trip banner image on mobile screens

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>

Increase the height of the trip banner image

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

Related Articles
How to install custom CSS in Vacation Labs and its caveats
Important caveats - before you begin There is no support for custom CSS and there is no guarantee that your custom CSS will continue to work as the platform evolves and new features are released. Since Custom CSS scripts are installed by customers ...
Can we customise the website themes?
Website themes or templates though limited are customizable only on request. To understand more about the extent of customization and its limitations, please reach out to our support team by dropping us an email on support@vacationlabs.com. All ...
How to add users or team members to your account?
Your Subscription Plan allows you to give access of your Vacation Labs admin panel to your team members. You can add them as USERS and control their Access Rights. To add a USER please follow the steps shown below: Go to SETTINGS > USERS & ...

Most Commonly asked CSS tweaks

Most Commonly asked CSS tweaks