Understanding the Skinning App & the Design of the Booking Engine
Booking Engine Users ONLY - The information below is for Partners using the Skinning App. The look and feel is what we refer to as the site's Skin, and the Design Interface is the Skinning/Branding section of the App The Skinning App can be accessed here https://skins.alliancereservations.com
This application allows access to all files that make up the Site (skin).
Only experienced designers with working knowledge in CSS and HTML should work in these files. Alliance Reservations Network is not responsible for any errors made by outside designers who access these files through the APP. Alliance will not fix errors made by an outside designer unless a custom work order is submitted to Alliance. The rate charged by Alliance to fix these errors is $125.00 per hour.
Always remember to keep local copies of any work done in the Skinning section of the Affiliate APP.
The Skin Design:
First, understanding the Skin. What you see is a basic layout of the V6 Booking Engine Skin. The Skin is made up of several different pieces that, when published, create the overall look. We include HTML files, CSS files, Config files, and images.
HTML: The HTML pieces are basic HTML include files that require basic HTML knowledge. Every include that is not currently already available in the Skins main Files directory can be found in the HTML. An example of what to name the file could look like "customize with subHeader.html in theme directory" in the HTML. By creating and publishing a file called "subHeader.html", this section of the HTML will be replaced by the HTML in said file.
CSS: The entire page and elements are controlled by CSS. You must have CSS knowledge to edit. For your reference, please review what a regular skin looks like without any css applied. Also, refer to the property page that has no css styling applied to it either. This can give you a better idea as to how much the css controls on the site.
To better accommodate cross browser functionality, we have specific hacks for both Internet Explorer and Web Kit (Safari/Chrome). When an element needs to be changed specific to Internet Explorer, simply add a .IE in front of the style in the style sheet.
Config Files: The Config files are files that can be added to the skin, and each perform a specific task. Read more about each .Config file and their function within the Site's Design.
Popular Design Methods: Please refer to top image for these specific examples. For specific Design Instructions, please visit the Design Instructions section.
header.html - The portion on top. You have the ability to edit as needed. footer.html (not pictured) - The portion at the bottom. You have the ability to edit as needed. Messagefile.html - Message files are a way to include specific information or images that you would like display on top of the search results. These files can be named what ever you feel like naming them. they must be .html files and will display on your page by adding the parameter &message=messagefilename. supportMessage.html - by adding this file to the skin you will overwrite the phone number displayed by default. Simply include the custom phone number on the first line of the html document and upload. rightNavSearch.html - you can add your own image/banners/info here. cssstyle.css - This is the style sheet controlling everything on the page. Edit to change Background colors, widths, heights, fonts, images. Everything you see on the page. title.txt - Controls the title of the page. Enter text to change the text displayed in the browser. description.txt - Controls the description of the page. Enter text to change description which displays next to the title.
The Skinning App:
Once you have logged in (using your Affiliate Admin login credentials) and verified that you are using the correct site id by choosing either the affiliate id or site id in the top right navigation, continue to the the design/branding section.
Always make sure that the correct theme is selected. The default theme is labeled standard. If you chose to add more themes, please refer to the documentation on Themes located on the previous Design/Branding section.
Now let's layout the Skinning App Skinning/Branding page. The two tabs on the right side of your screen "files" and "images" are all the files included in your Booking Engine Skin's Design.
Click each tab to view the contents of each.
The "files" tab contains all of the html, css, and .config files associated with the skin whereas the images tab contains all the images.
To edit any of the "files", simple click on the file name. In red, the app will let you know what file you are currently editing. The contents of the selected file will appear in the main "File Content" section. Edit as needed, click the Save Button when you have finished. Once all of your files are edited, simply click the Publish Button. You will see a "Loading Tab" come down from the top, once it has disappeared, your new Design is live.
Any questions or comments about the App, please fill out the "Feedback" form by clicking on the "Feedback" tab on the left side of the screen.
*Note - We recommend any partners use Firefox when designing the booking engine pages. Firefox offers a very good tool called Firebug that allows you to view a more visual way of editing the page's HTML/CSS. Read more about Firebug here.
Alliance has web developers on staff that can work with you to build a highly customized design that more closely matches your existing web site if you decide one of our existing designs just isn't suitable for your situation or if any of the Instructions on this page don't make sense to you. Itemized pricing for items listed o this page are outlined below, and any Custom Work contracted by Alliance Reservations will be charged at a rate of $125 an hour with a minimum of one hour.
See Room Details Button
Sold Out Label
Sort by Availability/Price
To initiate custom work, simply Contact Design with specifics involved in the project. The quote you receive will be based on the specifics given. Once you have been contacted by Design with a pre-filled form containing the quote for the Design work, please complete the form including all billing info. Custom work can begin shortly after billing info has been received. Personal instruction about any design questions from our team will also be considered Custom Work and billed at $125 an hour.