• Resolved PalKat

    (@palkat)


    Hello,

    I am in the process of changing my wordpress theme over from Valenti V5 to Extra by Elegant Themes.

    The directory plug in works great with the Extra theme with one exception, when I go to view directory listings by category it is not using the theme template that all the other components/pages of business directory use. this is hard to explain so I will include url examples.

    If you go to our BBS Directory you will notice the categories and content are contained inside a what box.
    https://test2.8bitboyz.com/bbs-directory/

    How ever once your there if you click on any category it will load the list of items in that category but no white box to contain them. looks like text floating on the page/website background color.

    From there if you click on any one of the listings to view the details it will load the content inside a white box again.

    So how do I get the “Category Listings” as I call it, to show up in a white box like all the other content? I have spent a week on this and I am stumped, I feel it is how it is calling up the category listing and not applying it to a default theme template like all the other parts of the Business Directory.

    I hope this makes sense.
    Thanks for your product and the great support!
    Shane.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter PalKat

    (@palkat)

    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. πŸ˜‰

    Plugin Support Garret L

    (@garret1996)

    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,

    Thread Starter PalKat

    (@palkat)

    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;
    }
    Thread Starter PalKat

    (@palkat)

    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!

    Plugin Support Garret L

    (@garret1996)

    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,

    Thread Starter PalKat

    (@palkat)

    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.

    Thread Starter PalKat

    (@palkat)

    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!

    Plugin Support Garret L

    (@garret1996)

    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, 6 months ago by Garret L.
    Thread Starter PalKat

    (@palkat)

    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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Directory listings display not using theme template’ is closed to new replies.