How to implement this IDX on your site
HIS recommends that you use an iframe or a frame to display this IDX on your site. Due to the nature of the content and the nature of iframes, you should use some javascript to control the look of the iframe. Please see this code:
<iframe src="YOURIDXURL" id="the_iframe" width="100%" height="3000px" frameborder="0"
onload="window.scrollTo(0, 0);"></iframe>
Please note that the “onload” command will cause the parent window to scroll back to the top of the page when the content of the iframe finishes loading. This helps when the user clicks a link low in the content and the iframe reloads but the parent does not. This will reduce confusion for the user by making it seem as though the entire page is reloading.
This iframe method is certainly not your only option, but our experience suggests it is the best balance between ease of use and consistency in user experience.
How to implement this IDX in WordPress
The best way to do it is to create a page, and use the iframe technique mentioned in the topic above. Please note… the free and paid hosted WordPress websites will strip out some HTML code (including iframe code) if you put it on your pages. In these cases, you won’t be able to iframe the page. You’ll be limited to linking to the IDX from your site. While it is not an especially integrated experience for your users, you’ll still be able to use the IDX features to the fullest extent.
For WordPress installations on your own hosting, you will be able to use the iframe method described above. You can type in the <iframe> code directly onto the page, or you can type it directly onto your theme files.
Styling and CSS Frameworks
IDX3 uses Twitter’s Bootstrap Framework for the majority of the elements on the screen. You will be able to control the CSS of your IDX3 by linking your own CSS file to your IDX using your IDX control panel and logging in with the user/pass that was provided to you when you first signed up. By linking your CSS file, you will effectively disable default styling and you’ll be faced with a nearly un-styled page. You’ll be able to adjust your styling from there. HIS recommends that you copy the existing IDX stylesheet and copy it to your own CSS file. You can then remove/replace whatever CSS you’d like without having to start from scratch.
You will not have access to change the HTML layout. Instead, all your styling will be done through CSS.