Streamlined Search - 'More' Button

Showcase IDX offers two different search forms that you can use as the front-facing search for your site visitors. You can learn more about it here.

One of which, the streamlined form, has a 'More' button as the 'advanced' search. It looks like this:

Customization Options

• The 'More' button is transparent (no background) out of the box, but you can add a background color to the button. 
  
  Here is an example making the background color of the box yellow:

  

  *To change the background color of theMore button:
  .sidx-container .sidx-streamlined-search .sidx-streamlined-toggle {
  background: #hexcode !important;
  }
  
  

• The button by default has a 1px border set, however, this can be adjusted. You can make a border look many different ways. At Showcase IDX we like to use '1px solid' to define a border on buttons. '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 More button:
  .sidx-container .sidx-streamlined-search .sidx-streamlined-toggle {
  border: 5px solid !important;
  }
  
  

• You can also change the color of the border, using the same code as the border thickness. Simply add the hexcode to the end of the code.  Here is an example of a yellow border color:

  

  *To change the border-color of the More button:
  .sidx-container .sidx-streamlined-search .sidx-streamlined-toggle {
  border: 1px solid #1acb98 !important; 
  }
  
  

• Border-radius changes the squareness of the button. The higher the number, the more round the button will be.  Default is set to 3px. 
  
  Here is an example of the border radius set to 20px:
  

  

  *To change the border-radius of the More button:
  .sidx-container .sidx-streamlined-search .sidx-streamlined-toggle {
  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 #1acb98:

  

  *To change the box-shadow of the More button:
  .sidx-container .sidx-streamlined-search .sidx-streamlined-toggle {
  box-shadow: 0 7px 7px #1acb98 !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.  Default is set to 10px 15px. 

  
  Here is an example of the padding set to 25px 45px:

  

  *To change the padding of the More button:
  .sidx-container .sidx-streamlined-search .sidx-streamlined-toggle {
  padding: 25px 45px !important;
  }
  
  
• The default text or font color is set to blue.  The "color" line indicator of the code designates font color and the drop down arrow (which share a code). 
  

  Here is an example of the text color to green:

  

  *To change the font color of the More button:
  .sidx-container .sidx-streamlined-search .sidx-streamlined-toggle {
  color: #hexcode !important;
  }

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-streamlined-search .sidx-streamlined-toggle {
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; 
}