Please consider registering

sp_LogInOut Log In sp_Registration Register

Register | Lost password?
Advanced Search

— Forum Scope —

— Match —

— Forum Options —

Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed Topic RSS sp_TopicIcon
How to use Custom Styles with BD (2.1+)
Business Directory Support
August 9, 2012 - 3:38 pm
Member Since: July 6, 2011
Forum Posts: 1463
sp_UserOfflineSmall Offline

Starting with 2.1, Business Directory incorporated the ability to pull styles from a custom CSS file that isn't overwritten on upgrade. For those with a quirky theme, or the desire to heavily customize BD's look to match their site, this is great news...

How to use the BD Custom Style CSS file:

1) Create a file called wpbdp_custom_style.css under wp-content/plugins on your site. This location won't be overwritten by any plugin or Wordpress on upgrade. You may also place this file under your theme directory as well.

The plugin is forgiving in locating the file--any of the following names will work for the custom style file, in EITHER location:
- wpbdp_custom_style.css
- wpbdp.css
- wpbusdirman.css
- wpbdp_custom_styles.css
- wpbdm_custom_style.css
- wpbdm_custom_styles.css

That means you should be careful not to have TWO custom files laying around. Pick one place, stick with it! I recommend the wp-content/plugins area as it can't be overwritten by a theme upgrade.

2) Place any style changes you need in this file. It will be loaded such that these changes will take precedence in the CSS hierarchy over other styles in BD.

How do I know what I want to put in this file?
- Good question! Use Firebug (http://getfirebug.com/) with IE or Firefox to determine what styles are being applied to any given element. Once you know what style is causing an issue, you can override it via the custom style CSS file.

Documentation: http://businessdirectoryplugin.com/docs FAQ: http://businessdirectory.com/support-forum/faq
September 13, 2012 - 1:08 am

Thanks I've created the file spbdp_custom_style.css, placed it in the plugins folder and edited the title section from the original CSS. No change. Any more info on what specifically to do to make the font smaller? I've removed the H1 tag, Changed it to H4 etc nothing happens. I must be doing something wrong. 


.ldetails { padding:10px; background:#eeeeee;}
#lco { width:100%; -moz-box-shadow: 0 5px 5px #dddddd;
-webkit-box-shadow: 0 5px 5px #dddddd;background:#f7f7f7; margin:10px 0;}
#lco .title { width:50%;float:left;padding:10px;font-weight:bold;font-size:10px;margin-top:5px;}
#lco .title { border:0;margin:0;}
#lco .button { float:left;width:40%;padding:10px;}
#lco .button input { }
#lco .title input { }
#lco .title .submitlistingbutton { margin-right:10px; }
#lco .button .viewlistingsbutton { margin-right:10px;}
#lco .button .submitlistingbutton { margin-right:10px;}

Business Directory Support
September 18, 2012 - 3:34 pm
Member Since: July 6, 2011
Forum Posts: 1463
sp_UserOfflineSmall Offline

Those changes above don't look like they override Business Directory classes. Have you tried using Firebug to inspect the actual elements in your page to find out the correct class names and element IDs?

Documentation: http://businessdirectoryplugin.com/docs FAQ: http://businessdirectory.com/support-forum/faq
Forum Timezone: UTC 0

Most Users Ever Online: 103

Currently Online: StephenChax
10 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Member Stats:

Guest Posters: 2890

Members: 1631

Moderators: 0

Admins: 1

Forum Stats:

Groups: 1

Forums: 4

Topics: 5375

Posts: 22899

Newest Members: esaqele

Administrators: Business Directory Support: 1463