Creating a Booking Engine Theme

rezStream's booking engine supports themes to ensure a seamless experience for your potential guests as they transition from your website to the reservation process.

rezStream provides a responsive theme that matches your website's look and feel at no extra cost. However, if you're looking for a more sophisticated design, you also have the option to create a custom booking engine theme, either independently or by enlisting rezStream's assistance for an additional fee. It's important to note that crafting a booking engine theme is a technically advanced task that requires proficiency in HTML and CSS. We strongly recommend collaborating with a professional for this endeavor.

For more information on developing and designing your own custom booking engine, please refer to the instructions below.

Creating the Booking Engine Skin
Uploading the Booking Engine Skin
Applying a jQuery UI Theme to the Booking Engine using ThemeRoller
Uploading the Custom Theme from Theme Roller
Style Overrides

Creating the Booking Engine Skin

First, create a folder named "booking-engine".
Go to your website and find a page you would like the booking engine to be themed after.
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
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.
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 Notepad, VS Code, Dreamweaver, Sublime Text, Notepad++, or your editor of choice.
In your index.html file delete any scripts (<script></script>). In your index_files folder, you can also delete any .js files.
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.
In your index.html file delete any <input> tags.
In your index.html file delete any dropdowns from the main navigation.
In your index.html file delete any content in the main content area where you want the booking calendar to go.
In that content area place this div:

<div>
    <div class="categoryHeadings_full" if="IsReservationPage">
        <h1>Online Reservations</h1>
    </div>
    <div class="categoryHeadings_full" if="IsGiftCertificatePage">
        <h1>Gift Certificates</h1>
    </div>
    <EngineContent/>
</div>

Save your index.html file and refresh the page in your browser to make sure nothing on the page has been broken.
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.
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.
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

Login into rezStream Cloud Login
Go to the Booking Engine Page
Select 'Theme Customizations'
Drag your booking-engine.zip file to the 'Upload Custom Skin File' field
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.
If your theme is uploaded successfully then go to your booking engine URL and make sure it looks correct.
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.

NOTE:

If you are updating a CSS file or even an image, you need to update the path of the file to account for browser caching (otherwise, browsers will continue to pull the old CSS file or image from their local caches).

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 CSS file (or image) will be recognized by the browser 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.

Applying a jQuery UI Theme to the Booking Engine using ThemeRoller

The Booking Engine uses some tools and components that are part of the jQuery UI framework (user interface elements like date pickers, tabs and accordion controls, etc.). These elements are styled using the ThemeRoller.

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.
Go to https://jqueryui.com/themeroller/
Style all the elements to match the current website
Once complete click the orange “Download theme” button
Keep the version as is (ie: 1.11.4) and uncheck the "Toggle all"
Click the Download button

Uploading the Custom Theme from Theme Roller

Login into rezStream Cloud Login
Go to the Booking Engine configuration section (using the left navigation)
Select Theme Customizations
Click on the JQuery UI button
Drag your .zip file to the Upload JQuery UI Theme field
Go to your booking engine URL and make sure it looks correct
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.

Style Overrides

In addition to the theming concepts above, Style Overrides provides a simple way to add additional CSS styling overrides without having to update and re-upload your theme. This also allows you to keep the Booking Engine-specific styles isolated and separate from your theme.

Some commonly overridden elements and CSS classes within the Booking Engine theme:

/* The H2 at the top of each page of the booking process */
h2.rs-content-header{
}

/* Inner wrapper around the entire sidebar (on the right hand side) */
.rs-sidebar-inner-wrapper{ 
}

/* Controls the cart headers in the side bar (on the right hand side) */
h2.rs-cart-header{ 
}

/* General purpose wrapper that controls both the left and right side containers */
.rs-container{ 
}

/* Wrapper for the content portion of the BE (on the left hand side) */
.rs-content-wrapper{ 
}

/* Wrapper for the items in the cart (on the right hand side after adding a unit/pos/package to your booking) */
.rs-cart-item-wrapper { 
}

/* Inner wrapper for the step navigation at the top of the BE */
.rs-step-nav{ 
}

/* Controls the number in the next step(s) in the step navigation at the top of the BE */
.rs-step-num{ 
    color: #5C0000;
}

/* Controls the next step(s) in the step navigation at the top of the BE */
.rs-step-outer{ 
}

/* Controls the arrow between each step in the step navigation at the top of the BE */
.rs-next-step{ 
}

/* Controls the current step styling (you are here) in the step navigation at the top of the BE */
.rs-here{ 
}

/* Controls the current step name (you are here) in the step navigation at the top of the BE */
.rs-here .rs-step-name{ 
}

/* Controls the current step number (you are here) in the step navigation at the top of the BE */
.rs-here .rs-step-num{ 
}

/* Controls the "Powered by RezStream" links at the bottom of the booking engine */
.rs-footer-logo a{ 
}

/* Controls ALL the links in the content (on the left hand side of the BE) */
.rs-content a {
}

/* Controls ALL the links on the side bar (on the right hand side of the BE) */
.rs-sidebar-wrapper a{
}