In your design settings, there is a setting to change the color of the primary search buttons, however, this currently only applies to the default search form.
The search bar widget buttons for Price, Beds, and Baths, as well as the For Sale / All Types button (if you are using the Advanced Search), do not follow the design settings and will require additional code if you'd like to update them.
Customization Options
Background Color:
If the standard dark gray color of the button do not match your theme, you can change the background color. Here is an example making the background color of the buttons green:
*To change the background color of the buttons:
.sidx-container .sidx-searchform .sidx-basic .sidx-field {
background-color: #hexcode !important;
}
------------------------------------------------------------------------------------------------
Border:
The buttons by default has a 1px border set, however you can adjust this if you like. You can make a border look many different ways. 1px sets the thickness of the border and solid defines the style of the border. Here is an example of a 5px solid border:
.sidx-container .sidx-searchform .sidx-basic .sidx-field {
border: 5px solid !important;
}
------------------------------------------------------------------------------------------------
Border-Color:
You can also change the color of the border. Simply add a hexcode prefixed with a hashtag. Here is an example of a green border:
*To change the border-color of the buttons:
border-color: #1acb98 !important;
}
------------------------------------------------------------------------------------------------
Border-Radius:
Changes the squareness of the buttons. The higher the number, the more round the buttons will be. Default is set to 3px. Here is an example of the border radius set to 20px:
border-radius: 20px !important;
Box-Shadow:
The buttons by default do not have shadow around the bottom. An example of having a shadow would be "0 1px 1px #1acb98". 0 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 buttons:
box-shadow: 0 7px 7px #1acb98 !important;
}
------------------------------------------------------------------------------------------------
Padding:
padding: 25px 45px !important;
}
------------------------------------------------------------------------------------------------
Text Color:
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: 25px 15px !important;
border-radius: 6px !important;
box-shadow: 0 7px 7px #1acb98 !important;
background: #1acb98 !important;
color: #ffffff !important;
border: 1px solid !important;
border-color: #febe0f !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.