Hướng dẫn tạo nút Like, Unlike, Reply đẹp mắt cho Xenforo

Mặc định các nút like, unlike hay reply của Xenforo chỉ là những dòng text trông khá nhạt nhẽo.

Hôm nay mình xin hướng dẫn các bạn cách biến nó thành các button đẹp mắt!

Demo online: http://forum.vietdesigner.net/threads/18580/

Demo ảnh:

Đây là lúc hiển thị ở các thread view, cái này do mình bỏ hẳn nút reply rồi nên các bạn không thấy button reply đâu nhé!​

Còn đây là hiển thị trên trang profile cá nhân, cái này các bạn thấy có icon nút reply nè, nhưng ở trang cá nhân nó không hiện button như ở thread view đâu nhé, tức là không có background.​

Ta bắt đầu thực hành bài hướng dẫn này!

Đầu tiên các bạn vào template message.css tìm đoạn sau:

Code:

.message .messageMeta .control
                {
                    @property "messageMetaControl";
 
                    @property "/messageMetaControl";
                }

Và thay thế nó bằng đoạn này:

Code:

            .message .publicControls .item
            {
                margin-left: 10px;
                float: left;
text-decoration: none;
background-color: #eeeeee;
padding: 0 10px;
margin-top: -5px;
margin-left: 3px;
border: 5px solid #eeeeee;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
line-height: 17px;               
@property "messageMetaControl";
 
@property "/messageMetaControl";
}

Tiếp đến vào template EXTRA.css và add toàn bộ đoạn code dưới đây vào cuối template:

Code:

/* 
	
Button 
	
Like, 
	
Unlike, 
	
Reply 
	
like Việt Designer */
.publicControls .
	
like:before,
.publicControls .
	
unlike:before,
.publicControls .
	
reply:before,
.publicControls .postComment:before{
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url('https://forum.vietdesigner.net/styles/aurora/xenforo/like.png') no-repeat 50% 50%;
float: left;
margin: -1px 6px -5px -4px !important;
}
 
.publicControls .
	
unlike:before{
background: url('https://forum.vietdesigner.net/styles/aurora/xenforo/unlike.png') no-repeat 50% 50%;
}
 
.publicControls .postComment:before,
.publicControls .
	
reply:before{
background: url('https://forum.vietdesigner.net/styles/aurora/xenforo/quote.png') no-repeat 50% 50%;
}

Các bạn có thể tùy chỉnh lại màu sắc, vị trí và hình ảnh các icon! Icon ở đây mình lấy y chang như Facebook nhé

Rất đơn giản, chúc các bạn thành công!