This guide will walk you through the process of applying our custom styles to your Webhotelier booking engine.


Step 1: Add Custom Font Scripts

  1. Navigate to Setup > Template > General.

Image Placeholder

  1. Scroll down to the Custom Scripts section.

  2. Paste the script provided for 'Custom Scripts'

  3. Ensure that the 'Expand room photo to cover rates in availability' option is unchecked in the General tab.

Image PlaceholderUnchecked option



Step 2: Add Custom Styles

  1. Go to the Theme tab.

Image Placeholder

  1. Locate the following code blocks:

    • Append CSS (Desktop)
    • Append CSS (Mobile)

  2. If there's existing content in these blocks, make sure to save it in a separate document as a backup, before proceeding.

  3. Replace the content of each block with the corresponding CSS file:

    • For Append CSS (Desktop) use the content of the file with 'desktop' description:

    • For Append CSS (Mobile), use the content of the file with 'mobile' description


Step 3: Save Changes

  1. After adding the custom styles, click the Save button at the top left of the page to apply your changes.

Image Placeholder

Final Checks

Your Booking Engine Skin is now updated with the new customizations. Please review the changes to ensure everything looks correct.

If you notice any discrepancies or need further adjustments, please let us know! Some settings in your environment may differ from our demo setup, potentially requiring additional styling iterations.