Showcase IDX offers banners, or ribbons, that you will see on listing cards on hot sheets and on your main search page. Each one is easily changed with the following code:
Tip
Place the desired code(s) in the Custom CSS box under Settings > Design. You must clear your caches, then check your web page in an incognito browser to see the change!
New Listing Banner
- Background color *To change the background color of New Listing banner:
.sidx-ribbon.sidx-new-listing {
background: #hexcode !important;
} - Font Color
*To change the font color of New Listing banner:
.sidx-ribbon.sidx-new-listing {
color: #hexcode !important;
} - Remove Banner
*To remove New Listing banner:
.sidx-ribbon.sidx-new-listing {
display: none !important;
}
Featured Listing Banner
To enable the Featured Listing Banner, refer to the Display Settings article. (This feature is for Premium plan customers only)
- Background color *To change the background color of Featured banner:
.sidx-ribbon.sidx-featured {
background: #hexcode !important;
} - Font color
*To change the font color of Featured banner:
.sidx-ribbon.sidx-featured {
color: #hexcode !important;
} - Remove Banner
*To remove Featured banner:
.sidx-ribbon.sidx-featured {
display: none !important;
}
Foreclosure Banner
- Background color *To change the background color of Foreclosure banner:
.sidx-ribbon.sidx-foreclosure {
background: #hexcode !important;
} - Font color
*To change the font color of Foreclosure banner:
.sidx-ribbon.sidx-foreclosure {
color: #hexcode !important;
} - Remove Banner
*To remove Foreclosure banner:
.sidx-ribbon.sidx-foreclosure {
display: none !important;
}
Open House Banner
- Background color *To change the background color of Open House banner:
.sidx-ribbon.sidx-open-houses {
background: #hexcode !important;
} - Font color
*To change the font color of Open House banner:
.sidx-ribbon.sidx-open-houses {
color: #hexcode !important;
} - Remove Banner
*To remove of Open House banner:
.sidx-ribbon.sidx-open-houses {
display: none !important;
}
Short Sale Banner
- Background color *To change the background color of Short Sale banner:
.sidx-ribbon.sidx-short-sale {
background: #hexcode !important;
} - Font color
*To change the font color of Short Sale banner:
.sidx-ribbon.sidx-short-sale {
color: #hexcode !important;
} - Remove Banner
*To remove Short Sale banner:
.sidx-ribbon.sidx-short-sale {
display: none !important;
}
Price Change Banner
- Background color *To change the background color of Price Change banner:
.sidx-ribbon.sidx-price-drop {
background: #hexcode !important;
} - Font color
*To change the font color of Price Change banner:
.sidx-ribbon.sidx-price-drop {
color: #hexcode !important;
} - Remove Banner
*To remove Price Change banner:
.sidx-ribbon.sidx-price-drop {
display: none !important;
}
Multiple Changes:
*If you were to use all of the above properties to update your button, your code may look like this when placed into your design settings:
padding: 25px 15px !important;
border-radius: 6px !important;
box-shadow: 0 7px 7px #1acb98 !important;
background: #1acb98 !important;
color: #ffffff !important;
border: 1px solid !important;
border-color: #febe0f !important;
}
Warning: Showcase IDX may make future updates to the product which may break previously acceptable CSS code, causing that section on your website to look unusual. If you've noticed your site not looking as expected, please return to this article for the updated CSS code.
If you are inexperienced with CSS, we suggest you turn to your developer as they will be the best contact person for CSS related questions and concerns. We are not developers and provide this baseline CSS for agents and developers experienced in coding.