Cấp bậc: 
Bước 1: thêm vào CSS:
.me{float:right}.not-me{float:left}
.me .by-me{border:8px solid transparent;border-left-color:#000;width:0;height:0;margin-top:15px}
.me .nbm,.not-me .bm{display:none}
.not-me .not-by-me{border:8px solid
transparent;border-right-color:#000;width:0;height:0;margin-top:15px}
.pm_message{border-left:1px solid #000;border-right:1px solid #000;padding:4px}
.ttop0,.tbottom0{display:block}.ttop0{margin-top:5px}
.ttop0 b,.tbottom0 b{display: block;height:
1px;border-left:1px solid #000;border-right:1px
solid #000}
.ttop0
b{background:#eee},.tbottom0{background:#fff}
b.t1 {margin-left:5px;margin-right:5px;background:#000}
b.t2 {margin-left: 3px;margin-right: 3px;border-width:2px}
b.t3 {margin-left:2px;margin-right:2px;}
b.t4 {margin-left:1px;margin-right:1px;height:
2px}
.cl{clear:both}
Copy code
.me .by-me{border:8px solid transparent;border-left-color:#000;width:0;height:0;margin-top:15px}
.me .nbm,.not-me .bm{display:none}
.not-me .not-by-me{border:8px solid
transparent;border-right-color:#000;width:0;height:0;margin-top:15px}
.pm_message{border-left:1px solid #000;border-right:1px solid #000;padding:4px}
.ttop0,.tbottom0{display:block}.ttop0{margin-top:5px}
.ttop0 b,.tbottom0 b{display: block;height:
1px;border-left:1px solid #000;border-right:1px
solid #000}
.ttop0
b{background:#eee},.tbottom0{background:#fff}
b.t1 {margin-left:5px;margin-right:5px;background:#000}
b.t2 {margin-left: 3px;margin-right: 3px;border-width:2px}
b.t3 {margin-left:2px;margin-right:2px;}
b.t4 {margin-left:1px;margin-right:1px;height:
2px}
.cl{clear:both}
Copy code
Bước 2: vào thiết kế > bố trí > private messages >
private messages list xóa tất cả thay bằng code:
<table class="{%if
nick_uid!=api.user_id%}not-{%endif%}me"
width="80%" border="0" cellpadding="0"
cellspacing="0">
<tr valign="top">
<td width="16px" algin="left" class="nbm"><div
class="not-by-me"></div></td>
<td algin="left">
<b class="ttop0"><b class="t1"></b><b
class="t2"></b><b class="t3"></b><b class="t4">
</b></b>
<div class="pm_message">
<div style="background:#eee;margin:-4px;padding:0 5px;border-bottom:1px solid #0c0;
{%if nick_uid==api.user_id%}text-align:right{%endif%}"><b><a href="{{profile_url}}">
{{nick}}</a></b></div>
<div class="cl"></div>
{% if unreaded %}<b>{% endif %}
{{message}}
{% if unreaded %}</b>{% endif %}<br/><br/>
<small><i>({{message_date}})</i></small>
</div>
<b class="tbottom0"><b class="t4"></b><b
class="t3"></b><b class="t2"></b><b class="t1">
</b></b>
</td>
<td width="16px" align="right" class="bm"><div
class="by-me"></div></td>
</tr>
</table>
<br class="cl" style="width:10px"/>
Copy code
nick_uid!=api.user_id%}not-{%endif%}me"
width="80%" border="0" cellpadding="0"
cellspacing="0">
<tr valign="top">
<td width="16px" algin="left" class="nbm"><div
class="not-by-me"></div></td>
<td algin="left">
<b class="ttop0"><b class="t1"></b><b
class="t2"></b><b class="t3"></b><b class="t4">
</b></b>
<div class="pm_message">
<div style="background:#eee;margin:-4px;padding:0 5px;border-bottom:1px solid #0c0;
{%if nick_uid==api.user_id%}text-align:right{%endif%}"><b><a href="{{profile_url}}">
{{nick}}</a></b></div>
<div class="cl"></div>
{% if unreaded %}<b>{% endif %}
{{message}}
{% if unreaded %}</b>{% endif %}<br/><br/>
<small><i>({{message_date}})</i></small>
</div>
<b class="tbottom0"><b class="t4"></b><b
class="t3"></b><b class="t2"></b><b class="t1">
</b></b>
</td>
<td width="16px" align="right" class="bm"><div
class="by-me"></div></td>
</tr>
</table>
<br class="cl" style="width:10px"/>
Copy code
Các bạn có thể thay đổi màu sắc tùy ý!
