Note: The IDX Support Team cannot support Custom CSS. You must be familiar with CSS to use the Custom CSS features in IDX Broker.
Your Global Wrapper and Sub-headers allow you to dictate the branding, navigation, and overall appearance of your IDX pages. To change the appearance of the IDX templates themselves, you can use the Custom CSS area of your IDX control panel. Click Design in the main menu, Website in the submenu, then Custom CSS.
A good free resource that can assist you with CSS is W3Schools.
CSS Levels
By default, you should see the Global CSS settings load here first. You can access the other levels of CSS by clicking on "Categories", "Pages", or "Saved Links".
- Global - This CSS will apply to ALL IDX pages on your account.
Category, Page and Saved Link CSS are used to apply style attributes that differ from your global CSS attributes on only specific IDX pages.
- Categories - This CSS will apply to all IDX pages within a category that you choose (search pages, results pages, detail pages, etc.)
- Pages - This CSS will apply only to the IDX page that you choose.
- Saved Links - This CSS will apply only to the Saved Link that you choose.
The category level CSS will always trump the global CSS, and the page level CSS will trump any existing category CSS and global CSS.
CSS Types
Once you have chosen which level of CSS you would like to edit, choose which CSS Type you want to work with using these options:
- Desktop - This is CSS which will display on a computer browser (most common).
- Mobile - This is CSS which will display when your IDX pages use the IDX Mobile Wrappers, which are enabled under Design -> Settings -> Global -> Mobile. For more information on IDX Mobile Wrappers, click here.
- Printable - This is CSS which will display in the printable version of one of your Details pages. The printable versions are accessible from a link on the details page. Note: this option is inaccessible unless you are editing the Details Page CSS in either Category or Page level.
Customize Your CSS
You can add your custom CSS into the text area provided.
In the Categories and Pages sections you will see a left sidebar listing all the available categories or pages that you can add CSS to. If you have already added some custom CSS to any of them it will be indicated via an icon. indicates a Category level CSS is applied in this Category,
indicates a Page level CSS is applied, and
indicates a Saved Link CSS.
When you are finished customizing your CSS, click Save Changes. View one of your IDX pages to see your Custom CSS in action!