👻 Halloween Treat: Our biggest-ever 25% OFF memberships — use SPOOKYSOCIAL before Nov 1! 🎃

BuddyDev

Search

[Resolved] CSS to target avatar size?

  • Participant
    Level: Enlightened
    Posts: 35
    Michael on October 30, 2023 at 7:11 pm #50808

    Hi guys

    Hope you can help me with a tiny bit of css.
    I use a bbPress widget to output a list of Recent Topics, is shows the topic title plus “by (avatar & display name)”

    But the avatar is really tiny (14px I think)

    Can you help me with the css to target the avatar size (height & width) ?

    Below is the page source for one item on the Recent Topics list.

    Thanks.

    <span class="topic-author"><a href="https://mysite.com/members/username/" title="View usernames profile" class="bbp-author-link"><span class="bbp-author-avatar"><img alt='' src='//www.gravatar.com/avatar/' srcset='//www.gravatar.com/avatar/' class='avatar avatar-14 photo' height='14' width='14' loading='lazy'/></span><span class="bbp-author-name">Authorname</span></a></span>

  • Keymaster
    Level: Yogi
    (BuddyDev Team)
    Posts: 3115
    Ravi on November 1, 2023 at 4:03 am #50811

    Hello Michael,

    Thank you for posting. Please try the following CSS rule and let me know if it works or not.

    
.bbp-topics-widget span.bbp-author-avatar img {
    width: 60px;
    height: 60px;
}

    Regards
    Ravi

  • Participant
    Level: Enlightened
    Posts: 35
    Michael on November 1, 2023 at 11:28 am #50813

    Thanks Ravi. works great.

    But it produces unexpected result: the resulting larger avatar is very blurred, so I assume it is simply scaling up from the original 14px size.

    I suppose I must look for a different solution.

    Thankyou.

  • Keymaster
    Level: Yogi
    (BuddyDev Team)
    Posts: 3115
    Ravi on November 3, 2023 at 6:11 am #50819

    Hello Michael,

    Yes, It will be the issue. You can use the following code in your active theme “functions.php” file.

    
add_filter( 'bbp_after_get_topic_author_link_parse_args', function ( $args ) {

	// Restrict checking for widget size might conflict.
	if ( isset( $args['size'] ) && 14 == $args['size'] ) {
		$args['size'] = 60;
	}

	return $args;
} );

    Please give it a try with this code.

    Regards
    Ravi

  • Participant
    Level: Enlightened
    Posts: 35
    Michael on November 3, 2023 at 2:18 pm #50822

    That works perfectly, thankyou very much Ravi for your assistance.

You must be logged in to reply to this topic.

This topic is: resolved