Settings > Design - Customizing your Showcase IDX Plugin

Showcase IDX offers you the ability to customize your plugin to fit the theme of your website. You can customize the colors and fonts right from the Design settings.



The settings in this section are very basic and provide limited customization. Not all of Showcase IDX's elements are tied to these settings and will require additional CSS. Now, you don't have to be a developer to use CSS but you would need to know how to find the specific elements you are looking for. In order to make it easy for you to update your site as you see fit. Below, we list all the common elements that agents may be looking to update on their website. Each code can be placed in the Custom CSS box on the design settings page in the admin:



NOTES: Please remember that when using these codes, the !important tag must be present in any code in order to override the original code. The #hexcode that you see can be replaced with any color code that you need. (example - #662f63) Remember to keep the # in front of the code or the element will not change. Also, any code that you apply to your website may require the cache to be purged within your caching plugin or on your browser. You can use an incognito or private browser to check for the update as well. If your code is NOT working, please review the code for any additional characters that you might have added. Additional characters can break the code and cause it not to work.

Showcase IDX offers banners, or ribbons, that you will see on listing cards on hotsheets and on your main search page. Each one is easily changed with the following code:


.sidx-ribbon.sidx-new-listing {
background: #hexcode !important;
}


.sidx-ribbon.sidx-featured {
background: #hexcode !important;
}


.sidx-ribbon.sidx-foreclosure {
background: #hexcode !important;
}


.sidx-ribbon.sidx-open-houses {
background: #hexcode !important;
}


.sidx-ribbon.sidx-short-sale {
background: #hexcode !important;
}


.sidx-ribbon.sidx-price-drop {
background: #hexcode !important;
}

If you'd like to change the text color, include this code just below the background color:

color: #hexcode !important;

The map markers that you see on the map are editable, as well. We suggest that when changing the colors of the map markers that you make the borders a slightly darker color than the background as it creates a nice contrast.

.sidx-container .sidx-map-marker-for-sale {
background: #hexcode !important;
border: 1px solid #hexcode !important;
}

.sidx-container .sidx-map-marker-for-sale:before {
border-top-color: #hexcode !important;
}

.sidx-container .sidx-map-marker-for-sale:after {
border-top-color: #hexcode !important;
}

.sidx-container .sidx-map-dot-for-sale .sidx-dot {
border: 1px solid #hexcode ! !important;
background: #hexcode !important;
}

Rental map markers require different code:

.sidx-container .sidx-map-marker-for-rent {
background: #hexcode !important;
border: 1px solid #hexcode !important;
}

.sidx-container .sidx-map-marker-for-rent:after {
border-top-color: #hexcode !important;
}

.sidx-container .sidx-map-marker-for-rent:before {
border-top-color: #hexcode !important;
}

Don't like the green color of the location filter? Easy update!

.sidx-container .sidx-primary-pill, .sidx-container .sidx-secondary-pill {
background: #hexcode !important;
}

There are a number of buttons that are linked to the same element within our plugin.

The search button on the search bar widget



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



The send invitation button when using the invite function on the listing page



The create account button on the sign-up form



as well as a few others. You can change these buttons with this code:

.sidx-container button.sidx-primary {
background: #hexcode !important;
color: #hexcode !important;
}

The "color" portion changes the TEXT color.

On mobile, there is a Call Now button on the listing page.



You can use this code for this button:

.sidx-small-screen .sidx-call-button .sidx-primary-alt {
background: #hexcode !important;
color: #hexcode !important;
}

Showcase IDX offers two different search forms that you can use as the front-facing search for your site visitors. One of which has a MORE button as the advanced search, which we refer to as "Streamlined".



There are a few things you can do with this button. It appears transparent (no background) out of the box. To add a background, you can use this code:

.sidx-container .sidx-streamlined-search .sidx-streamlined-toggle {
background-color: #hexcode !important;
}

To change the text color and the border color, you can add this code to the above:

color: #hexcode !important;
border: 1px solid #hexcode !important;

On the main search page, you will find a Save Search button.



To update this button, you can use:

.sidx-container .sidx-dropdown-pill.sidx-save-search-pill {
background: #hexcode !important;
border-color: #hexcode !important;
}

Again, to change the text color, you can add this code to the one above:

color: #hexcode !important;

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.



To update these:

.sidx-container .sidx-searchform .sidx-basic .sidx-field {
background: #hexcode !important;
}

When you review a listing page, you may notice the top navigation that shows Previous, the # of results, Back to Results and Next.



There are a few things you can do with this. To change the Back to Results link color:

.sidx-container .sidx-searchform .sidx-basic .sidx-field {
background: #hexcode !important;
}

To change the light blue/gray background:

.sidx-container .sidx-listing-details .sidx-top-level-nav {
background: #hexcode !important;
}

To change the Previous and Next navigation text color:

.sidx-container .sidx-listing-details .sidx-top-level-nav a {
color: #hexcode !important;
}

On the listing page, you will notice several call-to-action functions with icons that are blue.



To update these:

.sidx-container .sidx-primary-action .sidx-primary-action-icon-container i.blue {
color: #hexcode !important;
}

There is also a section with the call-to-action functions that display with a small border.



You can update the border color with:

.sidx-container .sidx-primary-actions.sidx-primary-jumbo {
 border: 1px solid #hexcode !important;
}

When someone conducts a search on your website, they will see a Share option.



To update this:

.sidx-container .sidx-share-search-pill.sidx-share-search-pill {
color: #hexcode !important;
border-color: #hexcode !important;
}

Of course, if you would like to apply a background to this button, you can add this code to the above:

background: #hexcode !important;

Listings that show up in the search results will always have a Property Type and a Listing Type (for sale or for rent). These appear as green out of the box and all use the same code.



You can update with the following:

.sidx-container .sidx-search-results .sidx-mls-details .sidx-for-sale {
color: #hexcode !important;
}

On listing pages, there is a Quickview photo change section that allows people to preview the next images with ease.



If you wish, you can update with this:

.sidx-container .sidx-photo-array button {
color: #hexcode !important;
border: 1px solid #hexcode !important;
}

You can also add a background color if you wish using:

background: #hexcode !important;

Under the Friends and Family section, you will find the following functions:



To update, you can use:

.sidx-container .sidx-social-search-box .sidx-actions {
color: #hexcode !important;
}

On hotsheets, if you choose to include a link to the full set of results, you will see a See All Results button.



To update, you can use:

.sidx-container .sidx-button, .sidx-container button {
background-color: #hexcode !important;
color: #hexcode !important;
}



If you would like to change the color of the text for the consumer navigation links:

.sidx-container .sidx-main-header .sidx-header-link {
color: #hexcode !important;
}

If you're looking to update the color of the "Use My Current Location" option when using a mobile device:

.sidx-container .sidx-suggestions-use-geo .sidx-geo-search-button.sidx-geo-search-button {
background: #hexcode !important;
}
NOTE: Any additional customization or CSS changes will be done at your own risk as any future updates could break the CSS. We suggest contacting a professional website developer in order to make any desired changes. Showcase IDX will not be responsible for any broken CSS on your website if elements have been customized.

If you experience any difficulties using any of these codes, please reach out to Customer Support at help@showcaseidx.com or 1-800-478-0181. We would be happy to assist.