Primary Action Functions (Save, Ask, Tour, Hide, Share Icons)

  • Updated

On the listing detail page, you will notice several call-to-action functions. 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 via social media, email, and text.

These functions are shown in two different places on the listing detail page: to the left of the main image as well as three times under the description, making it easier for leads to perform these actions at any point when viewing a listing. These icons are colored blue by default.


Screen_Shot_2022-03-15_at_2.26.07_PM.png

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!

Action Section Customization Options

  • The section by default has a white background, however, you can change the background color of this section.  This may be needed to match your theme or you can make the background transparent. 

    Here is an example making the background color of the section light gray:

    Screen_Shot_2021-07-19_at_4.36.01_PM.png

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

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

    Screen_Shot_2021-07-19_at_4.29.59_PM.png

    *To change the border of the action section:
    .sidx-container .sidx-primary-actions.sidx-primary-jumbo {
    border10px solid !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:

    Screen_Shot_2021-07-19_at_5.17.18_PM.png

    *To change the border-radius of the action section:
    .sidx-container .sidx-primary-actions.sidx-primary-jumbo {
    border-radius: 50px !important;
  • You may wish to change the color of both sets of icons from the default blue color. 

    Here is an example of the icon color to red:
    Screen_Shot_2021-07-20_at_9.30.01_AM.pngScreen_Shot_2021-07-20_at_9.30.10_AM.png
    *To change the icon color of both sets of icons (they share the same code):
    .sidx-container .sidx-primary-action .sidx-primary-action-icon-container i.blue {
    color: #hexcode !important;
    }
  • Screen_Shot_2021-07-19_at_5.22.10_PM.png

    *To change the padding of the action section:
    .sidx-container .sidx-primary-actions.sidx-primary-jumbo {
    padding: 50px 90px !important;
    }

Applying 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;
border10px solid !important;
border-color#ff0000 !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.