After you have settled on a design for a real estate website, you don’t want the IDX property search and listings content to feel like a disjointed mismatch with your real estate website design. The IDX content should feel like it’s a natural part of your website without any distracting styling issues.
The IDX content we provide in iHomefinder accounts will adopt the general styling from theme you choose on WordPress websites, and it will generally work very well with the styling on website platforms other than WordPress, although some additional styling adjustments may be desired in those cases.
Testing IDX Styling With Your Real Estate Website Design
We recommend testing with a free trial account to determine very quickly what adjustments you may need to make for your real estate website design. Any styling changes you make using a free trial account will remain intact in your account when you convert the trial account to a paid account.
You may want to make some styling adjustments to IDX content no matter what website platform you’re using, so we make it easy to adjust IDX content styling using CSS. For example, adjustments to elements such as spacing, buttons, and text are made very easily with the CSS access we provide in our accounts.
Although we’re assuming you are a web developer with CSS skills, we realize you might be a client with some HTML skills who would like to make changes yourself. If that’s you and you need to brush up on CSS basics, there are many CSS tutorials available online, such as this one from Codeacademy.
Locating CSS In IDX Content
Once you have a trial or paid account added to your site, it’s easy to identify the CSS code to alter within the IDX pages using Firebug for Firefox or Stylebot for Chrome (Firebug for Chrome does not work well).
Here are the steps to locate CSS code for elements you want to alter:
- Click on the selection tool button
- Click on the item you wish to modify with CSS
- Once a item is selected, it will show the section of code below with the
you will need to hide
- Copy the ID/Class tag
- You will be able to modify CSS using the options discussed below
Styling IDX Content With CSS On WordPress Websites
There are two locations where you can enter CSS to adjust IDX content on WordPress websites which are discussed in more detail below. One option is not better than the other, so it really comes down to your preference. Just keep in mind where your custom CSS code was entered so you don’t accidentally lose it! In fact, you might even want to keep a backup of the code in a text file that is separate from your site and update the backup text file whenever you update the code. It would probably also be helpful to note in your backup file which WordPress theme the CSS code was used with.
Optima Express CSS Override
Use this option if you’d like to apply CSS overrides within the Optima Express plugin.
In your WordPress dashboard, go to the Optima Express menu and select Configuration where you will find a field labeled CSS Override. CSS entered into this field will take priority over all other CSS within the WordPress page.
After adding your CSS here, select Save Changes to finalize the changes.
Adding CSS to a WordPress Theme
You can also add CSS to a theme’s style.css file by navigating in your WordPress dashboard to Appearance > Editor. From here you can modify any CSS as well as add CSS code.
Styling IDX Content With CSS On Non-WordPress Websites
For websites not running on WordPress, add your CSS code to the CSS Override section located in your IDX Control Panel.
In your Control Panel, navigate to Setup > Design/Branding Setup > CSS (tab), and enter the class and value into the Style Override field.
Click on Submit when you are done to finalize the changes.
Original source: https://www.ihomefinder.com/blog/web-developer-resources/css-and-your-real-estate-website-design/
