Listing Ribbons (New Listing, Open house, etc)

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 font 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 enable the Featured Listing Banner, refer to the Display Settings article. (This feature is for Premium plan customers only)

• *To change the background color of Featured banner:
  .sidx-ribbon.sidx-featured {
  background: #hexcode !important;
  }

• *To change the font 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 font 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 font 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 font 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 font 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-radius: 6px !important;
box-shadow: 0 7px 7px #1acb98 !important;
background: #1acb98 !important;
color: #ffffff !important;
border: 1px solid !important;
border-color: #febe0f !important; 
}