Price, Beds, Baths, For Sale / All Types Buttons

A search bar widget can be used on your homepage or any other page to give your website visitors a quick way to search for homes. The buttons for Price, Beds, and Baths, as well as the For Sale / All Types button (if you are using the Advanced Search) can be updated using custom code from this article. 

Customization Options

• If the standard dark gray color of the button do not match your theme or brand, you can change the background color.
  
  Here is an example making the background color of the buttons blue:

  

  *To change the background color of the buttons:
  .sidx-container .sidx-searchform .sidx-basic .sidx-field {
  background: #hexcode !important;
  }
  
  

   

• 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:

  

  *To change the border of the buttons:
  .sidx-container .sidx-searchform .sidx-basic .sidx-field {
  border: 5px solid !important;
  }
  
  

• You can also change the color of the border. 
  
  Here is an example of a yellow border:

  

  *To change the border-color of the buttons:
  .sidx-container .sidx-searchform .sidx-basic .sidx-field {
  border-color: #1acb98 !important; 
  }

• Border-radius changes the squareness of the button. The higher the number, the more round the button will be. The default is set to 3px. 

  
  Here is an example of the border radius set to 20px:
  

  

  *To change the border-radius of the buttons:
  .sidx-container .sidx-searchform .sidx-basic .sidx-field {
  border-radius: 20px !important;
  }
  
  

   

• 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 #febe0f:

  

  *To change the box-shadow of the buttons:
  .sidx-container .sidx-searchform .sidx-basic .sidx-field {
  box-shadow: 0 7px 7px #febe0f !important;
  }
  
  

• Padding changes how much space is inside the button, between the text and the border.  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 25px 45px.

  
  
  

  *To change the padding of the buttons:
  .sidx-container .sidx-searchform .sidx-basic .sidx-field {
  padding: 25px 45px !important;
  }
  
  
• The default text or font color is set to white.  The "color" line indicator of the code designates font color, and would be important to note if you changed other colors of the button.
  
  Here is an example of the text color to green:
  
  
  *To change the font color of the buttons:
  .sidx-container .sidx-searchform .sidx-basic .sidx-field {
  color: #hexcode !important;
  }

In the design settings, you will see options to change the background and font colors for these buttons, however, that design setting only applies to the default search page and does not apply to the independent search bar widget that you may use on your homepage. 

Applying 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:

.sidx-container .sidx-searchform .sidx-basic .sidx-field {
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; 
}