See All Results Button

When creating hotsheets for your community pages, you can choose the number of listings that will display on the page, between 4 and 60 listings. It's a great idea to include a link to the full set of results. When you opt-in for this link, a "see all results" button will populate just below the hotsheet results, and look like this:

Customization Options

• If the standard gray color of the See All Results button doesn't match your theme, you can change the background color of the button. 
  
  Here is an example making the background color of the box blue:

  
  

  *To change the background color of See All Results button:
  .sidx-container .sidx-button, .sidx-container button {
  background-color: #hexcode !important;
  }
  

• The button by default does not have a border set, however, you can add a border if you like. 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 1px solid border:

  
  

  *To change the border of See All Results button:
  .sidx-container .sidx-button, .sidx-container button {
  border: 1px solid !important;
  }

• If you decide to add a border, you can also change the color of the border. Simply use the border-color property and add a hexcode prefixed with a hashtag. 
  
  Here is an example of a border colored #febe0f:

  
  

  *To change the border-color of See All Results button:
  .sidx-container .sidx-button, .sidx-container button {
  border-color: #febe0f !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 6px. 
  
  Here is an example of the border radius set to 20px:
  

  

  *To change the border-radius of See All Results button:
  .sidx-container .sidx-button, .sidx-container button {
  border-radius: 20px !important;
  }

• The button by default has a shadow around the bottom of the button. This is set to 0 1px 1px #99a9af by default. 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 See All Results button:
  .sidx-container .sidx-button, .sidx-container button {
  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 See All Results button:
  .sidx-container .sidx-button, .sidx-container button {
  padding: 25px 45px !important;
  }
• The default text or font color is set to a dark grey. Please note the "color" line indicator of the code designates font color. 
  
  Here is an example of the font color to white:
  
  
  
  *To change the text color of See All Results button:
  .sidx-container .sidx-button, .sidx-container button {
  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-button, .sidx-container button {
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; 
}