Listing Ribbons (New Listing, Open house, etc)

  • Updated

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

Screen_Shot_2019-09-13_at_11.32.46_AM_copy.png
*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

Screen_Shot_2019-09-13_at_11.34.04_AM.png
*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

Screen_Shot_2019-09-13_at_11.33.14_AM.png
*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

Screen_Shot_2019-09-13_at_11.33.27_AM.png
*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

Screen_Shot_2019-09-13_at_11.32.59_AM.png
*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

Screen_Shot_2019-09-13_at_11.32.46_AM.png
*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:
insert new listings, featured, foreclosure, open house, short sale or price change code here {
padding: 25px 15px !important;
border-radius6px !important;
box-shadow0 7px 7px #1acb98 !important;
background#1acb98 !important;
color#ffffff !important;
border1px 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.