Add Custom CSS to your Vantora Pages

What is Custom CSS?

CSS stands for Cascading Style Sheets. Style sheets are the way web pages are formatted. By changing a style sheet, you can change font colors, font faces, font weight, background colors and much, much more. There is an excellent online tutorial for style sheets at www.w3schools.com/css. On this page, we will not attempt to teach about style sheets, but instead just point out some of the simple changes people might make to change the look of their Vantora pages.

Below are a few basic examples. Obviously, there are lots of settings you can change. Just make sure that after you make your changes, you double check the look in both a computer and mobile view to make sure you don’t make fonts too large, a font face hard to read on mobile, etc.

How to Change your CSS file

To change your CSS file, go to Settings –> Registration –> Custom CSS. There, you will see a big empty box where you can add your custom CSS. You can click the preview button at the bottom to see how it will look in a preview before you save it. You can also save it, try it, and if something doesn’t look right, simply don’t enable it yet. When you are happy with the look, click to put a check in the Enable Custom CSS and then click Save at the bottom.

You will want to double check your CSS in multiple platforms – phones, tablets, PC, different browsers, etc., to make sure your changes look good across the different platforms.

Basic CSS for default small package Layout

div.package_container {
    border: 1px grey solid;
    border-radius: 1em;
    margin: 2px 15px 5px 15px;
}

div.package_head {
    background: gray;
    padding: 5px 10px;
    color:  white;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}

To the side is the basic CSS for the default small package layout for the actual box and title. In the first lines, it is  labeled: div.package_container.

You can see a grey border defined as:  border: 1px grey solid; a little 1em radius on the container: border-radius: 1em;

The top of the box is defined in: div.package_head gray background: background: gray; and the color, which is font color, is white: color: white;

Changing the CSS File

div.package_container {
    border: 1px #00f441 solid;
    border-radius: 0em;
    border-top-left-radius: 1.5em;
    border-top-right-radius: 1.5em;
    margin: 2px 15px 5px 15px;
    background-color: #eeefee;

}

div.package_head {
    background: #00f441;
    padding: 5px 10px;
    color:  #333333;
    text-shadow: 0px 0px 0px black;
    font-size: 22px;
    font-weight: 650;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
}
Booking package with custom CSS

By adding this CSS to the Custom CSS file, you have changed the color to #00f441, which matches the menu bar, on the package_container border, and the package_head background. Then, in the package_container div, you can set a background color of #eeefee, which gives it just a slight off-white look. You can change the font size up to 22 in the package_head, and make the color of the font dark – almost black (#333333) . If you think there is a bit too much rounding for the page format , you can change the radius to  .5em in both the package_container and the package_head.

Sample using a Gradient Top, white letters and a shadow on the title

In the div.package_head section you can see the linear-gradient code.

div.package_container {
    border: 1px #ff0000 solid;
    border-right-color: blue;
    border-radius: 0em;
    border-top-left-radius: 1.5em;
    border-top-right-radius: 1.5em;
    margin: 2px 15px 5px 15px;
    background-color: #eeefee;
}

div.package_head {
    background: #00f441;
    background-image: linear-gradient(to right, red,white,blue); 
    padding: 5px 10px;
    color:  #ffffff;
    text-shadow: 2px 2px 2px black;
    font-size: 22px;
    font-weight: 550;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
}

The div.waiverSection is the large container that holds all the reservation information. Here, you can see we gave it a light yellow background color by setting it to background-color: #fafbee; If for some reason you wanted it to be squared-off ends instead of rounded, you could set the border-radius: 0em; Note, this section will not show on your page if you are embedding onto your page. It is removed for the embedded versions so the registration appears more seamless on your site.

div.waiverSection {
    background-color: #fafbee;
}