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:

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

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 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

Screen_Shot_2019-09-13_at_11.34.04_AM.png

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

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 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

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 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

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 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

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 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-radius6px !important;
box-shadow0 7px 7px #1acb98 !important;
background#1acb98 !important;
color#ffffff !important;
border1px 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.