CSS on wpbdp generated pages

I want the header sidebar to show up on all regular pages, only NOT appear on ALL directory pages.

Hi Carol,

Sidebars are something that your theme controls for pages. We honor what they do as a custom post type.

I wouldn’t recommend using CSS to try and handle that. You should look under Appearance->Themes/Widgets and see if your theme has settings to control which BD pages can have sidebars or not.

For custom CSS, we have some tips on using it. Here is an article about how to use custom CSS with Business Directory in a way that doesn’t get overwritten on upgrade of BD: https://businessdirectoryplugin.com/support-forum/faq/how-to-use-custom-styles-with-bd-2-1/

Regardless, if it is the sidebar or not, my css I apply on the directory page gets wiped out on the automatically generated pages (such as listing details pages)

The CSS works perfectly on the directory page, pages that have (“/wpbdp-“) appended on the end, the css applied on the main directory page doesn’t apply.

CSS on https://www.rate-rent.com/roommate-directory vs. CSS on https://www.rate-rent.com/roommate-directory/wpbdp_category/roommate/

See the difference, my css gets wiped out.

It is also not about BD update because my CSS is always on a separate stylesheet.

Hi Carol,

First–how are you loading your CSS? Through your theme or using our custom CSS file?

Second, have you tried a conflict test? Here is an article about how to test for theme and plugin conflicts with Business Directory, which may help pinpoint the issue: https://businessdirectoryplugin.com/support-forum/faq/how-to-check-for-plugin-and-theme-conflicts-with-bd/ It’s quite possible something has caused a JS error and prevented the scripts from successfully loading on certain pages. It’s definitely something you should try.

I’m loading my css on a custom css stylesheet.

…and it is only because the pages with “/wpbdp-” appended on them are not in the Pages section but generated by your Business Directory Plugin, so the CSS applied to the Directory page (with the [businessdirectory] shortcode on it which CSS works), the generated detail pages are considered as SEPARATE pages but does not appear in the WordPress dashboard because it is script generated.

My question is where would I add CSS to append on ONLY the pages that are generated by your plugin? (automatically appends /wpbdp-xxxx to the end)

It definitely isn’t a theme or plugin issue, because those pages are created by the Business Directory Plugin.

Right now, I apply my css by page specific CSS code, ex: .page-id-682 (page where my directory shortcode is located), but on the SAME page with any “/wpbdp-” url appended on the end (listings, listings detail pages) the CSS will not apply. (That is still the .page-id-682 page, but BD generates additional HIDDEN sub-pages)

It definitely isn’t a theme or plugin issue, because those pages are created by the Business Directory Plugin.

Actually, that’s not entirely accurate here…

Our pages import JavaScript from any plugin that enqueues it. Some plugins make their JS page-specific, others are less…diligent, including it EVERYWHERE. So yes, we CAN have other scripts included, even on OUR generated pages. And theme CSS is everywhere, every page. The conflict test will check for ALL of that.

Can you please try the conflict test and report back?

Also–you say you’re loading this on a custom stylesheet. There are at least two places that can happen–can you be more specific? Is it your THEME’s custom CSS? Or the recommended one for BD as we outline in the article? Or something else? This mechanism of .page-682 you describe above sounds like the work of some custom plugin or perhaps a feature of your theme? That’s not standard WP/HTML/CSS behavior (which targets selectors based on ID, class or element) so I need to understand it.

If it’s NOT our recommended one, can you please try that specifically?

These tests will help speed up my understanding of what is going on here…

I will try to the conflict test and let you know.

I am using the Simple Custom CSS Plugin to write all my CSS styles that will not be affected by any Plugin or Theme update.

It is not .page-682…you’re missing syntax, your css won’t work anyway.

However, the .page-id-xxx is a general WordPress CSS code that targets a specific page, not any plugin relation. I thought all developers should know that by now.

Example: .page-id-(your page/post id number) div#main-header (or whatever css you want to change) {
max-width: 1200px; (or whatever css code you want to change)
}

It is a better to use a custom stylesheet to write your css for a specific page rather than going to that page and type:

<style text=”text/css”>
.entry-content h3 {
color: #CB0000;
}
</style>

above your content on the HTML tab

Or maybe I should apply the css on your Business Directory custom css sheet? Where is your custom css stylesheet?

Hi Carol,

So, it sounds like you’re using a third party plugin to do the custom CSS here–Since we have not tested that and it could be the source of the problem, I would recommend reading our article here and putting the BD custom CSS in this file, which we control the loading of…

https://businessdirectoryplugin.com/support-forum/faq/how-to-use-custom-styles-with-bd-2-1/

We discuss the location of the file and the naming convention in there.