Built by owners, for owners.

Getting Started

Recommended Reading

Overview

Bookings & Quotes

Properties

Guests

Quotes

My Account

Messaging

Email Template Library

Door Locks

Property Management

Reviews

Listing Site Integration

Widgets

Hosted Websites

Technical Stuff

Privacy & Security

Insurance and Damage Protection

Data Management

QuickBooks Integration

Rates

Rules

Security Deposits

Taxes

Payments

Dynamic Pricing Integrations

OwnerRez API

Other Integrations

Channel Management

Page-Specific Help

Testing

Change Log

Hosted Websites - CSS Magic

This page contains notes on CSS snippets that can be used in Hosted Websites to do various things.

WARNING: These are coding magic and are not guaranteed to be supported forever. We will attempt to keep this page up-to-date, and not to make changes to Hosted Website functionality needlessly, but this cannot be a promise.

CSS snippets can be added to your Hosted Website by navigating to Settings > Hosted Websites > click your website > Edit Theme/Layout button > CSS tab.  Just drop the code snippet on a separate line in the field block, and save.

Remove Rates

You may not want to show rates on your property pages.  For instance, you may use Spot Rates (PriceLabs, rate calendar editing, etc) and so the seasonal/average displays are correct.  To hide those sections, use the following CSS snippets:

Multi-property sites > on the individual property page > the "RATES" tab on the menu

a[href$="#rates"] { display:none !important; }

Multi-property sites > on the individual property page > the high/low amount that shows under the picture carousel

.multiproperty .body-content .col-md-8 > div:nth-child(5) { display: none; }

Multi-property sites > on the individual property page > the rate section (header and table) that shows down under the amenities towards the bottom

.multiproperty #rates { display: none; }
.multiproperty #rates + div { display: none; }

Remove Reviews

You may not want to show reviews on your property pages.  To hide reviews, use the following CSS snippets:

Multi-property sites > on the individual property page > the "REVIEWS" tab on the menu

a[href$="#reviews"] { display:none !important; }

Multi-property sites > on the individual property page > the reviews section (header and table) that shows down under the amenities towards the bottom

.multiproperty #reviews { display: none; }
.multiproperty div[data-widget-type=Reviews] { display: none; }

Remove Description

.singlehome .amenity-description { display:none }

Remove Inquiry Widget Dates/Size

Sometimes you just want a contact us form, without actually sending in a full inquiry. You can do this by editing the CSS on the inquiry/booking widget itself.

*NOTE* This must be set directly in the widget CSS, not on the hosted website CSS mentioned above. As such it will work for widgets regardless of wether you have a hosted website or not.

Also, if you use this option, make sure to turn off date validation in the widget settings!  Otherwise, the widget will reject every inquiry because it doesn't include any dates, but they can't include dates because you turned them off.

.date-holder,
.size-holder
{
display:none;
}

Page Backgrounds

Locking Photo Background on OR Hosted Web Pages - If you add a photo as the background on a page, and you want that photo to remain as the background even when visitors scroll down the page.

body { background-attachment: fixed !important }

Widget CSS Magic

Individual widgets have their own CSS which can be controlled, to affect how they display on the pages where they are used.  This is helpful for when Widgets are in use in sites other than an OwnerRez Hosted Website.

Ribbon Calendar Widget

Remove the Today/Holiday Legend

You may not use holidays so you don't want "today" and "holiday" legend to shown.  To remove the legend from the top-right corner, insert this CSS:

#legend {display:none;}

CSS Tutorials

If you don't know CSS and are curious, or know a bit and want to brush up, here are a couple of tutorial sites...

https://htmldog.com/guides/css/beginner/  -- has a good level of detail for a beginner, and they've got intermediate and advanced if you get fancy later 😉​

And the Mozilla site is a good reference and other tutorial: https://developer.mozilla.org/en-US/docs/Learn/CSS