Skip to main content

CSS Best Practices in IDX Broker

Learn how CSS works within IDX Broker, how the different CSS levels interact, and how to customize IDX pages and widgets using custom styles.

Overview

Your IDX Broker account includes several ways to customize the appearance of your IDX pages using CSS.

Your:

  • Global Wrapper
  • Sub-Headers
  • Custom CSS

all work together to control the branding and styling of your IDX pages.

To access the Custom CSS editor:

  1. Log in to your IDX Broker Dashboard
  2. Navigate to Designs
  3. Select Custom CSS

Important Notes

Note: The IDX Support Team cannot provide support for custom CSS implementation or troubleshooting. You should be familiar with CSS before making custom styling changes.

Helpful CSS resources:

Modern browser developer tools can also help inspect CSS classes and IDs:

  • Chrome DevTools
  • Firefox Developer Tools
  • Edge DevTools

Using Browser Developer Tools

Developer tools allow you to inspect:

  • HTML structure
  • CSS classes
  • IDs
  • Applied styles
  • Responsive/mobile layouts

Open Developer Tools

Google Chrome / Edge

  • Right-click any element
  • Select Inspect

Firefox

  • Right-click any element
  • Select Inspect

You can then identify:

  • CSS selectors
  • Existing styles
  • Conflicting CSS rules

Using !important

In some cases, your custom CSS may not override existing IDX Broker styles depending on CSS load order and specificity.

You may need to use the !important declaration.

Example:

p {
  color: red !important;
}

Use !important sparingly, as excessive use can make future CSS maintenance difficult.

CSS Levels in IDX Broker

IDX Broker supports multiple CSS levels that allow you to apply styles globally or only to specific pages.

By default, the Global CSS section loads first.

Additional CSS levels are available under:

  • Categories
  • Pages
  • Saved Links

CSS Level Hierarchy

Your Stylesheets

These styles come from your website when the IDX wrapper is applied.

Applies to:

  • ALL IDX pages

Global CSS

Global CSS applies custom styling to:

  • ALL IDX pages

Use this for:

  • Site-wide typography
  • Button styling
  • Colors
  • Layout adjustments

Category CSS

Category CSS applies only to a specific category of IDX pages.

Examples:

  • Search Pages
  • Results Pages
  • Details Pages

Use this when styling should differ by page type.

Page CSS

Page CSS applies only to a single IDX page selected from the dropdown menu.

Use this for:

  • One-off layouts
  • Special landing pages
  • Unique design customizations

Saved Link CSS

Saved Link CSS applies only to a specific Saved Link.

Useful for:

  • Campaign pages
  • Custom search experiences
  • Niche landing pages

CSS Priority Order

CSS specificity inside IDX Broker follows this hierarchy:

  1. Page CSS
  2. Category CSS
  3. Global CSS
  4. Wrapper/Stylesheet CSS

This means:

  • Page-level CSS overrides Category CSS
  • Category CSS overrides Global CSS

CSS Types

Each CSS level supports multiple display types.

Desktop CSS

Used for:

  • Desktop and laptop browsers

This is the most commonly edited CSS type.

Mobile CSS

Used when IDX pages are viewed on:

  • Phones
  • Tablets
  • Mobile devices

Use this for:

  • Responsive layouts
  • Mobile spacing
  • Smaller typography adjustments

Printable CSS

Used for printable versions of Details Pages.

This option is only available when editing:

  • Details Page Category CSS
  • Details Page Page CSS

Printable pages are accessible through the print link on property details pages.

Adding Custom CSS

Enter your CSS rules into the provided editor area.

When editing:

  • Categories
  • Pages
  • Saved Links

you will see indicators showing where custom CSS already exists.

These indicators identify:

  • Category-level CSS
  • Page-level CSS
  • Saved Link CSS

Saving Your Changes

After adding or editing CSS:

  1. Click Save Changes
  2. Refresh your IDX page
  3. Verify the styles are displaying correctly

Widget CSS

Widgets use their own CSS system separate from IDX page CSS.

Because widgets typically exist outside IDX Broker pages on your website:

  • Custom CSS from the IDX Dashboard does not automatically affect widgets.

Each widget contains inline widget-specific CSS.

Editing Widget CSS

To edit widget CSS:

  1. Navigate to Designs → Widgets → Manage
  2. Select the edit icon next to the widget
  3. Scroll to the bottom of the Widget Options tab
  4. Locate Modify Widget CSS
  5. Click Show

You can then:

  • Edit existing widget CSS
  • Add new CSS rules

Widget CSS Best Practices

Recommended Approach

If you want:

  • ALL widgets styled consistently

it is usually better to place CSS in your:

  • website stylesheet
  • theme stylesheet
  • custom site CSS

rather than editing each widget individually.

Otherwise, each widget must be updated separately inside IDX Broker.

Best Practices for IDX Broker CSS

Keep CSS Organized

Use comments to organize sections:

/* Buttons */
.idx-button {
  background: #000;
}

/* Search Results */
.idx-results-price {
  color: #333;
}

Avoid Overusing !important

Only use !important when necessary to override existing styles.

Test Mobile Layouts

Always verify changes on:

  • Desktop
  • Tablet
  • Mobile devices

Use Browser Inspection Tools

Developer tools are essential for:

  • Finding selectors
  • Debugging layout issues
  • Testing changes live

Additional Resources

 
 
 

Related articles

Powered by Zendesk