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.

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

add border to biz directory listings

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:

.business.odd_post {background: #f8f8f8;}

OR:

.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

Add CSS to Membership Levels

To highlight a specific membership level with a red border,

  • Go to Customize >> Additional CSS
  • Add this CSS snippet:
.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:

.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:

.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:

.business.dental {background: #ddf6fd;}
CSS business directory feature categories
Was this article helpful to you? Yes No