To put messages in bubbles, you must be on PunBB version and the founder of your forum to access the templates. Remember to save and publish your template after any changes made ​​. Then you need an image-arrow that will link the avatar and the message of the members and that you must host. You need to find out the size of your image. Example: 20x20.

Changes in the template:

This is the template ''viewtopic_body'' You can find this to A-CP => Display => Template: General. Then right into the list of templates, click at the end of the line Viewtopic_body. in the template you need to find this part:

Code:

{postrow.displayed.POSTER_RPG}
                    </div>
                  </div>
                  <div class="post-entry">
                          <div class="entry-content">
                        <!-- BEGIN switch_vote_active -->

This is the class we will place at the code

Code:

<div class="bubble"> </div>

Witch gives us:

Code:

{Postrow.displayed.POSTER_RPG}
                    </ div>
                  </ div>
                  <div class="post-entry">
      <div class="bubble"> </ div>
                    <div class="entry-content">
                        <! - - switch_vote_active BEGIN ->

Create the bubble with the css:

A-CP => Display => Pictures and Colors => Colors >> CSS Stylesheet. We will add the image of the arrow and position:

Code:

.bubble {
    background-image : url("Address of your image");
    width: 20px;
    height :20px;
    position : relative;
    top :12px;
    left :-30px;
}

Code:

.post-entry{
    background: #1A1A1A;
    border: 1px solid #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-left : 20px;
    margin-right : 19px;
    padding : 10px;
    min-height : 200px;

}

This is the result:

Nice tutorial, thanks Maki !