Primary Buttons: Search, Post, Send Invitation and Create Account

  • Updated

There are a number of buttons that are linked to the same element within our plugin. When updating the button using the code below, you will be essentially updating all of these at the same time. One code to change them all!

The search button on the search bar widget.   

Screenshot 2023-10-11 at 4.01.41 PM.png

The post button on the listing page, under the Friends and Family section.     

Screenshot 2023-10-11 at 4.02.36 PM.png

Friends and Family send invitation button.     

Screenshot 2023-10-11 at 4.03.36 PM.png

The create account button on the sign-up form.   

Screenshot 2023-10-11 at 4.04.31 PM.png

The submit button on the market value form.

Screenshot 2023-10-11 at 4.16.01 PM.png

And the submit button on the contact form.

Screenshot 2023-10-11 at 4.18.17 PM.png

 

Tip

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 Options

  • *To change the background color:
    .sidx-container button.sidx-primary {
    background: #hexcode !important;
    }

  • At Showcase IDX we typically like to use '1px solid' to define a border on buttons. The first number sets the thickness of the border and solid defines the style of the border.

    *To change the border:
    .sidx-container button.sidx-primary {
    border1px solid !important;
    }

  • *To change the border-color:
    .sidx-container button.sidx-primary {
    border-color#febe0f !important; 
    }

  • Border-radius changes the squareness of the button. The higher the number, the more round the button will be.

    *To change the border-radius:
    .sidx-container button.sidx-primary {
    border-radius: 20px !important;
    }

  • An example of a box-shadow code is '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.

    *To change the box-shadow:
    .sidx-container button.sidx-primary {
    box-shadow0 7px 7px #1acb98 !important;
    }

  • The "color" line indicator of the shortcode designates text color.

    *To change the text color:
    .sidx-container button.sidx-primary {
    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 button.sidx-primary {
padding: 25px 15px !important;
border-radius6px !important;
box-shadow0 7px 7px #1acb98 !important;
background#1acb98 !important;
color#ffffff !important;
border1px solid !important;
border-color#febe0f !important; 
}

Warning: Showcase IDX 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.

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.