Built by owners, for owners.

Getting Started

The Basics

Setting Up Your Account

Signing In

Recommended Reading

Bookings & Quotes

Properties

Guests

My Account

Settings

Email Template Library

Door Locks

Property Management

Reviews

Listing Site Integration

Widgets

Hosted Websites

Technical Stuff

Insurance and Damage Protection

Data Management

QuickBooks Integration

Rates

Security Deposits

Taxes

Dynamic Pricing Integrations

OwnerRez API

Channel Management

Channel Management

API Integrations

Calendar Import/Export

Channel Bridge

Page-Specific Help

Settings

Testing

Why Test?

Calendar Testing

Change Log

2020

2019

Hosted Website 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 + table { 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; }

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