This page contains notes on CSS snippets that can be used in Widgets to do various things. You can also use a different set of CSS snippets to make changes to your 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 Widget functionality needlessly, but this cannot be a promise.
Individual widgets have their own CSS which can be controlled, to affect how they display on the pages where they are used. CSS snippets can be added to your Widgets by navigating to Settings > Widgets > click the desired Widget > Change button > scroll down to the CSS field. Just drop the code snippet on a separate line(s) in the field block, and save.
Contents
- Book Now/Inquiry Widget
- Remove Dates/Size
- Remove Contact Info/Make A Quote Viewer
- Change Button Name
- Change "Properties" Dropdown Name
- Remove Comments Field and Inquiry Button
- Change Discount Code Name
- Adjust Input Borders and Backgrounds
- Change Comments/Questions field to ask a specific question
- Hide Dates and/or Number of Guests Field on the Inquiry Form
- Calendar Widget
- Ribbon Calendar Widget
- Reviews Widget
- Availability/Property Search Widget
- Javascript
- General
- CSS Tutorials
Book Now/Inquiry Widget
Remove 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 settings. 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,
#group-DiscountCode
{
display:none;
}
Remove 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 settings. 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 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 "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;
}
Remove Comments Field and Inquiry Button
This results in a pure "book now" form, no inquiries or questions allowed.
.comments-holder,
.inquiry-button-holder
{
display:none
}
Change Discount Code Name
If you are using Discount Codes and that field is included in your Book Now form, but you want to call them something else like "Promotion Code":
label[for=DiscountCode] {
visibility: hidden;
}
label[for=DiscountCode]:before {
content: "Promotion Code";
visibility: visible;
}
Adjust Input Borders and Backgrounds
You can use this code as a starting point for adjust the backgrounds and borders of the form inputs.
.form-control {
background-color: #ffffff;
border-color: #cccccc;
}
.input-group-addon {
background-color: #f1f1f1;
border-color: #cccccc;
}
.btn-default {
background-color: #f1f1f1;
border-color: #cccccc;
font-weight: bold;
}
.form-group>label {
font-weight: bold;
}
Change Comments/Questions field to ask a specific question
.comments-holder :before {
content: "What brings you to the area, why this property?";
font-size: 14px;
}
Add to the widget loaded section.
.comments-holder {
font-size: 0;
}
Hide Dates and/or Number of Guests Field on the Inquiry Form
Be sure the widget is set to allow inquiries without dates or hiding the dates will just create an unusable form.
.date-holder { display: none; }
.size-holder { display: none; }
Calendar Widget
Shrink 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;
}
Change Color for Past Dates
We use a color based on the blocked color to show past dates and other out of range dates. If you want to set your own color, use with the following code.
"#999999" is just a medium gray, but you can change that to something else. Go to Hex Color Picker to find a color you like. Copy the "HEX" value for your color, and replace the "#999999" with your color HEX (be sure the # sign is present after changing the value).
.flex-calendar .flex-calendar-out-of-range {
background: #999999 !important;
}
Change Color of Calendar Header and Border
.dayNames{
background-color: red !important;
}
.container-or {
border-color: red !important;
}
Default No CSS:
With CSS Applied:
Ribbon Calendar Widget
Remove 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 Star Color
.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.
Change Font Color
/* Change the text color of the element with the class 'review-item-by-line' */
.review-item-by-line {
color: #3498db; /* Text color (replace hex code with your desired color) */
If you'd rather have some other color, use this online color picker to find one, and add the Hex code after the "color: #" text.
Hide The Filter Bar
.reviews-filter-bar { display: none }
Change your Reviews Rating
Navigate to your Reviews widget (Settings > My Website > Hosted Website > your Hosted Website > Reviews webpage > Reviews Widget > Change Settings > Options > CSS) and add the following to the CSS section. Replace the number 9 within the line, "content:"9"; with the number reviews rating you wish to display.
div.review-average-number {
visibility: hidden;
}
div.review-average-number::after {
visibility: visible;
width: 50px;
height: 50px;
margin-right: 20px;
border-radius: 50%;
background-color: #eee;
border: 1px solid #ccc;
box-shadow: 0px 0px 3px #ccc;
content:"9";
left: 0;
top: 0;
position: absolute;
}
Change Review Responses to Always Display Your Company Name
Follow the instructions in the Culture and Translations section of the Widgets Common Issues & Questions support article.Availability/Property Search Widget
Clear Button Background Color
.btn-default {
background-color: #2BD5FF;
border-color: #cccccc;
font-weight: bold;
background-image: none;
}
Change Font Color
.property-result-list.property-result-tiles .property-result-tile {color:white;}
Change Hover Tooltip Text
.popover-content
{
visibility: hidden;
}.popover-content:after
{content:'Total includes fees and taxes';
visibility: visible;
display: block;
position: absolute;
top: 9px;
}
Javascript
Require children and pets on Booking/inquiry widget
<script>
window.addEventListener('load', () => {
document.getElementById("Children").required = true;
document.getElementById("Pets").required = true;
});
</script>
General
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
If you are working on modifying CSS in the widgets, in order to promptly see your changes, you will likely need to turn off caching in your browser settings. Otherwise your changes will not be loaded into your browser and you'll think you didn't do anything, when in fact you did. Each browser is different but all have this capability, which an Internet search will find instructions for.