[Code] Code Rank Ribbon ( Không biết đặt tên =.= )

demo đứng yên( chính tại hotrofm)
LOẠI ĐỨNG YÊN
Bước 1: chèn code này vào trong css

Code:

.ribbon {font-size: 12px;font-weight: bold;margin: -5px -5px -2px;text-align: center;width: 130px;}
    .ribbonStaff {background: #B3B3B3 url('http://hotvteen.net/forum/styles/sky/xenforo/gradients/category-23px-light.png') repeat-x top;border: 1px solid #B3B3B3;color: white;}
    .ribbon li .left {border-top-left-radius: 3px;-webkit-border-top-left-radius: 3px;-moz-border-radius-topleft: 3px;-khtml-border-top-left-radius: 3px;-webkit-border-top-left-radius: 3px;-moz-border-radius-topleft: 3px;-khtml-border-top-left-radius: 3px;left: -1px;}
    .ribbon li .right {border-top-right-radius: 3px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topright: 3px;-khtml-border-top-right-radius: 3px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topright: 3px;-khtml-border-top-right-radius: 3px;right: -1px;}

    .ribbon li:last-child {margin-bottom: 0px;}.ribbon li {border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;-khtml-border-radius: 3px;border-top-right-radius: 0px;-webkit-border-top-right-radius: 0px;-moz-border-radius-topright: 0px;-khtml-border-top-right-radius: 0px;-webkit-border-top-right-radius: 0px;-moz-border-radius-topright: 0px;-khtml-border-top-right-radius: 0px;border-top-left-radius: 0px;-webkit-border-top-left-radius: 0px;-moz-border-radius-topleft: 0px;-khtml-border-top-left-radius: 0px;-webkit-border-top-left-radius: 0px;-moz-border-radius-topleft: 0px;-khtml-border-top-left-radius: 0px;box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);-moz-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);-khtml-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);-moz-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);-khtml-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);padding: 1px;position: relative;margin-bottom: 5px;}.ribbon li div {position: absolute;top: -4px;width: 4px;height: 4px;}
    .ribbonStaff div {background-color: #718E0F;}.size-rank img {height: 35px;width: 120px;}

Bước 2: Chèn vô vewtitip body chỗ nào muốn hiện:

Code:

<ul class="ribbon"><li class="ribbonStaff"><div class="left"></div><div class="right"></div>{postrow.displayed.POSTER_RANK_NEW}</li></ul>

Thường thì chèn trên avatar hoặc dưới avatar
Nếu muốn chèn trên avatar thì trèn trên code sau:

Code:

{postrow.displayed.POSTER_AVATAR}

Nếu muốn chèn dưới avatar thì trèn dưới code sau:

Code:

{postrow.displayed.POSTER_AVATAR}

LOẠI CHUYỂN ĐỘNG
Demo Online: http://4r-kingdrago.forumvi.com/t10-topic
Bước 1: như trên

Bước cách làm cách chèn cũng vậy nhưng code chèn vào vewtotip body là code này:

Code:

<ul class="ribbon"><li class="ribbonStaff"><div class="left"></div><div class="right"></div><marquee >{postrow.displayed.POSTER_RANK_NEW}</marquee ></li></ul></div>