Add Custom CSS to your Vantora Pages

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 on line tutorial for style sheets at www.w3schools.com/css so 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.

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. Then you can hit the preview button at the bottom and 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 hit 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.

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;
}

The above is the basic CSS for the default small package layout for the actual box and title. In the first lines, we see if labeled: div.package_container

Here we can see defined a grey border: 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;

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
So by adding this CSS to the Custom CSS file, we have changed the color to #00f441, which matches our menu bar, on the package_container border, and the package_head background. Then in the package_container div, we set a background color of #eeefee which you can see gives it just a slight off white look. We changed the font size up to 22 in the package_head, and made the color of the font dark – almost black (#333333)  Also, I thought there was a bit too much rounded going on for our page format so you can see in both the package_container and the package_head, we changed the radius to .5em.

Here is a 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 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;
}

X