40% OFF EVERYTHING
BLACK FRIDAY SALE
Buy Now

Multiple Badges

This topic contains 13 replies, has 3 voices, and was last updated by  Alex Rollin 5 years, 5 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • June 26, 2019 at 2:24 pm #494947

    Hui Ling Tan
    Expired Member
    Post count: 349

    Hi,

    In your documentation regarding “Featured Listings”, in your examples with “multiple badges”, your badges appeared side by side. Mine comes out as vertical blocks. I tried giving it an extra class and added the following custom css

    .inlinebadge {
    display: inline!important;

    but it didn’t work.Tried with inline-block and excluding !important but it didn’t work either.

    How can I make the badges appear side by side like yours?

    June 26, 2019 at 5:06 pm #494970

    Kor
    Moderator
    Post count: 16516

    Hi Hui Ling Tan,

    Thanks for your post. Could you share the URL of the page in question so that we could check on it? Also, provide your Website WP admin access here in private reply just incase we needed it.

    June 26, 2019 at 5:34 pm #494974

    Hui Ling Tan
    Expired Member
    Post count: 349
    This reply has been marked as private.
    June 26, 2019 at 5:39 pm #494975

    Hui Ling Tan
    Expired Member
    Post count: 349

    Just in case you require more detailed information, it’s the
    Archive Item Page, After Demo Title H2, the first two GD Post Badges.

    Also, I added the CSS under Jupiter > Theme Options > Advanced > Custom CSS.

    Thank you so much!

    June 26, 2019 at 5:41 pm #494976

    Kor
    Moderator
    Post count: 16516

    Hi there,

    Thanks for your reply. Try using this custom CSS code below and see if it helps. 

    .wp-block-geodirectory-geodir-widget-post-badge {
    display: inline!important;
}
    June 26, 2019 at 6:11 pm #494977

    Hui Ling Tan
    Expired Member
    Post count: 349

    Hi Kor,

    Thanks! But I only want certain badges to be inline. Are you saying I should use .wp-block-geodirectory-geodir-widget-post-badge> as the “extra class” for those particular badges I want to be inline?

    June 26, 2019 at 6:12 pm #494978

    Kor
    Moderator
    Post count: 16516

    Hi Hui Ling Tan,

    Thanks for your reply. Could you tell me which badge you want to inline?

    June 26, 2019 at 10:48 pm #495014

    Alex Rollin
    Moderator
    Post count: 27815

    For the record, if two badgers are placed into an HTML gutenberg block, and there is not carriage return or break or paragraph separating them, ie, right next to each other, and have the same alignment (left), they should show up right next to each other.

    June 28, 2019 at 5:42 am #495282

    Hui Ling Tan
    Expired Member
    Post count: 349

    Hi,

    Thanks for the replies.

    @alex: The badges are for different fields. Am I still able to do it the way you said?

    @Kor: It’s the Dining_deals and Dietary for the Archive Item Page.

    June 28, 2019 at 2:19 pm #495334

    Kor
    Moderator
    Post count: 16516

    Hi Hui Ling,

    Thanks for your reply. I’ve made some adjustments to the div class for you and you just need to apply this custom CSS code to achieve what you needed there. 

    .wp-block-geodirectory-geodir-widget-post-badge.inlinebadge {display:inline;}
    June 28, 2019 at 7:33 pm #495359

    Hui Ling Tan
    Expired Member
    Post count: 349

    Hi Kor,

    Thank you so much for your reply and help. I really appreciate it.

    I applied the CSS settings and it only worked if I set either the first post badge to be aligned {left} or both badges to be aligned left.

    1) However, the gap between the badges are too far apart so I added margin: 0 and padding: 0 to the snippet you gave me but that didn’t move them nearer to each other.

    2) Also the other badges where I didn’t apply the extra class, ie I wanted them to be on the next line, went out of alignment (became centred) and I couldn’t move it back to the left even when I set it to be aligned left. The badge that got affected specifically is the one with Field: Cuisine

    Thank you so much for looking into this once again.

    June 29, 2019 at 5:00 pm #495453

    Kor
    Moderator
    Post count: 16516

    Hi Hui Ling Tan,

    Thanks for your reply. I’ve just taken another look at your Website and it looks like you’re making it worse. 🙂 Let try converting the widgets into shortcodes using this method https://wpgeodirectory.com/docs-v2/geodirectory/shortcode-builder/ and use the classic editor to design the Achieve Items. Could you give it a try? It should give you more control of the placements.

    Thanks!

    June 30, 2019 at 7:15 am #495530

    Hui Ling Tan
    Expired Member
    Post count: 349

    Hi Kor,

    To be honest, I’m getting quite frustrated with this software. It seems like every time I overcome a hurdle, suddenly something else comes up.

    You see the blocks are coming up with error messages about it having unexpected or invalid content. In the first place, I learnt how to use blocks because the documentation stated that this was the best way to do it.

    I’ve spent alot of time on the directory and different issues keep coming up.

    I’m just afraid that after all the time I spend to learn how to do it a different way, I might end up with error messages like what I’m experiencing now.

    Are you able to see what is causing the blocks to have those error messages?

    July 1, 2019 at 4:32 pm #495709

    Alex Rollin
    Moderator
    Post count: 27815

    That can sometimes happen if the page doesn’t save fully or if options are updated and then a new version of the page is created.

    Gutenberg is still very new, all things considered, and we are doing our best to work the bugs out alongside WordPress but it isn’t perfect yet.

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount