[We are delving into way advanced IDX features here, so this guide is geared towards web site developers or clients with coding experience.]

It’s pretty easy to build an IDX search module and add it to your site, but polishing the look with snazzy customizations requires some CSS wizardry. CSS can transform your search module from a basic black & white text form that may be overlooked to something bright and sexy that can catch a visitor’s attention.

We built our IDX search modules so web developers and super nerdy users can customize them using CSS, but this kind of coding is tricky and definitely not for everyone. We don’t provide any level of support or product training for CSS customization, but for those of you who are already familiar with it, here’s how to use CSS to jazz up your quick search IDX module…

Laying out your IDX search

Our quick search IDX module is rendered in a table with neat little rows for all the search fields and their matching labels. When you generate a new quick search in your Control Panel, use the Number of Columns in HTML Output drop-down list to control how your form will be rendered.

Here’s how each layout option looks before you customize with CSS…

1 Column layout

Fields are displayed in a single column with the label above each item.  This option generates a very narrow IDX search, making it an ideal choice for sidebars or other areas of your site with limited space.

IDX search with single column layout

a single column IDX quick search

2 Column layout

By default, when you create a new quick search we’ll generate a form with a two column table. Each row has a single input field on the right with a matching label to the left.  This is the most common option, as it’s clear, easy to read, but it’s still narrow enough to fit in the sidebar or similar column of any real estate site.

an IDX quick search with the default 2 column layout

4 and 6 Column Layouts

Both of these options just add additional pairs of columns to the 2-column layout.  This layout is best for larger IDX forms that have lots of search fields.

IDX search with 4 column layout

a sample IDX search widget with 4 columns

Unlimited Columns Layout

This layout will display all search fields and labels in a single continuous row with unlimited columns.  This option is great if you want an IDX widget that will stretch across the top of your real estate site.

IDX search with unlimited columns layout

a partial IDX search form using the unlimited columns option (click for full size)

The choice you make for your Number of Columns in HTML Output setting will have a big impact on the HTML that is generated for your Quick Search IDX widget, so it’s worth your time to play with this setting before you dive into customizing your search further via CSS.

IDX Quick Search CSS Guide

Most of the HTML tags generated for our IDX quick search module have either a class, and ID or both that can be used to style your search via CSS.  Here’s a rundown of the classes and IDs used…

idx quick search table

class and ID used for IDX module <table> tag

ID and class for <table> tag

Your entire IDX search module is generated inside of a <table> tag.  You can control the size, color, font, and other styling for all elements in any quick search table using this CSS class:

.ds-quick-search

In addition, we’ll give your quick search table a unique ID, allowing you to make changes to each IDX module on your site.  The ID will be in this format:

#ds-quick-search-module-1234567890

To retrieve the unique ID we assign to your table, you’ll need to add the module script to a page of your site, choose the “View Source” option in your browser, then simply scan the generated HTML for the <table> tag.  Alternatively, you should be able to make CSS changes to your module using just the .ds-quick-search class alone.

Some suggestions would be adding a background image or color to your search widget <table> like this:

.ds-quick-search {
background-image: url(‘myimage.jpg’);
}

…or maybe add a border around the search:

.ds-quick-search {
border: 1px solid black;
}

…or you can go nuts and add styling to elements nested inside <table> the tag.  Here’s an example that sets the width for all the <td> tags inside a quick search IDX widget:

.ds-quick-search td {
width: 200px;
}

Classes for search fields and labels

IDX search field CSS classes

classes and IDs used for IDX fields

Each search field in your IDX module has one <td> for the field label, and a second <td> for its input.  All the <td> tags that contain field labels use this class:

.ds-quick-search-name

…and all of the <td> tags with an input box/area use this class:

.ds-quick-search-value

Most CSS styling done with your IDX search module will involve these two classes.  Here you can set the font, colors, font size, spacing, and more for your search form.
As an example, with the CSS below I’ve set the font type and font size, and added additional spacing between each <td> in my widget:

.ds-quick-search-name {
font-family: Arial;
font-size: 10px;
padding:  5px;
}

Additionally, you can make changes to the search button on your form using this class we assign to the <input> tag:

.ds-quick-search-button

You can use pretty basic CSS to change the font, background, or button style of your Search button, including hover effects.

You could even replace the search button with an image, but that’s a bit of a hack, so do that at your own risk.

IDs for individual fields

each search field has its own unique ID

IDs for each IDX search field

Lastly, each <input> tag in your search is assigned a unique ID that lets you control CSS styling for individual fields.

The field IDs are in this format:

#ds-quick-search-module-123456789

Just like the ID assigned to your <table> tag, you’ll need to view the original source to retrieve the unique IDs for each field you wanted to style via CSS.

These unique field IDs can be especially important if you want to make some field inputs (like beds and baths) smaller that others, or if you wanted to really highlight some IDX fields while leaving others less prominent.

IDX quick search widget styling guide re-cap

To re-cap, here’s how you can control the look of your IDX search widget:

  • choose the right Number of Columns setting to fit the placement of the widget
  • every field label is in a <td> with class: .ds-quick-search-name
  • every input field is in a <td> with class: .ds-quick-search-value
  • and every field <input> has a unique ID in this format: #ds-quick-search-module-123456789-1
  • your entire search form is in a <table> with class: .ds-quick-search
  • and your <table> also has a unique ID in this format: .ds-quick-search-module-123456789

As mentioned at the onset of this post, we do not provide support for this level of editing/customization… so edit your site’s CSS of your site at your own risk.

Our dsSearchAgent Quick Search IDX widget was designed to be plain enough to match the style of any site – we don’t expect average users to customize their quick search outside of our Control Panel options.  However, if you or your designer or web developer are familiar with CSS, our IDX widget does include the tools for you to take advantage of.

As you should know, any CSS changes you make should go in your site’s CSS file, or otherwise the <head> tag of your site or the <head> tag of the individual page you are using the widget on.

Ok, that should help.  For those of you know know what to do – go have fun making your quick search awesome!

[btw: If you have troubles customizing your widget via CSS, our support dept won't be able to help you.  Sorry.  This is a "hidden feature" that's there for you to use if you know what you're looking for, but it's not something we generally promote.]

 

About Robert Larson

With a past life in our tech support and then IDX compliance, I now manage marketing for Diverse Solutions, including our advertising, newsletter, and a bit of social media. Visit me on Google+
  • http://www.facebook.com/jayvalento Jay Valento

    how do I add “property type” to the search?

    • rlarsonds

      “property type” is one of the fields you can choose from when you build the quick search module in your Control Panel. When building your quick search, simply drag the “Property Type” field from the pink column on the right to the green column on the left – then use the drop down menu to choose whether you want checkboxes, a drop down menu, or radio buttons – then check off the options you want to include…

      http://d.pr/i/UcI0

      You can modify the styling for this field input and label just like the others. In addition, if you use the checkbox or radio button option, each radio button or checkbox item will be given a unique ID that allows for custom styling of each option.

  • http://twitter.com/AaronSOLD Aaron Dickinson

    Is there a way for you to share the code snippets for the above examples?

  • derekalvarez

    What about the mls #? I’ve tried “.dsidx-mlsnumber”, but it affects the entire widget.

    • rlarsonds

      Hmm… that class should work – and should only affect the MLS Number input field. You can try using this ID instead: “#idx-q-MlsNumbers” – - or post a link to a page with the problem widget and I’ll take a look.

  • Robert Larson

    Sorry for the lag. It looks like you’re using the AgentPress theme for your blog, so your IDX widget already has some CSS modifications to it that are competing with the additions you are making.

    I’m guessing you’re trying to change the width of your MLS input field? With the way AgentPress has modified your widget, all the form input fields are set to display at 70% of the width of your MLS number field. Which means when you change the width of your MLS number field, all the other fields are following suit.

    If you want your MLS number field to be wider (or narrower) without it altering the other fields in your widget, the easiest workaround is adding a width AND a margin to your MLS field like this:

    #idx-q-MlsNumbers {
    width: 100px;
    margin-right: 50px;
    }

    You may have to play with the width and the margin to get it right – but I think this should do the trick.

    Let me know how it goes!

    • derekalvarez

      Thanks, Robert! That did the trick! I ended up doing this…

      .dsidx-mlsnumber {
      width: 120px;
      margin-right: 50px;
      }
      .dsidx-search-widget .dsidx-improvedsqft {
      width: 120px;
      margin-right: 50px;
      }

  • Tom Fernandez

    When using the “City” field will it also accept community names and/or zip codes? If not, which is best field to use to offer all of those common options in one field?

    • Robert Larson

      Right now we don’t have a widget that can do what you’re asking. However, we are currently running a BETA test on a new version of dsSearchAgent, which includes a new search widget with a “location” box that accepts cities, zip codes and/or zip codes. We hope to launch this widget (and the other cool features we’ve added to dsSearchAgent) early 2014.

  • derekalvarez

    Hi Robert, Can you tell me where you select the number of columns? I don’t see it in the widget settings or in the default css?

    • Robert Larson

      Are you using the “Quick Search” widget or the “Quick Search Plus” widget? These instructions only work with the “Quick Search” widget. If you’re using this widget, you should see the columns setting in your Control Panel when you are editing/setting up your widget: http://d.pr/i/8QgY

      • derekalvarez

        Thanks Robert, I was actually using the one “IDX Search” that shows up with the WordPress widgets. So it looks like I have to use the “module” in order to do this?

        • Robert Larson

          Yeah – these instructions are only for the dsSearchAgent widgets that you setup in the IDX area of your Control Panel (ie: http://controlpanel.diversesolutions.com).

          Any widgets that you setup and generate inside of your WP admin are designed for use with the IDX plugin and these instructions will not apply.

          Sorry!

          • derekalvarez

            Thanks, Robert. Is there a tutorial you can point me to that will show how to do this with the plugin widget?

  • http://www.courtneyengle.com/ Courtney Engle Robertson

    Styling with tables is not a good option for mobile responsive websites. Do you have a more current guide? I would love a similar guide for dsidxpress styling.