Friends & Family Section

Under the Friends & Family section on a listing detail page, you will find actions that leads/clients can use to leave a reaction on a property, comment on a property (either privately with their search party or with their assigned agent) and invite a loved one to their search on your website. Find out about how you can generate more leads with this unique feature!

Action Customization Options

• The Friends & Family section does have a background, which appears as a light blue/gray. This can be changed. 
  
  Here is an example making the background color of the box gray:

  

  *To change the background color of the actions and comment box: 
  .sidx-container .sidx-social-search-box {
  background: #hexcode !important;
  }
  
  

• You can change the border thickness if you like.  '5px' sets the thickness of the border and 'solid' defines the style of the border. 
  
  Here is an example of a 5px solid border:

  

  *To change the border thickness around the actions and comment box: 
  .sidx-container .sidx-social-search-box {
  border: 5px solid !important;
  }
  
  

• You may wish to also change the color of the icons and font, which share the same code.  The default is set to blue.    
  
  Here is an example of the icon and text color to green:

  

  *To change the color of the icons and font colors in the actions and comment box:
  .sidx-container .sidx-social-search-box .sidx-actions {
  color: #hexcode !important;
  }
  
  

Additional Customization Options

• There is a help option ("What's This?") for someone using the Friends & Family section if they're not sure what it's for. To update the look of the help option, you can use two codes. 

  

  *To change the color of the '?' icon:
  .sidx-container .sidx-help {
  color: #hexcode !important;
  }

  *To change the color of the 'what's this?' text:
  .sidx-container .sidx-help-label {
  color: #hexcode !important;
  }
  
  

• Border-radius changed the roundness of the corners of the comment box. The higher the number, the more round the button will be. 
  
  Here is an example of the border radius set to 20px:  

  

  *To change the border-radius around the comment field: 
  .sidx-container .sidx-listing-comments .sidx-add-comment textarea {
  border-radius: 20px !important;
  }

• There is also a selector for whether the visitor wants to comment privately or make it agent visible, which triggers a new message notification. You can update this font using two codes. 

  

  *To change the color of the font for the comment visibility option:
  .sidx-container .sidx-listing-comments .sidx-add-comment .sidx-comment-actions .sidx-select
  menu .sidx-select-menu-selection {
  color: #hexcode !important;
  }

  *To change the color of the chevron dropdown indicator:
  .sidx-container .sidx-select-menu .sidx-select-menu-selection i {
  color: #hexcode !important;
  }
  
  

• The Post button is considered one of the primary buttons and shares the same code as several other buttons in the plugin.  You can find more details around customizing the Post button.

  

   

• When clicking the "invite" button in the Friends & Family section, a popup window will appear to add an email address.  The send invitation button is considered a primary buttons and shares the same code as several other buttons in the plugin.  You can find more details around customizing the Send Invitation button here.