Design Settings - Customizing your Showcase IDX Plugin

Showcase IDX offers you the ability to customize your plugin to fit the theme of your website and your company branding. You can customize the colors and fonts right from the Design settings. This can be found in your IDX Control panel, under the Settings tab > DESIGN. 

Video Tutorial

You can also find more information and a video tutorial of these instructions.

Color Picker Tool

When clicking on the small, square boxes labeled 'background' and 'text color', you will find a handy color picker tool to easily find your desired color. With this tool you can drag the dot to find the right shade of a color, drag the bar on the spectrum to find the right color, change the opacity of the element or, if you already have a color code (aka hexcode) handy, you can drop it in the 'hex' input area.

Design Settings

• Simply put, the plugin background settings controls the container of the default search page, and listing pages. To make it obvious exactly what this is, here is an example of a pink background.

  

  

• The body font is the main font of the plugin. The majority of the general text found on the listing detail page will be in the body font. Things like the property description (aka, public remarks), fields and their accompanying values under the listing snapshot and anything under features, just to name a few.

  

• The heading font is simply the headings on the listing pages and the address on the search results. Things like Listing Snapshot, General Features, Neighborhood & Commute are all headings.

  

  

• This setting only applies to the search form on the default search page. This setting does not apply to a single search widget (close the loop here: link to changing single search widget). For example, if you have a search widget on your homepage, changing this setting will not change the colors on the home page search widget. Click here to learn more about your default search page.

  

• The call to action buttons are just two buttons: Ask a question & Schedule a Tour, both of which are found on the listing detail pages.

  

• The actions menu populates on hotsheets and on your default search page and allows leads to perform a number of actions on a listing.

  

• This setting controls the color of links that appear as part of the IDX.

• As mentioned earlier on, the design settings on this page are very basic, but you can customize just about anything on the IDX with code. We have a section here called "Custom CSS" specifically designed for this. Custom CSS is typically for advanced users who have some knowledge of how to code with HTML. 

  
  

What is CSS?

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files

Important Notes

• Please remember that when using 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 hashtag # in front of the color code or the element will not change.
• 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 as additional characters can break the code and cause it not to work.

Visit the Customization section in the Support Center for all your customization needs.

Don't see something you're looking for? Let us know! We'll be happy to help you figure it out and create content for future users. You can reach us at help@showcaseidx.com or 1-800-478-0181.