[Resolved] Display of myCred Badges on Buddypress Profiles?

[Scaffies]

Hello,

we are VERY happy with the GeneratePress theme!! So much faster and cleaner than what we had before!

Just one small thing:

we are using the myCred badges, and wonder if the order of appearance can be changed on the member profiles?

They get stacked on top of each other, which takes a lot of space, and requires much scrolling down, the more badges a member earns. In the (admin-only) WebSite URL below is a link to a screenshot of my own profile to illustrate.

Is there any way to have them appear next to each other, in a row?

Your feedback & help would be greatly appreciated!!

Kerrie
from the Scaffies Volunteer Admin Team

[David]

Hi there,

really need to see the actual page to be able to provide a fix for that.
Or if you can right click and inspect the myCred container and share a screenshot of its HTML i may be able to assist.

Thanks for the awesome feedback – glad you’re enjoying the theme

[Scaffies]

Hello David,

thank you for responding!

It may be best to give you a trial account to the website – how can we best send you the credentials? (Here it would be publicly visible, I assume, and there are no options for admin-view-only attachments).

Did look around and made a screenshot of the myCred container analysis (is this what you were referring to?) – screenshot link:
URL: https://scaffies.nl/wordpress/wp-content/uploads/2020/01/myCredContainer.png

On a different page, where the badges are inserted by short-code, they are sideways (a space between them would be nice, but I am glad they are sideways somehow). This would be very helpful to have shown like this on the Buddypress member profiles – screenshot link:
URL: https://scaffies.nl/wordpress/wp-content/uploads/2020/01/myCred-Shortcode-List.png

Unfortunately, all this CSS is not my area of expertise at all.

Any help is greatly appreciated!

Kevin-Stephen
Volunteer Administrator

[David]

Try adding this CSS:

#mycred-users-badges .col-xs-12 {
    display: flex;
    flex-wrap: wrap;
}

[Scaffies]

Thank you David!

However, when implementing it with Code Snippets, it produced this error message:

Don’t Panic

The code snippet you are trying to save produced a fatal error on line 3:
syntax error, unexpected ‘:’

The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

Code screenshot: https://scaffies.nl/wordpress/wp-content/uploads/2020/01/myCred-code-snippet-error.png

[Scaffies]

Also got this:

Howdy!

Since WordPress 5.2 there is a built-in feature that detects when a plugin or theme causes a fatal error on your site, and notifies you with this automated email.

In this case, WordPress caught an error with one of your plugins, Code Snippets.
[..]
When seeking help with this issue, you may be asked for some of the following information:
WordPress version 5.3.2
Current theme: GeneratePress (version 2.4.1)
Current plugin: Code Snippets (version 2.14.0)
PHP version 7.3.13

Error Details
=============
An error of type E_PARSE was caused in line 3 of the file /home/scaffies/domains/scaffies.nl/public_html/wordpress/wp-content/plugins/code-snippets/php/admin-menus/class-edit-menu.php(213) : eval()’d code. Error message: syntax error, unexpected ‘:’

(If this helps any in diagnosis)

[David]

That code is CSS you can add it to either:

Customizer > Additional CSS

or

Child theme styles.css

[Scaffies]

BRILLIANT!!!!

This absolutely worked – thank you so much!!

(sorry I was so inept to implement it correctly at first).

Thanks again, this makes a very big difference to us – we really appreciate your help!

For the Scaffies Admin Team,
Kevin-Stephen

[David]

Awesome – glad to be of help 🙂

[Scaffies]

Hello,

a good year ago, you were so kind to help us with the display of myCred member badges in Buddypress (which were stacked on top of each other, not in a row). With your fix that worked beautifully, thanks again for that! The code you sent at the time (see above) to implement in the GP custom configuration did the trick.

However, in the mean time, after the last theme update, the badges suddenly appeared all much bigger (instead of the 100×100 pixel size before). In parallel there was also an upgrade to Pakistan-based myCred (which refuses to perform any customer support for us due to the nature of our community, even though we pay them a hefty sum for their premium version), and we had hoped a subsequent update from either you guys or myCred would fix the appearance. However, there have been any.

So I am hoping, is there another small bit of code inside the GP theme config we could add to the one you sent in January 2020, which could bring back the size of the badges to the 100x100px it used to be? We would be eternally grateful for it.

In the private information field I put in two links showing the “Inspector” information on the badges; it seems they are displayed in 150×150 instead of the defined 100×100 pixels (pics edited to be safe for work).

Kevin-Stephen
Volunteer Administrator

[David]

Hi there,

try adding this CSS to the site:

#mycred-users-badges .mycred-badge-image {
    width: 100px;
}

[Scaffies]

BRILLIANT!!!

Thank you so much!

This bit of code fixed it immediately.

I am very grateful for your quick and high-quality help, and so is everyone in our lagre community.

Thank you again, needless to say we are *very* happy with the theme and even happier with the excellent support!

Kevin-Stephen
@admin7
Volunteer Administrator

[David]

Awesome – glad to be of help!

[Author]

Posts