<div class="message-userDetails">
            <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="name" /></h4>
            <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="jobTitle" />
            <xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="jobTitle" />
            <xf:if is="{$dateHtml}"><div class="message-date">{$dateHtml}</div></xf:if>
        </div>

<!-- this adds the Rank Badge Count-->
                        <xf:if is="$user.message_count >= 3000">
                         <br>
                        <div class="rankBlock">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        </div>
                        <xf:elseif is ="$user.message_count >= 2000"/>
                         <br>
                        <div class="rankBlock">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        </div>   
                        <xf:elseif is ="$user.message_count >= 1000"/>
                         <br>
                        <div class="rankBlock">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif"></div>
                        <xf:elseif is ="$user.message_count >= 500"/>
                         <br>
                        <div class="rankBlock">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        </div>   
                        <xf:elseif is ="$user.message_count >= 250"/>
                         <br>
                        <div class="rankBlock">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        </div>
                        <xf:elseif is ="$user.message_count >= 100"/>
                         <br>
                        <div class="rankBlock">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        </div>
                        <xf:elseif is ="$user.message_count >= 50"/>
                         <br>
                        <div class="rankBlock"><img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        </div>   
                        <xf:elseif is ="$user.message_count >= 10"/>
                         <br>
                        <div class="rankBlock">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        <img src="styles/default/xenforo/ranks/Blue.gif">
                        </div>
                        <xf:elseif is ="$user.message_count >= 1"/>
                         <br>
                        <div class="rankBlock"><img src="styles/default/xenforo/ranks/Blue.gif"></div>   
                        </xf:if>
                    <!-- this adds the Rank Badge Count-->

styles/default/xenforo/ranks/Blue.gif

.rankBlock {
    text-align: center;
    margin-top: -20px;
}