Make badges bigger

CSS is one option. Depending on what functionality/code is being used to generate the spots you’re referring to, it may be possible to filter what size of image to use, allowing you to specify a larger version. You’d need to poke through the code for that or let me know what you’re using to display the section and I can do a quick check myself.

I’m not sure which CSS-file to poke through, or which words to search for… I sifted through the front.css looking for words like “badge”, “image”, “size”, but I don’t think I found what I was looking for.

So your help would be much appreciated! Does a link to my site suffice or how do I let you know how my site displays the section?

Here’s a link to a page on my site where I would like the badge to be bigger: https://bitfrbit.se/mat/avsta-flaskvatten-drick-kranvatten/

You’re not going to want to edit our CSS anyway, you’re going to want to override the CSS in your own location, likely through your theme. I’m guessing you’re not all that familiar with your browsers developer tools.

Add this to your functions.php file and see if it returns better results.

function sagano_badge_size( $size ) {
	if ( 'badgeos-achievement' == $size ) {
		return 'large';
	}

	return $size;
}
add_filter( 'post_thumbnail_size', 'sagano_badge_size' );

If all goes well, it’ll return the large version of the image instead of our badgeos-achievement version.

You’re right, I’m not that familiar with the terminology or much else that has to do with developing websites, yet. But you have to start somewhere! Thank you for being patient with me.

It all works fine now ??

If I want the small badgeos-achievement size on my “earned user achievements”-page, is there another piece of code I should add to my functions.php then? I suppose I shouldn’t try to change that either in the BadgeOS front.css.

You could amend my snippet above to add more conditions of when to change the specified size. Do a global $post call and check the current page with that $post object and return conditionally based on that as well.

I’d need to tinker and test to get the exact code example worked out though.

I don’t quite understand what you just said I should do, but I will read through the wordpress codex more thoroughly and then I’ll make a try.

If you have the time, that tinkering and testing would be greatly appreciated, but if you don’t I’ll figure it out myself eventually ??

I realized I could just use the earned achievements-widget, since that still shows the badges in a small size. Thanks for all your help!