How We Gave an IDX Broker Listings Page a Fully Custom Look

By Sarah Lennon

7 minute read

We recently completed a custom IDX Broker integration for REV Real Estate in Cody, Wyoming.

IDX Broker already provides robust MLS integration, property search, mapping, saved searches and all the core functionality a real estate website needs. Our objective wasn’t to change any of that. It was to make the listings experience feel like a natural extension of the REV website while preserving everything IDX Broker already did well.

REV’s website had already established a distinctive visual identity built around deep green, gold accents, square geometry and clean typography. While the standard IDX Broker listings pages worked perfectly, they looked and felt disconnected from the rest of the website.

Achieving that level of integration meant understanding where WordPress ended and IDX Broker began, identifying which system controlled each part of the interface, and carefully adapting the presentation without affecting the underlying functionality.

This article explains the process we followed and why the work had to be divided between WordPress and IDX Broker. It isn’t a guide to configuring IDX Broker. It’s a case study in custom front-end integration.

The Starting Point: A Generic IDX Broker Listings Page

The original listings page did exactly what it was designed to do. Visitors could search properties, explore the map, save searches and open individual listings without issue.

Visually, however, it followed IDX Broker’s default design. Blue buttons, rounded corners, standard map pins, registration screens and the default property popup all contrasted with the rest of the REV website.

We approached the project in two stages. First, we restyled the main listings interface using carefully targeted CSS within WordPress. Once that was complete, we turned our attention to the property popup, which required a completely different approach inside IDX Broker itself.

Step One: Understanding What WordPress Controlled

Before writing a single line of CSS, we needed to understand where every part of the listings experience was actually being generated.

IDX Broker supplied the property data, search tools and listing interface, while WordPress controlled the surrounding website and elements of the page presentation. Knowing where one system ended and the other began determined every step of the project. 

Using Chrome’s Developer Tools, we inspected the HTML generated by IDX Broker and identified the classes and IDs responsible for each visual element. Rather than applying broad CSS rules that risked affecting unrelated parts of the page, we targeted only the components we wanted to change. These included the search controls, action buttons, notification bar, map markers, price-reduction badges, favourite icons, registration elements and homepage listing widgets.

The functionality remained completely untouched. Our work focused entirely on presentation, replacing the default IDX styling with a design that reflected the visual language already established across the REV website.

Restyling the Listings Page Through WordPress CSS

The first phase of the project focused on the main listings interface. Using WordPress’s Additional CSS, we created a tightly scoped stylesheet that targeted only the IDX elements we wanted to restyle. That level of precision was important because broad CSS rules can quickly affect the map, listing cards or responsive layout in unexpected ways.

We discovered this early in the project. One layout experiment altered the relationship between the map and the listing results, so rather than forcing a completely new page structure, we stepped back and changed our approach. The existing IDX layout worked well, so we left it intact and concentrated on applying REV’s design system.

Over approximately 200 lines of CSS, the interface was transformed to match the rest of the website. Buttons adopted REV’s green and gold colour palette, rounded corners became square, map pins and price-reduction badges were restyled, registration elements were updated, and the homepage listing widgets were redesigned to reflect the same visual language. Property cards also received improved spacing, shadows and calls to action, creating a much more consistent experience.

The underlying IDX Broker functionality remained exactly the same. Search tools, listings and map behaviour continued to operate as before, but the interface now looked like it belonged to the REV website rather than a separate application.

Finding the Right CSS Targets

Writing the CSS was only part of the job. Identifying the correct elements to target took just as much care.

Rather than guessing class names, we inspected the page using Chrome Developer Tools and examined the HTML generated by IDX Broker. A single button can be controlled by several selectors, while elements such as map pins, badges and favourite icons often change their classes depending on whether they are active, selected or being hovered over.

By documenting those variations first, we were able to write precise selectors that affected only the intended elements without introducing unwanted changes elsewhere on the page. The result was a stylesheet that was organised, maintainable and designed specifically around IDX Broker’s HTML output rather than broad overrides that could create problems later.

Then We Reached the Property Popup

The final part of the project was the property popup displayed when a visitor clicked a map pin.

Unlike the rest of the listings page, the popup wasn’t being generated by WordPress. Although it appeared to be part of the REV website, it was actually being served by IDX Broker from its hosted platform.

That distinction mattered.

The CSS we’d written inside WordPress had no effect on the popup. Before making any changes, we had to determine which system actually controlled it. 

Using Chrome Developer Tools, we confirmed the popup belonged to the hosted IDX page. A simple test inside the IDX Broker Custom CSS area immediately proved the point. Changing the popup background confirmed we’d found the correct stylesheet. 

With that solved, we brought the popup into line with the rest of the REV website by applying the same colour palette and branding used throughout the listings experience. Links adopted REV’s green, accents matched the site’s gold highlights and the popup became visually consistent with the rest of the interface.

During this process we uncovered a second challenge.

The default popup itself leaves plenty of room for improvement. On listings with more information, the layout becomes cramped, text alignment becomes inconsistent and elements such as the price reduction badge can affect the overall balance of the card.

Naturally, our next step was to redesign the popup completely.

That turned out to be far more involved than expected.

Changing the popup’s width and internal layout created a series of responsive issues across desktop, tablet and mobile devices. A design that looked perfect on one screen size could quickly break on another because the popup is positioned dynamically by the mapping software rather than behaving like a normal webpage element.

Rather than forcing a solution that wasn’t production-ready, we decided to keep the existing popup structure while applying REV’s branding and focusing on the broader listings experience first. 

We’ll explore that challenge in a future article, where we’ll look specifically at rebuilding IDX Broker’s property popup into a fully responsive custom component.

The Finished Result

The finished listings page remains powered entirely by IDX Broker. Live MLS data, property searches, saved searches, favourites and map functionality all continue to work exactly as before.

What changed is everything visitors actually experience.

The listings pages now reflect REV’s branding, typography, colour palette and spacing, creating a consistent visual language across the entire website. Instead of feeling like a separate application, the property search now feels like a natural continuation of the site.

That was the objective from the beginning.

Custom Integration Goes Beyond Installation

Installing IDX Broker is only the starting point.

Achieving a seamless experience requires identifying which parts of the interface are controlled by WordPress and which are generated by IDX Broker, then carefully styling only the appropriate elements without affecting the underlying functionality.

There isn’t a single option that says “match the rest of my website.” That level of integration comes from understanding how the two platforms interact and refining the presentation layer while leaving the MLS engine untouched.

This project involved approximately 10–15 hours of development, testing and refinement across desktop, tablet and mobile devices. Much of that time was spent analysing the generated markup, tracing where each component originated, and ensuring every customization remained reliable as IDX Broker rendered live listing data.

Does Your IDX Search Feel Like Part of Your Website?

For many real estate websites, the property search is the most frequently used feature. Yet it’s often the point where the design suddenly changes and the user experience feels disconnected.

It doesn’t have to.

With the right technical approach, IDX Broker can deliver all of its MLS functionality while presenting a search experience that feels like it was designed as part of the website from day one.

At Big Orange Planet, we build custom real estate websites that combine powerful third-party platforms with thoughtful design and careful front-end development, creating websites that feel cohesive for visitors without compromising the tools working behind the scenes. Call 720 – 272 – 0770