Directory listings display not using theme template

I forgot to mention the URL in my question (https://test2.8bitboyz.com/bbs-directory/) is to a staging location so you will get a notice about the security “Potential Security Risk Ahead”, just accept the risk and continue. ??

Hi @palkat

Thank you for reaching out about this. I’m Garret from the customer success team and I’m sorry to hear that you’re having a problem here. I’ll be happy to help!

From what I can see, the CSS isn’t loaded onto this page for some reason. You should be able to copy the CSS over by following our guide. Here is an article about how to use custom CSS with Business Directory in a way that doesn’t get overwritten on an upgrade of Business Directory: https://businessdirectoryplugin.com/knowledge-base/how-to-use-custom-styles-with-bd/

If you have any questions or concerns with this, please let me know!

Best,

Hi Garret,

Thank you for the reply!

If I understand the article I need to create a .css file with one of those names stated in the article you linked to and place it under the wp-content/plugins folder.

I used the Firefox developer Console to compare the .css from a page that looks right to the one I am asking about that does not look right. Sure enough there are some differences. I coped the CSS code from the Developer Console on the page that has the look I want and pasted that code into a file called wpbdp.css and placed that file in the wp-content/plugins folder.

No change, I then renamed the css file to one of the other suggested names: wpbdp_custom_style.css and still did not work. I then copied the new .css file to the wp-content/theme folder and still no luck.

My gut says I am putting the wrong thing in the new .css file I created. I am copying the code from the developer console that is in the middle coloum but feel I am doing something wrong, can you see what I am doing wrong???

Here is the code I am putting in wpbdp.css file that if from a GOOD WORKING page.:

element {
}
body {
  cursor: url('https://test2.8bitboyz.com/wp-content/uploads/2016/09/arrow4.gif') 0 0, auto;
}
body {
  background: #ecf0f5;
  padding: 0;
  margin: 0;
  color: rgba(0,0,0,.5);
  font-family: Open Sans,sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  line-height: 1;
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
  vertical-align: baseline;
}
body {
  --wp--preset--color--black: #000000;
  --wp--preset--color--cyan-bluish-gray: #abb8c3;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--pale-pink: #f78da7;
  --wp--preset--color--vivid-red: #cf2e2e;
  --wp--preset--color--luminous-vivid-orange: #ff6900;
  --wp--preset--color--luminous-vivid-amber: #fcb900;
  --wp--preset--color--light-green-cyan: #7bdcb5;
  --wp--preset--color--vivid-green-cyan: #00d084;
  --wp--preset--color--pale-cyan-blue: #8ed1fc;
  --wp--preset--color--vivid-cyan-blue: #0693e3;
  --wp--preset--color--vivid-purple: #9b51e0;
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
  --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
  --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
  --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
  --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
  --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
  --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
  --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
  --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
  --wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
  --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
  --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
  --wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');
  --wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');
  --wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');
  --wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');
  --wp--preset--duotone--midnight: url('#wp-duotone-midnight');
  --wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');
  --wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');
  --wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');
  --wp--preset--font-size--small: 13px;
  --wp--preset--font-size--medium: 20px;
  --wp--preset--font-size--large: 36px;
  --wp--preset--font-size--x-large: 42px;
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:root {
  --color-primary: #4a8eff;
  --color-primary-rgb: 74, 142, 255;
  --color-primary-hover: #5998ff;
  --color-primary-active: #3281ff;
  --color-secondary: #6c757d;
  --color-secondary-rgb: 108, 117, 125;
  --color-secondary-hover: #6c757d;
  --color-secondary-active: #6c757d;
  --color-success: #018e11;
  --color-success-rgb: 1, 142, 17;
  --color-success-hover: #0aad01;
  --color-success-active: #0c8c01;
  --color-info: #2CA8FF;
  --color-info-rgb: 44, 168, 255;
  --color-info-hover: #2CA8FF;
  --color-info-active: #2CA8FF;
  --color-warning: #FFB236;
  --color-warning-rgb: 255, 178, 54;
  --color-warning-hover: #FFB236;
  --color-warning-active: #FFB236;
  --color-danger: #ff5062;
  --color-danger-rgb: 255, 80, 98;
  --color-danger-hover: #ff5062;
  --color-danger-active: #ff5062;
  --color-green: #30b570;
  --color-blue: #0073ff;
  --color-purple: #8557D3;
  --color-red: #ff5062;
  --color-muted: rgba(69, 89, 122, 0.6);
  --wpdm-font: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
:root {
  --font-size-lg: 20px;
  --font-size-sm: 12px;
}
:root {
  --wp--preset--font-size--normal: 16px;
  --wp--preset--font-size--huge: 42px;
}
html {
  --bd-main-color: #d7e4f4;
  --bd-main-color-20: #d7e4f433;
  --bd-main-color-8: #d7e4f414;
  --bd-thumbnail-width: 150px;
  --bd-thumbnail-height: 150px;
}
html {
  --wp-admin--admin-bar--height: 32px;
}

Adding to that last reply they both show the same .css code in the firefox developer consol however the page in question:
https://test2.8bitboyz.com/bbs-listing/bbs_category/apple/

is listing under “grid” on the far right of the developer console:
GRID
Overlay Grid
div#wpbdp-listings-list.listings.dpbdp-listings-list.list.wpbdp-grid
Gride Display Settings
[ ] Displa line number
[ ] Display area names
[ ] Extend lines infinitely

and on the page that looks correct:
https://test2.8bitboyz.com/bbs-directory/
GRID
CSS Grid is not in use on this page

These are the only two differences I can see. You have the urls to both good and bad pages if you need to see.

Thanks!

Hey @palkat

It looks like you will want to use this CSS code here:

article {
 border-top:6px solid;
 border-color:#00A8FF;
 margin:0 0 24px
 padding:0;
 background:#fff;
 border-radius:3px;
 -webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);
 box-shadow:0 1px 3px rgba(0,0,0,.1);
 max-width:100%;
}

I copied this from your article class from the front page. Please try that and let me know how it goes!

Best,

Hi Garret,

WOW Your code worked PERFECTLY!!!

But how/where did you find it? I don’t see that article class in the Firefox or Chrome Developer Console. I guess I am not looking at the right place. Where am I going wrong?

I ask as the theme will be changing and I will need to pull this again with the theme updates.

Thanks for the great help!
Shane.

Good Morning,

I see I also need to pull the css for the heading font formats and the spacing between the thumbnail and text for this listings page in conjunction with the css you were able to extract for me yesterday that worked.

I spent yesterday afternoon and last night using the Developer Console on firefox and chrome and just am not able to find the css that controls what you found let alone the headings and spacing between the thumbnails and text.

Again if your able to share with me how you located what you found yesterday as I feel I am just looking in the wrong place at the wrong thing.

THanks again!

Hi @palkat

I found that code by right-clicking next to where it says BBS Listing at the top and found the <article> tag in the developer console. From here, there are 2 classes to copy. I made a quick video that will hopefully help: https://www.loom.com/share/6e9c2953f67b47aa9cdc240f5e39d1d4

As for the thumbnail issue, is this what you’re referring to? (See screenshot below)

View post on imgur.com

If so, you should be able to fix that by updating the plugin to the latest version.

Please let me know if that’s the case!

Best,

• This reply was modified 2 years, 7 months ago by Garret L.

Hi Garret,

Wow the code was right there in front of me, thanks the video is super helpful!!

The screenshot is exactly what I was referring to on the spacing, I will try the update and see if that fixes it. I wont be able to do that for a few days I think but will follow up on it.

Again thanks for all your help, I will let you know how it all works out, I feel it will be just fine thanks to you!

Have a great one!
S.