View Full Version : Customizing Quick Search Module

03-22-2012, 11:59 AM
I'm working on www.capitalresidential.com. We recently received an email of the blog post "IDX quick search done right and other tips" regarding customizing the Quick Search IDX form. I'm aware that the one you used as an example was customized by the folks at Virtual Results. However, you indicate that some basic customizations can be done. So, I want to make some changes to the Search button. I have CSS skills and I'm able to apply some CSS to the class you provided (ds-quick-search-button). The problem is that this search button lives inside a table cell. I'd like to know where I can access the HTML code so that I can change the table rows and table data tags, so that I can move the search button to the right side of the search area. Currently, if I change the size of the search button using CSS (or use css float right), it expands the size of the cell and disrupts that layout of the rest of the search area because it is using HTML table code.

I tried IM chatting with DS but to no avail. I was told "we don't provide CSS support". I'm not looking for CSS support as I am capable of writing CSS code. I need to know how to access the HTML that currently controls the layout of the quick search module. My CSS code isn't going to help if I am restricted by the HTML table tags.

Where can I access the HTML that controls the layout of the quick search module?

Please advise.

Thank you,


Robert Larson
03-30-2012, 01:52 PM
Hi Lexy,

Unfortunately we do not have any way for you to extract and edit the HTML for your quick search module. Our quick search modules show up on your site with the use of our special script code like this:

<script src="http://modules.idx.diversesolutions.com/modules/quick_search/ModuleScript.aspx?pid=c10ec4a6-4799-4c37-b785-662d6fe8bb5d"></script>

When you add that script to your site, it literally builds the HTML for your search form on page load, as well as the supporting code for making the form functional. The good news about this "fresh" HTML is your search will always work, regardless of updates on our end... but the bad news is there is no static HTML that you can edit at will to add customization to your search.

When clients pay for custom quick search modules (or when someone like Virtual Results creates custom search modules), they have a static HTML form (or HTML that otherwise does not sync with DS changes at all) wrapped in code or script that makes the form otherwise functional. You could do the same if you are familiar with JS, but short of that, we encourage users to stick to just modifying their forms using CSS in conjunction with our number of columns editor.

Here's some tricks I've seen clients do with CSS. Both of these are a wit wonky, and may not be ideal solutions (not to mention: neither of these are changes/customizations we provide support for), but they may get you closer to what you're looking for...

1. remove the field labels and re-add your own
- add CSS that sets the class "ds-quick-search-name" to "display: none;"
- then manually type field labels above/around the script code, or better yet, add a background image that includes the labels as part of the image

2. customize the SEARCH Button class "ds-quick-search-button"...
- get rid of the border with "border: 0px;"
- add a background image with "background-image: url('http://mysite.com/mybutton.jpg');
- hide the button text with "text-indent: -9999em;"
- set the button size to match your image size with "width: 100px; height: 100px;"
- make it still look like a button with "cursor: pointer;"

I hope this helps a bit. We may add more user-friendly customization tools to our dsSearchAgent modules in the future, but for now they are built primarily out of function, with the bulk of changes made by custom programmers or partners.

Robert Larson
03-30-2012, 01:53 PM
btw: you can see the submit button image swap in action here: http://www.demosite.myagentcast.com/module.htm

09-22-2014, 08:44 AM
I am also wondering something similar. I am able to extract the form HTML and layout and also edit the CSS at will, but what I am having an issue with is actually getting the form button to work all the time. Once I pull the HTML out of the script and customize the form layout, the submit button will only work when you fill in all fields. Is the an "action" I can add to the form to prevent this. My client is looking to have just the omnibox and the search button. Seems like it would be a simple edit, but I cannot seem to get the form to submit. Any ideas/thoughts?