Under the Friends and Family section on a listing detail page, you will find actions that an end-user 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). Those actions look like this:
If you'd like to change the color of the icons and font, you can add this code to your Custom CSS box:
.sidx-container .sidx-social-search-box .sidx-actions {
color: #hexcode !important;
}
The Friends & Family section does have a background, which appears as a light blue/gray. This can be updated as well if you wish.
To update the background and border of the box around the actions and comment box, you can use this code:
.sidx-container .sidx-social-search-box {
background: #hexcode !important;
border: 1px solid #hexcode !important;
}
There is a help option 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 will use two codes. The first applies to the '?' icon, the second applies to the 'what's this?' text:
.sidx-container .sidx-help {
color: #hexcode !important;
}
.sidx-container .sidx-help-label {
color: #hexcode !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 text using two codes. The first changes the text and the second changes the chevron dropdown indicator:
.sidx-container .sidx-listing-comments .sidx-add-comment .sidx-comment-actions .sidx-select-menu .sidx-select-menu-selection {
color: #hexcode !important;
}
.sidx-container .sidx-select-menu .sidx-select-menu-selection i {
color: #hexcode !important;
}
If you'd like to add any further customization here, there is one other option:
border-radius: /Changes the roundness of the corners of the comment box/
Here is an example of a border-radius set to 20px:
Remember, place this code in the custom CSS box under Settings > Design. Clear your caches and check your web page in an incognito browser to see the change!