[andrew55]

I’ve seen in other forums where avatars of user’s who created topic are shown as topic icons in the topic list view. So every topic has an avatar next to it.

Any suggestions on how to accomplish this? Is there a setting that controls this or maybe a plugin? I’ve been searching and can’t seem to find a solution.

[andrew55]

I realize there is already a smaller avatar showing for each topic, but I’m talking about a larger avatar icon to the left of each topic. Is there a setting or maybe a plugin to enable this feature?

[Robkk]

you can use this PHP function

function rkk_topic_av() {
	    	echo bbp_get_topic_author_link( array( 'size' => '32' , 'type' => 'avatar'));
}
add_action('bbp_theme_before_topic_title','rkk_topic_av');

here is some custom CSS you can use.

li.bbp-topic-title .avatar-32 {
  margin-right: 5px;
}

then to remove the small one you can copy loop-single-topic.php into your child theme into a folder called bbpress.

look for

<span class="bbp-topic-started-by"><?php printf( __( 'Started by: %1$s', 'bbpress' ), bbp_get_topic_author_link( array( 'sie' => '14' ) ) ); ?></span>

change it to.

<span class="bbp-topic-started-by"><?php printf( __( 'Started by: %1$s', 'bbpress' ), bbp_get_topic_author_link( array( 'type' => 'name' ) ) ); ?></span>

[andrew55]

Great – thank you very much. Works fine and looks great.

A couple quick questions:

1. Any suggestions on how to get the “Started by” text and username to display right under the topic title, to the right of the avatar, just like the topic title? Right now it is under the avatar.

2. Long topic tiles are now wrapping under the avatar. Any suggestion on how to style the second line of title so it doesn’t wrap, but stays indented as the first line of the topic?

I’m looking at the code and css and can’t figure it out. Thanks!

[Robkk]

1.

change the size to a 48

put this into your child themes functions.php file or a functionality plugin

function rkk_topic_av() {
	    	echo bbp_get_topic_author_link( array( 'size' => '48' , 'type' => 'avatar'));
}
add_action('bbp_theme_before_topic_title','rkk_topic_av');

then use this CSS

put this into anywhere you can put custom CSS

a child themes style.css
jetpacks custom css module
any standalone custom css plugin.

li.bbp-topic-title .avatar-48 {
  float: left;
  margin-right: 5px;
}

2. i guess use the text-overflow property in CSS

here is an example.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

[lanhuong11022]

You can refer to the source code in http://camaushop.net/

[andrew55]

Thank you robkk and lanhuong11022. I’m new to bbPress and appreciate the help getting started. The theme files are completely new to me, so it’s been fun trying to figure out everything.

I was able to get the avatar larger. I’m still hungup on getting the overflow figured out.

http://camaushop.net/ is a great start. It appears they have the avatar somehow wrapped in a span, and the span has the overflow assigned to it.

I’m not asking anyone to hold my hand, but if I was to attempt to add a span around those forum icons, any suggestions on what theme file I might start experimenting with?

Thanks for any suggestions.

[Stagger Lee]

@lanhuong11022, what is that ? Is that bbPress forum ?

[Stagger Lee]

Try with this:
(I am not sure if it is this 100%, but try)

//* Notice the line 7, 8, 10 and 11
function my_bbp_change_avatar_size($author_avatar, $topic_id, $size) {
    $author_avatar = '';
    if ($size == 14) {
        return $author_avatar;
    }
    if ($size == 80) {
        $size = 110;
    }
    $topic_id = bbp_get_topic_id( $topic_id );
    if ( !empty( $topic_id ) ) {
        if ( !bbp_is_topic_anonymous( $topic_id ) ) {
            $author_avatar = get_avatar( bbp_get_topic_author_id( $topic_id ), $size );
        } else {
            $author_avatar = get_avatar( get_post_meta( $topic_id, '_bbp_anonymous_email', true ), $size );
        }
    }
    return $author_avatar;
}

/* Add priority (default=10) and number of arguments */
add_filter('bbp_get_topic_author_avatar', 'my_bbp_change_avatar_size', 20, 3);
add_filter('bbp_get_reply_author_avatar', 'my_bbp_change_avatar_size', 20, 3);
add_filter('bbp_get_current_user_avatar', 'my_bbp_change_avatar_size', 20, 3);

[andrew55]

Stagger Lee – thanks for that, although it’s way over me head.

When I got it in to functions.php, it does work partially (at certain screen widths). But at other screen widths, the text starts wrapping under the icon again.

I’ll keep messing with it, but I’m open to suggestions.

[Robkk]

@andrew55

I’m still hungup on getting the overflow figured out.

link to your site and i could help with that.

It appears they have the avatar somehow wrapped in a span, and the span has the overflow assigned to it.

i dont think you need a span for it , i could add it into the code but im sure it will be fine with just a float:left;

@stagger-lee

what is that ? Is that bbPress forum ?

that was not a bbPress forum, its something else.

[Stagger Lee]

Take rest with CSS. Dont know how it looks.

Small warning. If your forum is not visited well it could look amateurish. You will have post after post, after post, avatar of one and same User/Topic author.

Same situation is if you use automatic bbPress topic from WordPress Posts.

Making bigger avatars can make things worse if you dont have many Users. For instance another tweak “last commenter avatar”. I tried all this, and if you have just one User who like to comments more than other Users, it looks boring to see enlarged avatar of this User on whole screen everywhere.

I mean easier to take it if avatar is few pixels big.

[andrew55]

stagger-lee – thank you very much for the warning/advice. Actually, that makes perfect sense. I went back to the previous topic view (with no large icons). For other sites it might make more sense, so hopefully the topic created here might help someone.

I am going to stick with using forum icons in our main forum view. It adds a great look.

I got some great help from Robkk creating these earlier, but I’m having the same issue. The long forum descriptions are wrapping under the forum icon, as can be seen in the example below with the lock icon.

Any suggestion on how to style the forum description so it doesn’t wrap, but stays to the right of the forum icon?

Here’s a link to our test site:
https://www.lifeleap.org/newcommunitysite/

Thanks for any suggestions.

[Stagger Lee]

Separate bbp-forum-content on bbpress.css line 537 or use !important:

.bbp-forum-content {
margin: 0 0 0 73px !important;
}

display:table; gives you same effect.

[andrew55]

AH! Works great. Perfect. Thanks.

[Stagger Lee]

Make CSS override. It will be lost with bbPress update.