Experience the difference of "Elite".

Getting Started

Core Concepts

Overview

Bookings

Bookings & Quotes

Damage Protection

Data Management

Email Template Library

Guests

Hosted Websites

Integrations

Listing Site Integration

Messaging

My Account

Payment Processing

Privacy & Security

Properties

Property Management

Property Sharing

Quotes

Rates

Renter Agreements

Reporting

Reviews

Rules

Security Deposits

Suppressed Email Addresses

Taxes

Technical Stuff

Travel Insurance

Verified Email Domains

Widgets

WordPress Plugin

Channel Management

Integrations

OwnerRez API

Payment Processing

Testing

Change Log

2022

2021

2020

2019

Messaging - Theming

OwnerRez is designed to make communication with your guests easier and more effective.  A large part of doing this successfully is branding.  The Settings > Theming area provides a way to establish a consistent brand image:

  • Customizable headers and footers for your emails, legal agreements, and forms.
  • Customize your name, business name, and email return address used for guest communications, if you don't want to use the main information in your account profile.

Or, you can also use this area to establish an inconsistent brand image, by creating separate Themes for different properties or groups of properties in your OwnerRez account.

We've created a walk-through video about creating and using themes.  Before reading the rest of this article, watch this first:

Theme Creation

By default, OwnerRez creates one theme and applies it to all your properties.  For most clients, this is what you want - your business should have one identity.

This theme is displayed on the Theming page, and you can work with it by clicking on it.

To create another theme, click the "Add" button.  This invites you to enter a new set of name and contact information for your new theme, and a new logo.  Save your changes, and now there will be two themes listed on the main Theming page for you to work with.

To choose which theme should be used for which property, click the "Property Mapping" button.  This gives a list of all your properties, and for each one, a dropdown list of your available themes.  Choose the right theme for each property and Save your changes.

Customizing a Theme

Once you have selected a Theme to work on, the top section will display the contact information used for that particular theme and presented to the guests - names, emails, logos, etc.  If you have only one Theme, you cannot modify these settings here; you must modify them in your Profile (the little arrow drop-menu in the upper right corner of the OR screen.)  If you have more than one Theme, you can modify these settings right here.

Below the contact settings are areas to customize Headers and Footers for each of Emails, Forms, Legal Agreements, and (if you have the Property Management premium feature turned on) Owner Statements.  Each of these works exactly the same way: it is the standard rich-text editor used throughout OwnerRez.

Once you have entered information in a Header or Footer block, it will automatically be placed at the top or bottom of that type of communication display, as appropriate.

Theming templates

Make sure to paste the HTML Code in the HTML Section - NOT in the body of the document. Use the "< >" button in the editing menu to go to the HTML page.

NOTE: if at any time the logo looks too large on the Theming, you will need to manually decrease the size by dragging a corner to make it smaller. Make sure to view within a Template and on the Renter Agreement to confirm it is the appropriate size.

Templates:

Template 1 (Logo, Email, Phone, Website, Facebook)

Template 2 (Logo, Email, Phone, Website, Facebook, Instagram)

Template 1 (Logo, Email, Phone, Website, Facebook):

Under the Email section, click the Change button on the Footer and set the HTML source.

<div style="color: #999; font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">
<div style="padding-bottom: 12px;"><img style="border: none; height: 75px; vertical-align: bottom;" src="{MYLOGOIMGURL}" alt="{MYCOFULL} logo" /></div>
<div style="display: inline-block; float: left; border-right: solid 1px #b1b1b1; padding-right: 20px; margin-right: 20px;">Email or call:<br /><a href="mailto:{MYEMAIL}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-email.png" alt="{MYCOFULL} email icon" /></a> <a style="color: blue; margin-left: 5px;" href="mailto:{MYEMAIL}">{MYEMAIL}</a><br /><a href="tel:{MYPHONE}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-phone.png" alt="{MYCOFULL} phone icon" /></a> <a style="color: blue; margin-left: 5px;" href="tel:{MYPHONE}">{MYPHONEI}</a></div>
<div style="width: 325px; float: left;">Visit us online:<br /><a href="{MYURL}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-screen.png" alt="{MYCOFULL} website icon" /></a> <a style="color: blue; margin-left: 5px;" href="{MYURL}">{MYURL}</a><br /><a href="{MYFACEBOOK}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-fb.png" alt="{MYCOFULL} Facebook icon" /></a> <a style="color: blue; margin-left: 5px;" rel="noopener" href="{MYFACEBOOK}" target="_blank">Facebook</a></div>

</div>

<p>&nbsp;</p>

Then click Save to finish and go back to the theme.

Under the Forms section, change the Header to use this HTML source:

<div style="text-align: center;"><img style="border: none; height: 75px; vertical-align: bottom;" src="{MYLOGOIMGURL}" alt="{MYCOFULL} logo" /></div>

Click Save to finish.

Under the Forms section, change the Footer to use this HTML source:

<div style="text-align: center; color: #999; font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">
<div style="margin-bottom: 15px;"><img style="border: none; height: 60px; vertical-align: bottom;" src="{MYLOGOIMGURL}" alt="{MYCOFULL} logo" /></div>
<a href="mailto:{MYEMAIL}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-email.png" alt="{MYCOFULL} email icon" /></a> <a style="color: blue; margin-left: 5px;" href="mailto:{MYEMAIL}">{MYEMAIL}</a>&nbsp; | &nbsp;<a href="tel:{MYPHONE}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-phone.png" alt="{MYCOFULL} phone icon" /></a> <a style="color: blue; margin-left: 5px;" href="tel:{MYPHONE}">{MYPHONEI}</a>&nbsp; | &nbsp;<a href="{MYURL}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-screen.png" alt="{MYCOFULL} website icon" /></a> <a style="color: blue; margin-left: 5px;" href="{MYURL}">{MYURL}</a>&nbsp; | &nbsp;<a href="{MYFACEBOOK}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-fb.png" alt="{MYCOFULL} Facebook icon" /></a> <a style="color: blue; margin-left: 5px;" rel="noopener" href="{MYFACEBOOK}" target="_blank">Facebook</a></div>
<p>&nbsp;</p>

Click Save to finish.

Under the Legal Agreements section, change the Footer to use this HTML source:

<div style="text-align: center; color: #999; font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">
<div style="margin-bottom: 15px;"><img style="border: none; height: 60px; vertical-align: bottom;" src="{MYLOGOIMGURL}" alt="{MYCOFULL} logo" /></div>
<a href="mailto:{MYEMAIL}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-email.png" alt="{MYCOFULL} email icon" /></a> <a style="color: blue; margin-left: 5px;" href="mailto:{MYEMAIL}">{MYEMAIL}</a>&nbsp; | &nbsp;<a href="tel:{MYPHONE}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-phone.png" alt="{MYCOFULL} phone icon" /></a> <a style="color: blue; margin-left: 5px;" href="tel:{MYPHONE}">{MYPHONEI}</a>&nbsp; | &nbsp;<a href="{MYURL}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-screen.png" alt="{MYCOFULL} website icon" /></a> <a style="color: blue; margin-left: 5px;" href="{MYURL}">{MYURL}</a>&nbsp; | &nbsp;<a href="{MYFACEBOOK}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-fb.png" alt="{MYCOFULL} Facebook icon" /></a> <a style="color: blue; margin-left: 5px;" rel="noopener" href="{MYFACEBOOK}" target="_blank">Facebook</a></div>
<p>&nbsp;</p>

Click Save to finish.

NOTE: You will NOT be able to preview the headers and footers within this view. Save and close and then look at Templates, Legal Agreements, etc. to verify this has been done correctly.

Template 2 (Logo, Email, Phone, Website, Facebook, Instagram):

Under the Email section, click the Change button on the Footer and set the HTML source.

<div style="color: #999; font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">
<div style="padding-bottom: 12px;"><img style="border: none; height: 75px; vertical-align: bottom;" src="{MYLOGOIMGURL}" alt="{MYCOFULL} logo" /></div>
<div style="display: inline-block; float: left; border-right: solid 1px #b1b1b1; padding-right: 20px; margin-right: 20px;">Email or call:<br /><a href="mailto:{MYEMAIL}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-email.png" alt="{MYCOFULL} email icon" /></a> <a style="color: blue; margin-left: 5px;" href="mailto:{MYEMAIL}">{MYEMAIL}</a><br /><a href="tel:{MYPHONE}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-phone.png" alt="{MYCOFULL} phone icon" /></a> <a style="color: blue; margin-left: 5px;" href="tel:{MYPHONE}">{MYPHONEI}</a></div>
<div style="width: 325px; float: left;">Visit us online:<br /><a href="{MYURL}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-screen.png" alt="{MYCOFULL} website icon" /></a> <a style="color: blue; margin-left: 5px;" href="{MYURL}">{MYURL}</a><br /><a href="{MYFACEBOOK}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-fb.png" alt="{MYCOFULL} Facebook icon" /></a> <a style="color: blue; margin-left: 5px;" rel="noopener" href="{MYFACEBOOK}" target="_blank">Facebook</a><br /><a href="{MYINSTAGRAM}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://uc.orez.io/f/403ca624a1b3417f9e6052933606b966" alt="{MYCOFULL} Facebook icon" /></a> <a style="color: blue; margin-left: 5px;" rel="noopener" href="{MYINSTAGRAM}" target="_blank">Instagram</a></div>
</div>
<p>&nbsp;</p>

Then click Save to finish and go back to the theme.

Under the Forms section, change the Header to use this HTML source:

<div style="text-align: center;"><img style="border: none; height: 75px; vertical-align: bottom;" src="{MYLOGOIMGURL}" alt="{MYCOFULL} logo" /></div>

Click Save to finish.

Under the Forms section, change the Footer to use this HTML source:

<div style="text-align: center; color: #999; font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">
<div style="margin-bottom: 15px;"><img style="border: none; height: 60px; vertical-align: bottom;" src="{MYLOGOIMGURL}" alt="{MYCOFULL} logo" /></div>
<a href="mailto:{MYEMAIL}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-email.png" alt="{MYCOFULL} email icon" /></a> <a style="color: blue; margin-left: 5px;" href="mailto:{MYEMAIL}">{MYEMAIL}</a>&nbsp; | &nbsp;<a href="tel:{MYPHONE}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-phone.png" alt="{MYCOFULL} phone icon" /></a> <a style="color: blue; margin-left: 5px;" href="tel:{MYPHONE}">{MYPHONEI}</a>&nbsp; | &nbsp;<a href="{MYURL}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-screen.png" alt="{MYCOFULL} website icon" /></a> <a style="color: blue; margin-left: 5px;" href="{MYURL}">{MYURL}</a></div>
<div style="text-align: center; color: #999; font-family: Helvetica Neue,Helvetica,Arial,sans-serif;"><a href="{MYFACEBOOK}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-fb.png" alt="{MYCOFULL} Facebook icon" /></a> <a style="color: blue; margin-left: 5px;" rel="noopener" href="{MYFACEBOOK}" target="_blank">Facebook</a>&nbsp; | &nbsp;<a href="{MYINSTAGRAM}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://uc.orez.io/f/403ca624a1b3417f9e6052933606b966" alt="{MYCOFULL} Facebook icon" /></a> <a style="color: blue; margin-left: 5px;" rel="noopener" href="{MYINSTAGRAM}" target="_blank">Instagram</a></div>
<p>&nbsp;</p>

Click Save to finish.

Under the Legal Agreements section, change the Footer to use this HTML source:

<div style="text-align: center; color: #999; font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">
<div style="margin-bottom: 15px;"><img style="border: none; height: 60px; vertical-align: bottom;" src="{MYLOGOIMGURL}" alt="{MYCOFULL} logo" /></div>
<a href="mailto:{MYEMAIL}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-email.png" alt="{MYCOFULL} email icon" /></a> <a style="color: blue; margin-left: 5px;" href="mailto:{MYEMAIL}">{MYEMAIL}</a>&nbsp; | &nbsp;<a href="tel:{MYPHONE}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-phone.png" alt="{MYCOFULL} phone icon" /></a> <a style="color: blue; margin-left: 5px;" href="tel:{MYPHONE}">{MYPHONEI}</a>&nbsp; | &nbsp;<a href="{MYURL}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-screen.png" alt="{MYCOFULL} website icon" /></a> <a style="color: blue; margin-left: 5px;" href="{MYURL}">{MYURL}</a></div>
<div style="text-align: center; color: #999; font-family: Helvetica Neue,Helvetica,Arial,sans-serif;"><a href="{MYFACEBOOK}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://d7s1ale8wt1oe.cloudfront.net/icon-fb.png" alt="{MYCOFULL} Facebook icon" /></a> <a style="color: blue; margin-left: 5px;" rel="noopener" href="{MYFACEBOOK}" target="_blank">Facebook</a>&nbsp; | &nbsp;<a href="{MYINSTAGRAM}"><img style="vertical-align: middle; width: 17px; height: 17px; border: none;" src="https://uc.orez.io/f/403ca624a1b3417f9e6052933606b966" alt="{MYCOFULL} Facebook icon" /></a> <a style="color: blue; margin-left: 5px;" rel="noopener" href="{MYINSTAGRAM}" target="_blank">Instagram</a></div>
<p>&nbsp;</p>

Click Save to finish.

NOTE: You will NOT be able to preview the headers and footers within this view. Save and close and then look at Templates, Legal Agreements, etc. to verify this has been done correctly.

Property Management functions

If you are using our Property Management premium feature, you'll have additional Theming options:

  • Owner Statements