Comprehensive Tutorial on Making a Custom Theme for Reservation Page to Match Website Look and Feel

Creating and Customizing Reservation Page Themes

This guide walks through how to create a custom theme in ReservationKey to match your website’s design and branding. It covers adding a logo, adjusting colors, using background images, working with CSS, and previewing the theme across different screen sizes. The examples below come from two real client projects.

Overview

ReservationKey allows full customization of booking page themes. You can adjust colors, layout, and branding elements to make the booking experience feel like an extension of your own website. These changes are made through the Themes section and can be easily reused across multiple reservation pages.

Example: Matching a Client’s Website

In this example, the client’s website features a clean, modern look with blue and white tones and rounded photo corners. The goal is to make the ReservationKey booking page reflect the same visual style.

Steps to Customize the Theme

Start by duplicating one of the default themes — for example, White 3.0.
Rename it to something like White 3.0 by John to help track who created it.
Apply this theme to the desired reservation page (select it at the bottom of the reservation page setup screen).
Add your client’s logo to the header website message. Use an HTML image tag and link it to the main website, opening in a new tab (target="_blank").
Include the logo on the request confirmation and payment page messages so it appears throughout the booking flow.

Adding a Background Image

You can enhance your booking page by adding a background image that matches the client’s website.

Capture a suitable image or section from the website.
Upload it to your ReservationKey account under the theme’s settings.

In the theme CSS, set the image as the background for the header section:

header {
  background-image: url('/images/background.jpg');
  background-size: cover;
}

Inspect elements using the browser’s developer tools (press F12) to confirm you’re modifying the correct section.

Making Color and Layout Adjustments

To maintain a clean structure, add your custom CSS at the bottom of the theme editor. CSS cascades from top to bottom, so styles defined at the bottom override earlier ones.

Common adjustments include:

Background color – match to your site’s header or footer color.
Text and button colors – use your website’s accent colors (e.g., dark blue or green instead of pink).
Hover colors – define how buttons or links change on hover for a cohesive user experience.
Full-width photos – remove max-width settings so room photos can fill the available space.

Example custom CSS section:

/* Custom overrides */
.property-title { background-color: #4a8bb5; color: white; }
.reserve-button input { background-color: #4a8bb5; border-radius: 25px; cursor: pointer; }
.calendar { background-color: #e6f0f8; }

Testing Colors and Styles

You can experiment directly in your browser using the Inspector (F12). Select an element, try different colors, and then copy those color codes into your theme once you’re satisfied.

For hover colors or specific elements (like buttons), look for their class names, such as .reserve-buttons input:hover, and add your preferred color values. Example:

.reserve-buttons input:hover {
  background-color: #355f85;
}

Advanced Adjustments

Here are a few additional CSS tricks used during theme customization:

Use cursor: pointer; to make clickable areas more intuitive.
Increase border-radius for rounded buttons and modern visuals.
Apply !important to force styles to override other CSS rules.
Change background colors or hover effects to match your client’s brand palette.

Example: Updating Calendar and Form Colors

When redesigning a second client’s theme, the process was similar but adapted for a different color scheme (greens and yellows instead of blues).

Sample colors directly from the client’s website using a color picker tool.
Replace older blue tones with matching greens using Find & Replace in the theme editor.
Update button hover and border colors to complement the brand’s yellow accents.

Example replacements:

#dff (light blue) ? #b2c9a5 (sage green)
#ff66a1 (pink) ? #f7b733 (yellow)
#0077cc (blue) ? #557a46 (dark green)

Adding the Client Logo to All Pages

For consistency, the logo should appear at the top of:

Reservation Page Header
Request Confirmation Page
Payment Page
Payment Confirmation Page

Example HTML snippet:

<center>
  <a href="https://clientwebsite.com" target="_blank">
    <img src="/path/logo.png" style="max-width:200px;width:100%;" />
  </a>
</center>

Previewing the Theme on Different Devices

Always test your custom theme for mobile responsiveness:

Open Firefox or Chrome Developer Tools (F12).
Switch to Responsive Design Mode.
Preview the page across different screen sizes (iPhone, iPad, etc.).
Ensure images, buttons, and text scale properly.

Full-width photos and simplified layouts generally work well on mobile screens, providing a consistent look and feel across devices.

Tips for Reuse and Maintenance

Keep all your custom code grouped at the bottom of the theme for easy copying between projects.
Use clear comments to mark what each section controls.
Revisit your color scheme and layout occasionally to align with website updates.
Test hover states, link colors, and popup windows to ensure readability and visual balance.

Summary

By customizing ReservationKey themes, you can closely match your booking page to your website’s design. The process involves duplicating a theme, adding your logo and background image, modifying CSS colors, and adjusting spacing or responsiveness. Keeping changes at the bottom of the CSS ensures they override defaults and can easily be reused for other clients or projects.

With a bit of experimentation using browser developer tools, it’s easy to fine-tune colors, hover effects, and spacing to create a polished, modern booking experience that fits perfectly with your brand.

Video Library