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:
New Listing Banner
*To change the background color of New Listing banner:
.sidx-ribbon.sidx-new-listing {
background: #hexcode !important;
}
*To change the text color of New Listing banner:
.sidx-ribbon.sidx-new-listing {
color: #hexcode !important;
}
*To remove New Listing banner:
.sidx-ribbon.sidx-new-listing {
display: none !important;
}
------------------------------------------------------------------------------------------------
Featured Listing Banner
*To change the background color of Featured banner:
.sidx-ribbon.sidx-featured {
background: #hexcode !important;
}
*To change the text color of Featured banner:
.sidx-ribbon.sidx-featured {
color: #hexcode !important;
}
*To remove Featured banner:
.sidx-ribbon.sidx-featured {
display: none !important;
}
------------------------------------------------------------------------------------------------
Foreclosure Banner
*To change the background color of Foreclosure banner:
.sidx-ribbon.sidx-foreclosure {
background: #hexcode !important;
}
*To change the text color of Foreclosure banner:
.sidx-ribbon.sidx-foreclosure {
color: #hexcode !important;
}
*To remove Foreclosure banner:
.sidx-ribbon.sidx-foreclosure {
display: none !important;
}
------------------------------------------------------------------------------------------------
Open House Banner
*To change the background color of Open House banner:
.sidx-ribbon.sidx-open-houses {
background: #hexcode !important;
}
*To change the text color of Open House banner:
.sidx-ribbon.sidx-open-houses {
color: #hexcode !important;
}
*To remove of Open House banner:
.sidx-ribbon.sidx-open-houses {
display: none !important;
}
------------------------------------------------------------------------------------------------
Short Sale Banner
*To change the background color of Short Sale banner:
.sidx-ribbon.sidx-short-sale {
background: #hexcode !important;
}
*To change the text color of Short Sale banner:
.sidx-ribbon.sidx-short-sale {
color: #hexcode !important;
}
*To remove Short Sale banner:
.sidx-ribbon.sidx-short-sale {
display: none !important;
}
------------------------------------------------------------------------------------------------
Price Change Banner
*To change the background color of Price Change banner:
.sidx-ribbon.sidx-price-drop {
background: #hexcode !important;
}
*To change the text color of Price Change banner:
.sidx-ribbon.sidx-price-drop {
color: #hexcode !important;
}
*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;
}
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!
Customization Disclaimer: Please note, Showcase 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. Additionally, as always, 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.