Built by owners, for owners.

Getting Started

Core Concepts

Overview

Bookings & Quotes

Properties

Bookings

Quotes

Guests

Rates

Rules

Reviews

My Account

Messaging

Security Deposits

Insurance and Damage Protection

Taxes

Renter Agreements

Payment Processing

Dynamic Pricing Integrations

Widgets

Listing Site Integration

Property Management

Technical Stuff

Hosted Websites

WordPress Plugin

Door Locks

OwnerRez API

Other Integrations

Reporting

Verified Email Domains

Email Template Library

Data Management

QuickBooks Integration

Privacy & Security

Suppressed Email Addresses

Property Sharing

Channel Management

Page-Specific Help

Payment Processing

Testing

Change Log

2022

2021

2020

2019

Hosted Websites - CSS Magic

This page contains notes on CSS snippets that can be used in Hosted Websites to do various things.  You can also use a different set of CSS snippets to make changes to individual widgets that are in your own custom website, not a Hosted Website.

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.

Contents

Remove Rates

Rate Display options can also be adjust site-wide via Hosted Site Settings > Change Settings > Rate Display 

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 inaccurate.  To hide those sections, use the following CSS snippets:

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

a#rates-tab { 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; }

Multi-property sites > on the home page > the high/low amount that shows next to each property in the list

.multihome .property-result-list h3.pull-right {display:none !important;}

Multi-property sites > on the Properties page > the high/low amount that shows next to each property in the list

.multipropertyindex .property-result-list h3.pull-right {display:none !important;}

Single-property sites > on the home page > the "Rate" label and price range

.amenity-summary-rate { display: none; }

Remove Rates and Bedrooms from Map Page

.multimap #map-locations .map-property div span:nth-child(2) {display:none;}

Remove Cancellation Policy Display

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

Remove Description

.singlehome .amenity-description { display:none }

Remove "About The Owner"

.multiproperty .about-the-owner { display: none }

Remove Location (Map)

You may not want to show the "Location" section on your property pages which is the Google Map tile that shows in the middle.  To hide location/map, use the following CSS snippets:

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

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

Multi-property sites > on the individual property page > the location section (Google Map tile) that shows down under the availability calendar in the middle

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

Remove Property Info from Map Display

.multimap #map-locations .map-property div {display:none;}

Remove Sidebar from Map Display

.multimap #map-locations {display:none;}
.multimap .body-content .row .col-md-9 {width:100%;}

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 Property Search Result Count

If you want to show a simple list of the resulting properties without a numeric count, hide the count display.

.property-count {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 }

Changing secondary background color:

html.has-fullpage-background #content { background-color: #f00 !important }

Replace the hex code in the example with the desired color.

Hero Unit Slideshow Font Color

This turns the color black, but the hex code can be changed to any color.

#carousel-hero .carousel-caption h1 {color:#000000;text-shadow:0 0 3px rgba(255,255,255,1);}

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 tutorials: https://developer.mozilla.org/en-US/docs/Learn/CSS