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

CNTT01

Snow Flower ✔
Tham gia
06/07/2015
Bài viết
803
Được Like
686
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:
rvom.png

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

Mã:
.message .messageMeta .control
{
@property "messageMetaControl";

@property "/messageMetaControl";
}
Và thay thế nó bằng đoạn này:
Code:

Mã:
.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:

Mã:
/* 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

MasterCorporal
Tham gia
10/10/2015
Bài viết
218
Được Like
129
Tiện thì ta chỉ hết luôn đi chỉ được vài cái thế khó nhìn lắm :)
 

dakhucquan.net

MasterCorporal
Tham gia
27/06/2015
Bài viết
337
Được Like
152
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

MasterCorporal
Tham gia
27/06/2015
Bài viết
337
Được Like
152
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
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom