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:
Actions & Comment Box Customization Options
Action Background Color:
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 green:
*To change the background color of the actions and comment box:
.sidx-container .sidx-social-search-box {
background: #hexcode !important;
}
------------------------------------------------------------------------------------------------
Action Border:
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;
}
------------------------------------------------------------------------------------------------
Action Icon & Text Color:
You may wish to also change the color of the icons and text, which share the same code. Default is set to blue. Please note the "color" line indicator of the shortcode designates icon and text color of the actions and comment box. 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;
}
------------------------------------------------------------------------------------------------
Comment Box Border-Radius:
Changes 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;
}
Additional Customization Options
Help Option:
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 will 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;
}
------------------------------------------------------------------------------------------------
Comment Visibility Indicator:
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.
*To change the color of the text of 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;
}
------------------------------------------------------------------------------------------------
Post button:
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.
------------------------------------------------------------------------------------------------
Invite/Send Invitation:
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.
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.