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 #acd642 solid;
    border-radius: 0em;
    margin: 2px 15px 5px 15px;
    background-color: #eeefee;

}

div.package_head {
    background: #acd642;
    padding: 5px 10px;
    color:  #ffffff;
    text-shadow: 1px 1px 2px black;
    font-size: 22px;
    font-weight: bold;
    border-top-left-radius: 0em;
    border-top-right-radius: 0em;
}

Here is an example of some changes.



So by adding this CSS to the Custom CSS file, we have changed the color to #acd642, 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 white (#ffffff) and added a slight text-shadow to it as well. 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 0em.



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



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.


To demonstrate how much flexibility there is in CSS, you can see all the parameters that go into making the look of the time buttons. You can control everything from colors, font size, gradients, radius, shadows, and on and on.


.btn-primary  {
background-color: rgb(51, 122, 183);
background-image: linear-gradient(rgb(51, 122, 183) 0px, rgb(38, 90, 136) 100%);
background-repeat: repeat-x;
border-bottom-color: rgb(36, 85, 128);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 0.8px;
border-image-outset: 0;
border-image-repeat: stretch stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(36, 85, 128);
border-left-style: solid;
border-left-width: 0.8px;
border-right-color: rgb(36, 85, 128);
border-right-style: solid;
border-right-width: 0.8px;
border-top-color: rgb(36, 85, 128);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 0.8px;
box-shadow: rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.075) 0px 1px 1px 0px;
box-sizing: border-box;
color: rgb(255, 0, 0);
cursor: pointer;
display: inline-block;
font-family: Verdana, Arial, Helvetica, Times New Roman;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-optical-sizing: auto;
font-size: 14px;
font-size-adjust: none;
font-stretch: 100%;
font-style: normal;
font-variant: normal;
font-variant-alternates: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-variant-position: normal;
font-variation-settings: normal;
font-weight: 400;
line-height: 20px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 6px;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
text-transform: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
-moz-appearance: button;
-moz-user-select: none; 
}


All that to make a blue gradient button. If you want to change the colors, you just edit the settings, add this to your custom css if you want to change the time buttons.

You can see that in this CSS the color choices are done with the rbg(xx xx xx). You could choose to call standard colors, or use hex colors as well. This is an excellent resource for converting from one to the other format: https://convertingcolors.com/rgb-color-36_85_128.html


We will be adding additional notes on subtle changes you can make in the next few weeks.