Change Labels on the Grid Layout

Many users want to change the labels displayed on the Grid Results template to something more user-friendly.

Unlike many other IDX Broker field labels, these labels cannot currently be renamed through MLS Settings.

You can learn more about standard field renaming here:

http://support.idxbroker.com/customer/en/portal/articles/1919143-rename-fields?b_id=10433

Before You Begin

You should be familiar with browser developer tools before attempting these changes:

https://developers.idxbroker.com/lesson/developer-tools/

Inspect the Label

The first step is to inspect the label element using your browser developer tools.

For example, inspecting the Bedrooms field on the Grid template will reveal HTML similar to:

<span>3</span>

within a container class similar to:

.IDX-resultsField-bedrooms

Using CSS ::after

To modify the displayed label, you can use the CSS ::after selector.

Example selector:

.IDX-resultsField-bedrooms span::after

This targets the <span> element inside the Bedrooms field and appends custom text after the value.

Example CSS

The following example changes the Bedrooms label to display as “Beds”:

.IDX-resultsField-bedrooms span::after {
    content: " Beds";
}

Customizing Other Labels

To change additional labels:

1. Inspect the desired field using developer tools.
2. Locate the appropriate field class.
3. Replace the class name in the selector.
4. Update the content value with your preferred label text.

Example:

.IDX-resultsField-baths span::after {
    content: " Baths";
}

Notes

• These changes are purely visual and performed with CSS.
• The original underlying field names are not modified.
• Custom CSS can typically be added through:
  • Your website stylesheet
  • IDX wrapper CSS
  • Theme customizer
  • Custom CSS plugins or tools