A powerful feature included in IDX Broker is the ability to display CSS based on whether or not a lead is logged in to their My Listing Manager account on your IDX pages. This is accomplished by using two unique classes when writing your custom CSS.
Note: The IDX Support Team cannot support custom CSS. You must be familiar with CSS to use the Custom CSS features in IDX Broker. A couple of good free resources that can assist you with CSS are W3Schools and Firebug.
Both of these classes are attached to the main div containing your IDX tools with the ID #IDX-main.
- .IDX-loggedIn – Any CSS attributes associated with this class will display if a lead is logged in.
- .IDX-notLoggedIn – Any CSS attributes associated with this class will display if a lead is not logged in.
One of the most common ways of using this feature is to hide certain property information from site visitors, and then only display it to them after they sign up and login as a lead. In the example below, we will implement this feature to hide listings’ street addresses from search results pages from normal site visitors using the .IDX-notLoggedIn class. We will only be displaying the street address for listings on search results pages to site visitors after they signup and login as a lead in your account.
First, login to your IDX control panel and click Designs in the main menu, and Custom CSS in the submenu.
Keep in mind that you can add custom CSS for these classes globally, or by the category or page. For more information on using Custom CSS, please see this article. For our example, we will be using the global standard CSS section. We’ll need to add the following CSS to this section:
.IDX-notLoggedIn .IDX-resultsAddressNumber {display: none;}
.IDX-notLoggedIn .IDX-resultsAddressDirection {display: none;}
.IDX-notLoggedIn .IDX-resultsAddressName {display: none;}
.IDX-notLoggedIn .IDX-resultsEndAddressCommaOne {display: none;}
You’ll see that we began each line of CSS with our lead login state class – .IDX-notLoggedIn. Then we named the class for each piece of the street address we want to hide. You can use a tool like Firebug to easily identify CSS classes and IDs on IDX pages. Lastly, we added the display: none; attribute to each line of CSS to hide each element.
Once these changes are saved, the street address will be hidden on our search results pages.
Now, we’ll take a look at what the same search results page looks like while logged in as a lead. You can see the street addresses for the listings are now visible.
Using this feature in conjunction with your lead registration rules gives you the flexibility and control to display information to your site visitors based on their status as a lead. In the example above, we are using the street address information as an incentive for site visitors to sign up.
You can also use these classes with any custom content you create in Sub-headers and/or Wrappers. These classes give you a tremendous amount of flexibility with the content you provide to site guests and registered leads.
This is just one of many ways you can leverage this advanced feature to customize your IDX pages and generate more leads!