When someone conducts a search on your website, they will see a Share option to copy a link to that search, either to send it to a loved one, or so they can reference it later. Agents can also use this link on their website, if they didn't want to use a hotsheet (We don't recommend this, as it's not indexable by Google. Find out more about how to build pages that rank here- click link).
Customization Options
Background Color:
This button has a transparent background, but you can apply a background to this button. Here is an example making the background color of the box green:
*To change the background color of the share search button:
.sidx-container .sidx-share-search-pill.sidx-share-search-pill {
background-color: #hexcode !important;
}
------------------------------------------------------------------------------------------------
Border:
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 5px solid border:
*To change the border thickness of the share search button:
.sidx-container .sidx-share-search-pill.sidx-share-search-pill {
border: 5px solid !important;
}
------------------------------------------------------------------------------------------------
Border-Color:
You can also change the color of the border. Here is an example of a green border color:
*To change the border color of the share search button:
.sidx-container .sidx-share-search-pill.sidx-share-search-pill {
border-color: #hexcode !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 20px:
.sidx-container .sidx-share-search-pill.sidx-share-search-pill {
Box-Shadow:
The button by default does not have a shadow around the bottom of the button. The first number sets the shadow directly under the button, the first 1px sets the size of the shadow, the second 1px sets the fade of the shadow and the hexcode sets the color.
Here is an example of the box-shadow set to 0 7px 7px #1acb98:
*To change the box-shadow of the share search button:
.sidx-container .sidx-share-search-pill.sidx-share-search-pill {
box-shadow: 0 7px 7px #1acb98 !important;
}
------------------------------------------------------------------------------------------------
Padding:
Changes how much space is inside the button. The first number changes the top and bottom padding. The second number changes the left and right padding. Here is an example of the padding set to 10px 15px:
*To change the padding of the share search button:
.sidx-container .sidx-share-search-pill.sidx-share-search-pill {
padding: 10px 15px !important;
}
------------------------------------------------------------------------------------------------
Text Color:
Especially if you've changed the color of the border or background of the button, you may wish to also change the color of the text. Default is set to blue. Please note the "color" line indicator of the shortcode designates text color. Here is an example of the text color to green:
*To change the text color of the share search button:
.sidx-container .sidx-share-search-pill.sidx-share-search-pill {
color: #hexcode !important;
}
-------------------------------
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:
padding: 10px 15px !important;
border-radius: 20px !important;
box-shadow: 0 7px 7px #1acb98 !important;
background: #1acb98 !important;
color: #1acb98 !important;
border: 5px solid !important;
border-color: #1acb98 !important;
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.