Changes in templates:

1. Go to: Admin Panel > Display > Templates > viewtopic_body
   
2. edit the template and search for:
   

   Code: {postrow.displayed.POSTER_NAME}

   
   
   
3. once you find it, replace it with:
   

   Code: <div class="rowName">{postrow.displayed.POSTER_NAME}</div>

   
   What you just changed is the member's name. You can cut and paste the name somewhere else in the template where you want. As you will see i personally moved it above the avatar because i thought it was better looking there.
   
   
4. Next search for this:
   

   Code: {postrow.displayed.POSTER_RANK_NEW}

   
   
5. Once you find it replace it with this:
   

   Code: <div class="rowRank">{postrow.displayed.POSTER_RANK_NEW}</div>

   
   
   This is the rank which is displayed as text. The other rank it's not affected if you don't do this procedure. So the same thing here, you may cut and relocate it's positioning anywhere in the template you like.
   
   
6. Once you do these changes, save the template and publish it pressing the green cross.

CSS addition

Code:

.rowName, .rowRank {
    height: 15px;
    width: auto;
    border-top: 1px solid #222;
    padding: 5px;
    color: #9A9292;
    margin-left: 0px;
    margin-right:0px;
    border-bottom: 1px solid #222;
    background: #222;
    margin-top: 7px;
    font-weight: bold;
}


Modifications

• You may change the div classes to whatever you like but make sure you change the elements placed in your CSS.
  
• You can make any appearance changes through the CSS, as background-color, margin-top, padding etc.
  

Preview