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.
NOTE: 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.
View 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.
Pro Tip
A really useful tool we use at Showcase IDX is the ColorPick Eyedropper Chrome extension which allows you to easily pick a color on a webpage and grab the hexcode for it. Another great tool is ColorZilla.
Plugin Background
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.
Body Font
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.
Heading Font
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.
Price, Beds, Bath, Types Buttons
This setting only applies to the search form on the default search page. This setting does not apply to a 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.
Call To Action Buttons
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.
Search Results Actions Menu
The actions menu populates on hotsheets and on your default search page and allows leads to perform a number of actions on a listing.
Link Color
This setting controls the color of links that appear as part of the IDX.
Custom CSS
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.
Warning: Any additional customization or CSS changes will be done at your own risk. Any future plugin updates or enhancements could break your 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.
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.