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

[CNTT01]

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:

Đầ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('http://cdn.vietdesigner.net/styles/aurora/xenforo/like.png') no-repeat 50% 50%;
float: left;
margin: -1px 6px -5px -4px !important;
}

.publicControls .unlike:before{
background: url('http://cdn.vietdesigner.net/styles/aurora/xenforo/unlike.png') no-repeat 50% 50%;
}

.publicControls .postComment:before,
.publicControls .reply:before{
background: url('http://cdn.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é =D

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

 

[Chodongxoai]

Tiện thì ta chỉ hết luôn đi chỉ được vài cái thế khó nhìn lắm

 

[dakhucquan.net]

Edit Phrase: like
<i class="fa fa-heart-o"></i>Thích
Edit Phrase: unlike
<i class="fa fa-heart"></i>Không thích nữa
Khi like sẽ tự động thay đổi, or thay vì dùng font font awesome sáng tạo cái khác cũng đc.
Cách thủ thuật này khá nhanh.

có cách nào xóa hẳn cái nút Unlike đi ko bác. ý là 1 khi đả yêu rồi thì khỏi nói lời chia tay ế

 

[dakhucquan.net]

sửa trong template hiển thị với chỗ chạy nữa nếu k dùng link post/like vẫn unlike đc ( cách này bug đc addon brivium limit like)

E vẩn chưa hiểu lắm bác à, ý e là e muốn: vẩn còn nút LIKE, vẩn like đc, nhưng khi LIKE rồi thì ko được phép UNLIKE nữa.
Và chỉ được like Bài Viết chủ đề đó chứ ko cho Like và Unlike ở Comment.
nhưng khi e thử xóa thì nó đi toong luôn cả thảy )
bác có cách này giải quyết được ko chỉ e với