Kullanım tekniği XenForo CSS Ranks,User banner nasıl yapılır ?

/*********** iconos alante de ip report etc..***********/
.actionBar-action--edit:before, .actionBar-action--report:before, .actionBar-action--ip:before, .actionBar-action--delete:before, .actionBar-action--spam:before, .actionBar-action--warn:before, .actionBar-action--history:before
{
display: inline-block;
font-family: FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right: 5px;
}
.actionBar-action--edit:before
{
content: "\f040";
}
.actionBar-action--report:before
{
content: "\f071";
}
.actionBar-action--ip:before
{
content: "\f002";
}
.actionBar-action--delete:before
{
content: "\f00d";
}
.actionBar-action--spam:before
{
content: "\f024";
}
.actionBar-action--warn:before
{
content: "\f12a";
}
.actionBar-action--history:before
{
content: "\f1da";
}
/* Icons for Login and Register buttons */
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before {
    font-family: FontAwesome;
    content: "\f090";
    color: #E6BB5C;
    padding-right: 5px;
}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register:before {
    font-family: FontAwesome;
    content: "\f084";
    color: #E6BB5C;
    padding-right: 5px;
}
/**********/
/* Coloured Node Categories */
.block.block--category.block--category1 .block-header {/**/
    background: rgb(188, 222, 245);
    color: #000;
}
.block.block--category.block--category129 .block-header {
    background: rgb(65, 38, 1);
    color: #fff;
}


.block.block--category.block--category23 .block-header {
    background: #7CA430;
    color: #fff;
}
.block.block--category.block--category9 .block-header {
    background: rgb(71, 167, 235);
    color: #fff;
}
.block.block--category.block--category15 .block-header {
    background: rgb(24, 88, 134);
    color: #fff;
}
.block.block--category.block--category10 .block-header {
    background: rgb(37, 119, 177);
    color: #fff;
}
/**********/
/* Hide user extra info */
.message-userExtras {
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}
.message-cell.message-cell--user:hover .message-userExtras {
    opacity: 1;
    max-height: 300px;
}