Primary Action Functions (Icons)

On the listing detail page, you will notice several call-to-action functions with icons that are blue out of the box. These functions display as icons and can be used by a lead to save a property, ask a question about a property, tour a property, hide a property, or share it to social media.

These functions show in two different places on the listing detail page: to the left of the main image as well as under the description.

*To change the color of these icons (the icons are viewable in two different places on the listing detail page but share the same code):
.sidx-container .sidx-primary-action .sidx-primary-action-icon-container i.blue {
color: #hexcode !important;
}

Action Section Customization Options:

There is also a section with the call-to-action functions that display with a small border, which can be found if you scroll down the listing page under the property description.

Background Color:

The section by default has a white background- however you can change the background color of the section.  This may be needed to match your theme or to make the background transparent.  Here is an example making the background color of the section light gray:

*To change the background color of the action section:
.sidx-container .sidx-primary-actions.sidx-primary-jumbo {
background-color: #hexcode !important;
}
------------------------------------------------------------------------------------------------

Border:

The section by default has a 1px solid border set, however you can change the border thickness if you like.   1px sets the thickness of the border and solid defines the style of the border.  Here is an example of a 10px solid border:

Border-Color:

You can also change the color of the border.  Here is an example of a pink border color:

*To change the border-color of the action section:
.sidx-container .sidx-primary-actions.sidx-primary-jumbo {
border-color: #hexcode !important; 
}
------------------------------------------------------------------------------------------------

Border-Radius:

Changes the squareness of the section. The higher the number, the more round the button will be.  Here is an example of the border radius set to 50px:

Icon Color:

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.  If also changing the icon color, you would need the additional code found under icon:
.sidx-container .sidx-primary-actions.sidx-primary-jumbo {
padding: 50px 90px !important;
border-radius: 50px !important;
background: #1acb98 !important;
border: 10px solid !important;
border-color: #ff0000 !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.