Knowledge Base & Support Center

Customizing With CSS

OPTIMA EXPRESS (RESPONSIVE)

Customization for Developers

When customizing your WordPress pages you will want to take notice of these two locations to customize CSS:

  • Appearance > Editor > style.css (shown on left)
  • Optima Express > Configuration > CSS Override

 

Using Firebug to locate CSS

To help you identify the CSS code within the IDX pages you will want to download Firebug for Firefox or Stylebot for Chrome (Firebug for Chrome does not work well). Here are the main steps to finding the CSS code to alter:

  1. Click on the selection tool button.
  2. Click on the item you wish to modify with CSS.
  3. Once a item is selected, it will show the section of code below with the <div> you will need to hide.
  4. Copy the ID/Class tag.

You will be able to modify CSS within the CSS Override or style.css page. The next two steps will cover both options.

 

 

Option 1: Adding CSS to Optima Express’s CSS Override

If you want to override CSS with the Optima Express plugin, navigate to Optima Express > Configuration. CSS entered into this field should take priority over all other CSS within the WordPress page.

Click Save Changes to finalize changes.

 

 

Option 2: Adding CSS to a WordPress Theme’s style.css file

If you wish to add CSS to the themes style.css file, navigate to Appearance > Editor. From here you will be able to modify any CSS as well as add CSS code.

In the image you can see that I have hidden the div ID #ihf_detail_leadcapture_620 . The property display:nonehides the content within the div, while !important ensures that no other CSS will override this property.

Click on Update File to finalize changes.

note: !important can cause other display issues, so do not use this property unless changes are not being seen otherwise.

 

Did you find this article helpful?