BuddyDev

Search

[Resolved] CSS to target avatar size?

  • Participant
    Level: Enlightened
    Posts: 30
    Michael on #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 #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: 30
    Michael on #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 #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: 30
    Michael on #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