Join
OwnerRez
Websites » Hosted Websites
Updated 3 months ago

Hosted Website Customizations using 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

 

Add a Button to Link to Another Page

Users can change the "Click Here" text.

<button class="GFG" onclick="https://www.UrlLinkHere.com/;">Click Here</button></a></strong></p> 

Amenities Table Row Striping

Users may wish to add or override the colors of the Row (or Zebra) Striping to their Amenities table which is on the Theme/Layout page. 

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: aliceblue;
}

Users can change the color (aliceblue in the example above) to their desired color.  Try the above first before reapplying all the content background, use the !important directive when something doesn't work as it forces an override regardless of precedence

To change the font color of the Row (or Zebra) Striping to their Amenities table, add the following:

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: aliceblue;
  color: black;
}

Make sure to replace the value (black in the example above) with the color you want.

Customize Photo Caption Display

For hosted websites, you can customize the look and feel of the caption line on photos using something like this:

#lightSlider .caption { 
  background-color: rgb(155 143 130 / 65%); 
  padding-top: 5px; 
  padding-bottom: 5px;  
}

Adjust Header Logo Size

Users may wish to adjust the logo size on their Hosted Website header. To make your header logo larger:

.header-line .navbar-brand.has-brand-image { height:120px; }

Users can play with the number to get it to the desired size. Note that users cannot adjust the Header Logo when the "spill" setting is enabled.

Adjust Logo Width

Sometimes, logos are too wide and cover other menu items, resulting in other links becoming hidden and inaccessible. 

.header-logo {
    max-width: 400px !important;
}

Change Background Color and Transparency of Search Bar

 .search-bar {background-color: rgba(255, 255, 255, 0.05);}

Change the Color of the Site Menu Lines for Tablet and Phone Views

.glyphicon
 { color: pink;}

Change the Font Size on Photo Captions for Phone View

Adjust font-size: 10px to desired size

@media only screen and (min-width:10px) and (max-width: 500px) {
.thumbnail .caption-overlay 
{font-size: 10px;}
}

Change "Sleeps" to "Sleeps up to"

Single property:

<script>
    window.addEventListener('load',() => {
        $(".amenity-summary-size").text($(".amenity-summary-size").text().replace("Sleeps", "Sleeps up to"))
    });
</script>

Multi-property:

$(".amenity-summary-size").each(function () { $(this).text($(this).text().replace("Sleeps", "Sleeps up to")) })

HTML option:

Add the following code to the footer tab of the Theme and Layout of your hosted website.

<script>
if (document.readyState !== 'loading') {
    $(".amenity-summary-size").each(function () { $(this).text($(this).text().replace("Sleeps", "Sleeps up to")) });
}
else {
  window.addEventListener('load',() => {
        $(".amenity-summary-size").each(function () { $(this).text($(this).text().replace("Sleeps", "Sleeps up to")) });
    });
}
</script>

Change "About the Owner" text to just "About"

Add the following to the property/properties page.

<script>
    window.addEventListener("load", (event) => {
      const titleElement = document.querySelector("div.about-the-owner h2.page-header");
      if (titleElement !== null) {
          titleElement.innerText = "About";
      }
    });
</script>

Enlarge Business Name that has no Logo

If users do not use a logo but wish to enlarge the appearance of their business name.

.header-line .navbar-brand:not(.has-brand-image) { font-size:20px; }

Float Center Header Text to the Left

.header-line-section {
    font-family: arial, Helvetica, sans-serif;
    font-size: 16px;
    text-align: left;
    }

.header-line-section. section-center.section-links {
   text-align: left;
   font-size: 24px;
}


.header-bar .header .header-line .header-line-section {
    flex: 41 auto;   
    415 width: unset;
    text-align: left;
}
.header-line-section. section-left{
}

Increase Center Header Font Size

#header-bar .header .header-line .header-line-section {
   width: unset;
}
Increase Size of the Dropdown Arrow/Caret on Site Menu
li.dropdown.header-links-menu .caret { border-width: 6px; }

Increase Font Sizes

h1 {
  font-size: 50px;
}
body {
  font-size: 200%;
}
p {
  font-size: 20px;
}

Move Headers Above Individual Items and Shifts Everything to the Left

Eliminate scrolling on mobile view. Add the following to the CSS section on the Theme & Layout page.

@media only screen and (max-width: 600px) {
   #amenities-table tbody tr {
       display: block;
   }

   #amenities-table tbody th,
   #amenities-table tbody td {
       display: block;
       width: 100%;
       text-align: left;
   }
}

Remove Rates

Rate Display options can also be adjusted site-wide via Hosted Site Settings > Change Settings > Rates Display > None. 

There are also options on the widget settings to hide or show these values by navigating to your Multi-property sites > Properties page > Availability/Property Search Widget > Change Settings > Rates > and select Hide rates.

You may not want to show rates on your property pages.  For instance, you may use Spot Rates (PriceLabs, rate calendar editing, etc), so the seasonal/average displays may be 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(3) { 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 Amenities

Users can remove amenities by navigating to Settings > My Website > Hosted Website > Theme & Layout (top right) > Head tab and insert the following script.

<script>
   window.addEventListener('load',() => {
$('[href="#amenities"]').parent().hide();
$("#amenities").hide();
$(".amenities-detail").hide();
   });
</script>

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"

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

Remove Border Around Calendar in Availability Search Bar

.search-bar a.btn.btn-default { border: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}

Remove the Word “Any” From the Search Bar

<script>
   window.addEventListener('load',() => {
// Find any select option tags that start with "Any " and cut that text out
$('option:contains("Any ")').each(function(i) { $(this).text($(this).text().replace("Any ", "") ) })
});
</script>

Page Backgrounds

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);}

Hero Unit Slideshow Font Size

This changes the size of the text to any set number.

.carousel-caption {font-size: 80px;}

Hero Unit Caption Font Color

You can change the color of the caption text. The following will change the text color to gray:

.carousel-caption > h1 {
    color: #777777;
}

Hero Unit Caption Location

To move the text below the picture, use the following:

.carousel-caption {
    top: 100%;
    left: 0;
    right: 0;
}
.carousel {
    margin-bottom: 100px;
}

Prevent Google from Indexing Website

Usually, you want your Hosted Website to be as visible as possible on the Internet, and findable by Google and other search engines. That's kind of the whole point.

There are however rare cases where you want a private website, available only to those who know where to find it. You want it to be invisible to Google and other search engines.  To do this, enter the following code in the HEAD area of your website (NOT the CSS area!)

<meta name="robots" content="noindex, nofollow" />

More information on where to find this location.

Adjust Logo Size

Sometimes, brand logo image containers overlap menu links, rendering those covered links inaccessible. 

Add the following to adjust the size of your brand logo image. You may have to adjust the height and width, and we recommend that you test it on various devices with different screen sizes to verify that it works properly.

​/*BeginTemplate*/
.header-line .navbar-brand.has-brand-image {
    height:80px;
    width:40px;
}
.header-links a {
    text-transform: none !important; 
    font-weight: 800 !important;
}
/*EndTemplate*/

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