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

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.

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:

  

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

  

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

  

  *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:
  
  *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;
  }
• Padding changed how much space is inside of the section between the border and the icons.  The first number changes the top and bottom padding.  The second number changes the left and right padding.  The default is set to 25px 50px. 
  
  Here is an example of the padding set to 50px 90px:

  

  *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;
border: 10px solid !important;
border-color: #ff0000 !important; 
}