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; }
Single-property sites > on the home page > the "Rate" label and price range
.amenity-summary-rate { display: none; }
Remove Cancellation Policy Display
.multiproperty #rates + div + p { 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 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);}
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.
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 whether 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;
}
Remove Inquiry Widget Contact Info/Make A Quote Viewer
Sometimes you just want to show a quote, without a bunch of fields where the guest thinks they have to enter the contact info first. 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 whether you have a hosted website or not.
Also, if you use this option, you may want to set the "Quote Without Occupancy" option on the widget so it quotes immediately when dates are entered -- particularly if you have no guest fees so the quote will be the same regardless of number of guests selected.
#group-Name,
#group-Email,
#group-Phone,
#group-DiscountCode,
.comments-holder,
.book-button-holder,
.inquiry-button-holder
{
display:none
}
Change Book Now/Inquiry Widget Button Name
This changes “Search” to “Find Your Stay”. You can replace “Find Your Stay” with some other text if you prefer.
.btn[type=submit]:before {
content: "Find Your Stay!";
font-size: 14px;
}
.btn[type=submit] {
font-size: 0;
}
Change Book Now/Inquiry Widget "Properties" Dropdown Name
This changes “Properties” to "Packages”. You can replace “Packages” with some other text if you prefer.
.form-group label[for=PropertyKeyx] {
visibility: hidden;
}
.form-group label[for=PropertyKeyx]:before {
content:'Packages';
visibility: visible;
}
Calendar Widget
Shrink Widget Width
Sometimes, if you are including Rates on your Calendar Widget, the display gets wider, but your website doesn't automatically adapt to it and the edges are cut off. You can fix this with the following code:
.flex-calendar.has-rates .day-content
{
width: 28px;
overflow: hidden;
}
Ribbon Calendar Widget
Remove the Today/Holiday Legend
You may not use holidays so you don't want "today" and "holiday" legend to show. To remove the legend from the top-right corner, insert this CSS:
#legend {display:none;}
Reviews Widget
Change the color of the stars
.review-average > .review-average-stars { color: gold; }
.fas { color: gold; }
If you'd rather have some other color, use this online color picker to find one, and replace the word "gold" in the above code with the HTML hex code of your selection - the 7 character code starting with a pound sign # and followed by 6 more alphanumeric characters.
Hide the filter bar
.reviews-filter-bar { display: none }
Using a Custom Font in a Widget
To override fonts on a widget, you'll need a source for fonts such as https://fonts.google.com/
To get CSS from there:
- Pick the font and add the style
- Review the selected style and switch it to @import mode
- Copy the @import
So for example, for this font in the screenshot you'd end up adding this CSS to the widget:
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');
*
{
font-family: 'Akaya Telivigala', cursive;
}
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