[Icaroferreira]

Hi there,

How do I the picture that appears when you put messages on the forum, appear larger and rectangular, equal this forum here, see: http://viagemastral.com/forum/index.php?/topic/20462-minha-vida-%C3%A9-ruim-mas-os-sonhos-s%C3%A3o-bons/

I want the same, help me please.

Best Regards,
Icaro

[Robkk]

you can first seperate the role , reply author name , and avatar.

i just put loop-single-reply.php into my child theme folder called bbpress

then i just remove this line in loop-single-reply.php

<?php bbp_reply_author_link( array( 'sep' => '<br />', 'show_role' => true ) ); ?>

and replace it with these three lines of code.
this code also puts the role above the avatar.

<?php bbp_reply_author_link( array('show_role' => true, 'type' => 'role' ) ); ?>
<?php bbp_reply_author_link( array( 'show_role' => false, 'type' => avatar , 'size' => auto ) ); ?>
<?php bbp_reply_author_link( array( 'show_role' => false,'type' => 'name' ) ); ?>

and to have that sites kind of avatars you dont have a fixed width so the avatars size varies a little bit in height and width but it has a max width it never go bigger than.

to do that you would have to use this.

max-width and max-height are both 150px you can change that to whatever you want.

add this css whereever you can have custom css

bbpress.css in a child theme
child themes css
jetpacks custom css module
custom css plugin

#bbpress-forums div.bbp-reply-author img.avatar {
    border: medium none;
    max-width: 150px;
    padding: 0px;
    margin: 12px auto 0px;
    float: none;
    max-height: 150px;
}

if you change your mind about having the varied avatar sizes
you can remove 'size' => auto in the avatar code. which would leave the default 80px
or change 'size' => auto to whatever number you want example 'size' => 60

[Icaroferreira]

In my plugin UserPro, has a page of CSS, which changes the bbPress forum.

So what could I use CSS to change three items:
– The image (photo that appears when you make a post).
– Space between the photo and the message (because when I increased the width of the photo, the photo was leaning against the post).
– And also how do I over the photo, appears a name, example: “Moderator”, “Admin”, “Member” …?

Help me please.

[Icaroferreira]

Up

[Robkk]

you dont need to bump your topic up.

and if you have more questions make a new topic.

i already gave you css on how to change the reply author avatar here
https://bbpress.org/forums/profile/robkk/

the space between the avatar and the post can be increased by adding this and changing 130px to what your max-width of image is , as i said the max-width of the image at the site you led me to has a max-width of 150px so my css for the post would be something close to.

#bbpress-forums div.bbp-forum-content, 
#bbpress-forums div.bbp-reply-content, 
#bbpress-forums div.bbp-topic-content {
margin-left: 150px;
padding: 12px 12px 12px 0;
text-align: left;
}

to rename roles you can use the code on this , download and upload as plugin or copy from add filter down and put it into your child themes functions.php

https://gist.github.com/ntwb/7864894

[Icaroferreira]

This CSS solved the space between the photo and the post, But, not enhanced photo.

What should I do?

[Robkk]

What enhanced photo??

[Icaroferreira]

This CSS below did not increase the width and height of the photo:
#bbpress-forums div.bbp-reply-author img.avatar {
border: medium none;
max-width: 150px;
padding: 0px;
margin: 12px auto 0px;
float: none;
max-height: 150px;
}

This CSS increases the space between the photo and the post, but does not increase the size of the photo (does not increase the width and height of the photo):
#bbpress-forums div.bbp-forum-content,
#bbpress-forums div.bbp-reply-content,
#bbpress-forums div.bbp-topic-content {
margin-left: 150px;
padding: 12px 12px 12px 0;
text-align: left;
}

So I wish I could increase the size of the width and height of the picture, and also the space between the picture and the post.

[Robkk]

you could try this.

#bbpress-forums div.bbp-reply-author img.avatar {
border: medium none;
width:auto!important;
max-width: 150px!important;
padding: 0px;
margin: 12px auto 0px;
float: none;
max-height: 150px;
}

and the other code wasnt suppose to increase the avatar images, it was just suppose to be for the space between the post and avatar.

if you still cant get it , post a link to a forum post on your website.

[Robkk]

try this css code i forgot about min-width for a second.

im setting a minimum width of the picture to be at least 100px just like this forum has.

#bbpress-forums div.bbp-reply-author img.avatar {
border: medium none;
min-width:100px!important;
max-width: 150px!important;
padding: 0px;
margin: 12px auto 0px;
float: none;
max-height: 150px!important;
}

[Icaroferreira]

I use UserPro plugin, and there is a CSS option, when I put this CSS, nothing happens =(

My site is still under construction, see link:
http://ajudaroproximo.com.br/foruns/topico/bem-vindos-ao-forum/

How do I send an image attachment, and thus show you how I like to stay?

[Robkk]

you can post a link to the image.
and if you use something like imgur/flickr it will automatically embed into the post.

you can click the img button in the toolbar above the reply form and put the url into modal popup and then insert it into the reply form that way too.

[Icaroferreira]

[Robkk]

try this the size => auto probably doesnt work or it just defaults to 80px

in loop-single-reply.php in your bbpress folder in your child theme.

change

<?php bbp_reply_author_link( array('show_role' => true, 'type' => 'role' ) ); ?>
<?php bbp_reply_author_link( array( 'show_role' => false, 'type' => avatar , 'size' => auto ) ); ?>
<?php bbp_reply_author_link( array( 'show_role' => false,'type' => 'name' ) ); ?>

to this

<?php bbp_reply_author_link( array('show_role' => true, 'type' => 'role' ) ); ?>
<?php bbp_reply_author_link( array( 'show_role' => false, 'type' => avatar , 'size' => 100 ) ); ?>
<?php bbp_reply_author_link( array( 'show_role' => false,'type' => 'name' ) ); ?>

now to test it upload an avatar bigger than 100px in width

[Robkk]

if you want the user role text on top of the actual avatar, like inside the avatar photo your going to figure that out yourself.

and the css i gave for adding more space between the avatar and post should work.

[Robkk]

you can also add more padding for the space between the post and avatar

#bbpress-forums div.bbp-forum-content, #bbpress-forums div.bbp-reply-content, #bbpress-forums div.bbp-topic-content {
    margin-left: 150px;
    padding: 12px 12px 12px 20px !important;
    text-align: left;
}

if you say that the reply author details are not as wide as avatar photo and such .

#bbpress-forums div.bbp-topic-author, #bbpress-forums div.bbp-reply-author {
width: 150px;
}

and yeah if you need more help with styling bbpress id say look at these tutorials

Step by step guide to setting up a bbPress forum – part 2

Functions files and child themes – explained !

https://codex.bbpress.org/creating-a-test-site/

bbPress Styling Crib

Step by step guide to setting up a bbPress forum – part 3

[Icaroferreira]

My bbPress codes have many other plugins mixed with it, so I can not make these changes.

I want to modify only these three items photo already do one weeks and I can not. =(

I give you my username and password, you can get into my wp-admin to do these three changes? Please.

[Icaroferreira]

About the photo, I’d like the photos on my forum has this width and height.

URL forum have picture: http://viagemastral.com/forum/index.php?/topic/20518-transfigura%C3%A7%C3%A3o/

[Icaroferreira]

I’m sorry for taking your time and also sorry for my bad english.

You’re always giving me excellent support.

[Robkk]

i gave you the info you need,
you have to do it yourself.

and i don’t recommend giving away your admin username and password even if its support, just create a new admin user then remind yourself to delete it later.

[Stagger Lee]

function my_bbp_change_avatar_size($author_avatar, $topic_id, $size) {
    $author_avatar = '';
    if ($size == 14) {
        $size = 50;
    }
    if ($size == 80) {
        $size = 190;
    }
    $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);

/* We increased the tiny avatar size, so adjust the position */
#bbpress-forums p.bbp-topic-meta img.avatar, #bbpress-forums ul.bbp-reply-revision-log img.avatar, #bbpress-forums ul.bbp-topic-revision-log img.avatar, #bbpress-forums div.bbp-template-notice img.avatar, #bbpress-forums .widget_display_topics img.avatar, #bbpress-forums .widget_display_replies img.avatar {
    margin-bottom: -2px;
}
/* Increase max-width for the big avatars */
#bbpress-forums div.bbp-forum-author img.avatar, #bbpress-forums div.bbp-topic-author img.avatar, #bbpress-forums div.bbp-reply-author img.avatar {
/*margin: 12px auto 0;*/
max-width: 110px;
}