BuddyDev

Search

[Resolved] Badges size does not change

  • Participant
    Level: Initiated
    Posts: 4
    Marcel on November 16, 2020 at 10:39 am #34497

    Hi,

    I’m using the KLEO theme and when I change the size the badges are not changed.

    Tried it in the stylesheet.css from the KLEO child theme as well in the additional css under Dashboard>Appearance and in Dashboard>Appearance>Customizer>Extra CSS

    .item-list .bp-user-badges-badge-list img {
    max-width: 64px;
    max-height: 64px;
}

    Could you please help me out with this ?

    Kind Regards,
    Marcel

  • Keymaster
    Level: Yogi
    (BuddyDev Team)
    Posts: 3050
    Ravi on November 16, 2020 at 5:33 pm #34505

    Hi Marcel,

    Thank you for posting. Please try hard reloading your page or clear browser cache and check whether this rule is applying to the image or not.

    Regards
    Ravi

  • Participant
    Level: Initiated
    Posts: 4
    Marcel on November 16, 2020 at 7:15 pm #34512

    Hi Ravi,

    Already tried, also with other browsers ( Safari & Chrome ) and with inspection of both browsers it shows:

    bp-user-badges-badge-list img {
width: 32px;

    So it looks like it the adjustments will not override the default setting of 32px

    Any other idea how I can change this ?

    Kind regards,
    Marcel

  • Keymaster
    Level: Yogi
    (BuddyDev Team)
    Posts: 3050
    Ravi on November 17, 2020 at 10:19 am #34520

    Hello Marcel,

    I have tried above mentioned CSS rule with the kleo theme and it is working for me on directory page. Are you facing issue on members directory or single member page?.

    Regards
    Ravi

  • Participant
    Level: Initiated
    Posts: 4
    Marcel on November 17, 2020 at 10:54 am #34521

    Hi Ravi,

    The issue is on both, have you also KLEO as child theme ?

    Maybe you can check with inspection from a browser ?

    http://www.ktmco.nl/members

    http://www.ktmco.nl/members/marcel

    Kind Regards,
    Marcel

  • Keymaster
    Level: Yogi
    (BuddyDev Team)
    Posts: 3050
    Ravi on November 17, 2020 at 4:23 pm #34525

    Hello Marcel,

    Try using the following code.

    
.bp-user-badges-badge-list img {
    width: 64px;
    height: 64px;
}

    It will fix the issue

  • Participant
    Level: Initiated
    Posts: 4
    Marcel on November 17, 2020 at 5:54 pm #34540

    Thanks Ravi, that is working.

    However the badges looks not very well, misformed and don’t fit in the screen on the member page.

  • Keymaster
    Level: Yogi
    (BuddyDev Team)
    Posts: 3050
    Ravi on November 18, 2020 at 8:13 am #34545

    Hi Marcel,

    Thank you for your reply.

    Since we are scaling the images using CSS, Please make sure the scale factor is same. In other words, Please use a square image. They will look better. Also, I will recommend something like 128×128 size at most if we are going for 64px.

    Please let me know if that looks good or not.

    Regards
    Ravi

  • Participant
    Level: Initiated
    Posts: 4
    Marcel on November 18, 2020 at 3:41 pm #34554

    Hi Ravi,

    Yes it’s good now.., only need to find out how I can make nice badges from our own logo’s

    Thanks again

    Kind Regards,
    Marcel

You must be logged in to reply to this topic.

This topic is: resolved