Creating a Booking Engine Theme

James Pumpelly -

Creating the Booking Engine Skin

  1. First create a folder named booking-engine.
  2. Go to your website and find a page you would like the booking engine to be themed after.
  3. Save the page that you find (CTRL+S) in the booking-engine folder. The “Save as type” should be: Web Page, Complete and you need to name the file index.html
  4. Now open up the booking-engine folder and you will see the index.html file and also a folder called index_files.  The index.html file has the html code for the page and the index_files folder holds any css files and images.
  5. Open the index.html file in Google Chrome(recommended) or your browser of choice.  Also open the index.html file in a text editor like Dreamweaver, Sublime Text, Notepad++ or your editor of choice.
  6. In your index.html file delete any scripts <script></script>. In your index_files folder you can also delete any .js files.
  7. In your index.html file make sure all links are absolute, including links for anchor tags <a></a>, css files <link></link>, and images <img></img>.  All ./index_files paths can be changed to just index_files. Also update any navigation links.
  8. In your index.html file delete any <input> tags.
  9. In your index.html file delete any dropdowns from the main navigation.
  10. In your index.html file delete any content in the main content area where you want the booking calendar to go.
  11. In that content area place this div:

<div style=”width: 960px;”>

                <div class="categoryHeadings_full" if="IsReservationPage">

                               <h1>Online Reservations</h1>

                </div>

                <div class="categoryHeadings_full" if="IsGiftCertificatePage">

                                <h1>Gift Certificates</h1>

                </div>

        <EngineContent/>

 </div>

  1. Save your index.html file and refresh the page in your browser to make sure nothing on the page has been broken.
  2. If you are missing images or fonts you will have to download those and save them in your index_files folder and update the file paths for those images or fonts.
  3. Next Delete any unnecessary css styles, or css files because these can interfere later on when we add the booking engine calendar. Make sure that you didn’t break the page by removing certain styles.
  4. Once you feel like you are happy with the way the theme looks zip up the booking-engine folder so that you can upload it to your account.

Uploading the Booking Engine Skin

  1. Login into http://cloud.rezstream.com
  2. Go to the Booking Engine Page
  3. Select 'Theme Customizations'
  4. Drag your booking-engine.zip file to the 'Upload Custom Skin File' field
  5. If the file fails to upload then you must have some errors and need to go through the steps above to make sure your theme meets those standards.
  6. If your theme is uploaded successfully then go to your booking engine URL and make sure it looks correct.
  7. If you need to make style changes and have uploaded a new theme but are not seeing the changes you made then you need to make sure you account for caching. 

Example:

If you are updating a css file or even and image you need to update the path of the css file or even an image file to account for caching.

 

Old Path <link rel="stylesheet" type="text/css" href="index_files/styles.css”>

New Path <link rel="stylesheet" type="text/css" href="index_files/styles.css?version1”>

 

By adding the ?version1 the changes to the css file will be recognized as a new file and the changes should now show up in your uploaded theme.  Now if you made changes again you would need to add ?version2 and every time you made changes make sure you change that version number. You can actually add anything you want after the ? but just make sure that it is different from the previous time you uploaded a theme.

 

Theming the Booking Engine using ThemeRoller

 

  1. The next step after you have uploaded your theme is to style out the actual booking calendar that will go within the theme skin we just created.
  2. Go to http://jqueryui.com/themeroller/
  3. Style all the elements to match the current website
  4. Once complete click the orange “Download theme” button
  5. Keep the version as is (ie: 1.11.4) and uncheck the "Toggle all"
  6. Click the Download button

 

Uploading the Custom Theme from Theme Roller

  1. Login into http://cloud.rezstream.com
  2. Go to the Booking Engine Page
  3. Select 'Theme Customizations'
  4. Click on the 'JQuery UI' button
  5. Drag your .zip file to the 'Upload JQuery UI Theme' field
  6. Go to your booking engine URL and make sure it looks correct
  7. Below are some style overrides that you will probably need in order to style out the theme more.  It is recommended that you put these directly in your index.html file to avoid caching issues.

Applying the Booking Engine CSS overrides

 

h2{ /*controls the H2 for the prices on the rooms*/

         font-size:18px;

         padding-top:10px;

}

h2.rs-content-header{/*controls the H2 for each section of the booking process*/

    display:block;

    padding:10px 0 0 0px;

    margin:0 0 5px 0;

    font-size:200%;

    font-size:18px;

    font-weight:bold;

         font-family: 'Lusitana', serif;

}

.rs-sidebar-inner-wrapper{ /*controls the right top box (arrive, depart, nights, rooms etc...)*/

    border-radius: 5px 5px 5px 5px;

    margin-top: 5px;

         color:#D0A55B;

         font-size:12px;

}

h2.rs-cart-header{ /*controls the right boxes on the confirmation page that hold the titles Rooms and Totals*/

    border-radius: 5px 5px 5px 5px;

    display: block;

    margin: 3px;

    padding: 3px;

    background:none;

    color: #5C0000;

         font-family: 'Lusitana', serif;

}

.rs-container{ /*controls both the left and right containers which hold the calendar and comfirmation boxes*/

    background:#283819;

    border:1px solid #5C0000;

}

.rs-content-wrapper{ /*controls ONLY the Left box which holds the calendar overide this if you want the left box background to be different from the right box*/

    background: none;

         border:none;

}

span.rs-calendar-icon, .rs-sc-field label span.rs-calendar-icon{ /*controls the booking engine calendar icon*/

    background: url(../images/mini_cal_icon.jpg) no-repeat;

}

.rs-cart-item-wrapper{ /*controls the items in under the rooms heading box*/

         color:#D0A55B;

}

.rs-step-nav{ /*controls the unselected step (the next step in the booking process*/

    background:#5C0000;

}

.rs-step-num{ /*controls the color on the number in the unselected step (the next step in the booking process)*/

    color: #5C0000;

}

.rs-step-outer{ /*controls the next step in the booking process*/

    color: #D0A55B;

}

.rs-here{ /*controls the current and past step in the booking process (i.e. dates, accommodations, confirmation*/

    background-color: #283819;

         border-color:#5C0000;

}

.rs-next-step{ /*controls the color of the arrow between each step*/

    border-left-color: #283819;

}

.rs-here .rs-step-name{ /*controls the current and previous step*/

    color: #D0A55B;

}

.rs-here .rs-step-num{ /*controls the color of the # in each step in the booking process*/

    color: #5C0000;

         border:1px solid #5C0000 !important;

}

.rs-min-stay{ /*controls the minimum stay required, MUST be overridden*/

    background:#9d753b !important;

    border: 1px solid #283819 !important;

    color: #ffffff !important;

    font-weight: normal !important;

}

.rs-footer-logo a{ /*controls the "Powered by RezStream" link at the bottom of the booking engine*/

         color:#000000;

}

.rs-view-switcher a{ /*controls the link that allow for a user to switch views, located at the top of the booking engine (Full Availability Search or Quick Booking Search) does not always need to be overridden*/

         color:#000000 !important;

}

/*.rs-ac-legend-table tr:nth-of-type(2) td:nth-of-type(2) {

         color:transparent;

}

.rs-ac-legend-table tr:nth-of-type(2) td:nth-of-type(2):before {

         content:"Available";

         color:#222222;

         display:block;

         margin:-1em 0em -8em 0em;

         padding-top:.5em;

}*/

.rs-content a{/*Controls ALL the links in the content on the left hand side*/

         color:#5C0000;

}

.rs-sidebar-wrapper a{/*Controls ALL the links on the rigth side bar*/

         color:#ffffff;

}

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.