1. Home
  2. Docs
  3. Directory Design & Layout
  4. Styling

Styling

Add border to Directory listings

Business Directory Outline

To add a Border to all of your Directory Listings, add this code to your CSS Customizer.

#businesslist .business {border: solid 1px #e9e9e9; padding: 5px; margin: 3px; }

CSS-to-add-border-to-Business-Directory-plugin

Add background color to Directory listings

Use this code to add a background color to every other listing in your Business Directory

  • Go to Customize >> Additional CSS

Use either:

#businesslist .business.odd_post {background: #f8f8f8;}

OR:

#businesslist .business.even_post {background: #f8f8f8;}
  • Be sure to hit the ‘publish’ button to save your changes!

Pro Tip: if you use both, the background will be changed for all listings.


Highlight VIP membership levels

CSS to feature top membership levels

To highlight a specific membership level with a red border,

  • Go to Customize >> Additional CSS
  • Add this CSS snippet:
#businesslist .business.membership-level-slug {border: 2px solid red;}

Where ‘membership-level-slug’ matches a membership level slug that you have created on your site. For example to add a red border to the sustaining member level, add this bit of CSS to your Customizer:

#businesslist .business.sustaining-member {border: 2px solid red;}
  • Be sure to hit the ‘publish’ button to save your changes!
CSS business directory feature members

Style individual Business categories

Add CSS to Categories

To style an individual business category layouts with a blue border, use:

#businesslist .business.category-slug {background: #E0D1EE;}

Where ‘category-slug’ matches a category slug that you have created on your site. For example in the example shown below, the dental category has been given a light blue background by adding this bit of CSS to the Customizer:

#businesslist .business.dental {background: #ddf6fd;}
CSS business directory feature categories

Add Shadow ‘Motion’ to Directory Layout

To add an interior shadow that shows on mouse-over, add this bit of CSS to your Customizer:

#businesslist .business:hover { padding: 10px; box-shadow: inset 0 -2em 2em rgba(0,0,0,0.1), 0 0 0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(0,0,0,0.3); }

To add an exterior shadow that shows in mouse-over, add this bit of CSS to your Customizer:

#businesslist .business:hover { padding: 10px; -webkit-box-shadow: 3px 3px 5px 6px #e8e8e8; -moz-box-shadow: 3px 3px 5px 6px #e8e8e8; box-shadow: 3px 3px 5px 6px #e8e8e8; }

Looking for more options to Display your Business Directory?

Need some help? Reach out to our support team, we are happy to help!

Was this article helpful to you? Yes 5 No