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

Spacing


Add space after single Business listing

Add space after single business listing

If your theme is showing additional content under individual posts, you may want to create a bit of space at the end of the listing.  Add this bit of code to your CSS Customizer:

.single #page .entry { margin-bottom: 80px; }

listing spacing I
listing spacing II

Center logo on single Business listing

Move Business Logo to center of Single Business Listing post and resize.

Add this code to your CSS Customizer.

#business .logo {display: block; float: none; margin: 0 auto; text-align: center; width: 200px; height: 200px; }

biz directory logo layout I
biz directory logo layout II

Center or hide featured image on single Business listings

The individual listings in your Business Directory are custom post types. These posts use the formatting from your theme. If your theme is using / displaying a featured image for posts, you can center the featured image using the following code in your CSS Customizer:

#business .wp-post-image { display: block; float: none; margin: 0 auto; text-align: center; width: 200px; height: 200px; }

To hide the featured image, add this code to your CSS Customizer:

#business .wp-post-image { display: none; }


Remove extra spaces from address display

Sometimes there are extra spaces after the business address in the edit screen. This can create an extra line in the display.

with a return

Go to Businesses >> Edit Business to remove the extra spaces after the address line:

without a return

Center search feature

When you add the Directory search shortcode to your page, the search feature will be left-aligned.

To center the search feature, add this bit of CSS to your Customizer:

#business-search.business_search_form {text-align: center;}
center search feature Business Directory plugin

Display search feature full-width


Hide search term

To hide the search term and only display the category search option, add the following bit of CSS to your Customizer:

#searchtext {display: none;}
#business-search-term {display: none;}
#business-search h3 {display: none;}
Was this article helpful to you? Yes No