Creating a Custom Theme Tutorial

Watch our in depth video about how to take one of our standard themes and customize the CSS to match the look and feel of your website.

‍

This video creates two custom themes, using some custom CSS, which you can copy from here. Both themes start with our White 3.0 standard theme.

First custom theme - Wheeler on the Bay

‍

/* custom by john */
body, #wrap {background-color:inherit;}
.roomdescription {text-transform: none;}
.property_table_title {display:block;}
.propertytitle {background-color:#336699;}
.aditionalitems_title, .reservationsummary_title, .contactinformation_title, .paymentinformation_title, .confirm_title, .roomdetails_td table, .property_table_calsearch, .roomlistings, .calendar_table, .calboxes_booked, .moreinfo_td .roomfractionname  {background-color: #9ccdff !important;}
#header {background-color:#9ccdff;background-image:url(https://s3.amazonaws.com/rkv2/5942/594273202584958PM__wheeler3.PNG);  background-position11: left top; background-attachment111: fixed; background-size: cover;}}
#footer, #footer p {background-color:#293847;}
.numguests table {background-color:white !important;}
.selectnumguests_div table {background-color:white !important;}
.calfooter2 {background-color:#878767;}
.vr_propdescription td, .calnavlinks table  {background-color:white !important;}
.singleunitcal1 table {background-color:white !important;}
.singleunitcal2 table {background-color:white !important;}
.singleunitcal3 table {background-color:white !important;}
.pagetitle {display:none;}
.dpButton {background-color: #369;color: white;border-radius: 25px;cursor: pointer;}
.property_table_calsearch a { color: black !important; }
#calhead_instructions { color: #715f00 !important;}
.moreinfo_td a {margin-left:20px;font-size:12px;}

‍

Second custom theme - Camp Moose Trail

/* custom by john */
body, #wrap {background-color:inherit;}
.roomdescription {text-transform: none;}
.property_table_title {display:none;}
.propertytitle {background-color:#336699;}
.aditionalitems_title, .reservationsummary_title, .contactinformation_title, .paymentinformation_title, .confirm_title, .roomdetails_td table, .property_table_calsearch, .roomlistings, .calendar_table, .calboxes_booked, .moreinfo_td .roomfractionname  {background-color: #afbfa1 !important;}
#header {background-color:white;background-image:url(??);  background-position11: left top; background-attachment111: fixed; background-size: cover;}}
.numguests table {background-color:white !important;}
.selectnumguests_div table {background-color:white !important;}
.calfooter2 {background-color:#878767;}
.vr_propdescription td, .calnavlinks table  {background-color:white !important;}
.singleunitcal1 table {background-color:white !important;}
.singleunitcal2 table {background-color:white !important;}
.singleunitcal3 table {background-color:white !important;}
.pagetitle {display:none;}
.dpButton {background-color: #afbfa1;color: white;border-radius: 25px;cursor: pointer;}
.property_table_calsearch a { color: black !important; }
#calhead_instructions { color: #715f00 !important;}
.moreinfo_td a {margin-left:20px;font-size:12px;}
.roomlistings_div:hover {background-color: #cadfb7;cursor:pointer;}
.numguests table {background-color:white !important;}