Tutorial 2x Like, Quote, Reply Button Edit - Chỉnh sửa nút Like, Quote, Reply cho XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,219
Được Like
11,630
Like, Quote, Reply Button Edit - Chỉnh sửa nút Like, Quote, Reply cho XenForo 2

Chỉnh sửa template đơn giản để tạo các liên kết Like, Quote và Reply giống như các nút.

buttonbanner.jpg

Code này sẽ được thêm vào trong template Extra.less.

Code thứ hai thêm hiệu ứng loại thu phóng có hiệu lực vào nút. Nếu bạn sử dụng code thứ 2, bạn sẽ không cần thêm code thứ 1 và ngược lại.

Điều này được thử nghiệm theo style XF2 (Phiên bản 2.0.9) mặc định, chỉnh sửa code màu theo ý thích của bạn. Điều này chỉ được thử nghiệm trong IE, FF và safari. Chỉ được thử nghiệm trên PC, Iphone 7 và iPad 4.

Code 1:
Mã:
.actionBar-action--reply, .js-multiQuote, .actionBar-action--like
    {
         display:inline-block;
         background: rgb(71, 167, 235);
         color: rgb(255, 255, 255);
         padding: 4px 9px;
         line-height: 19px;
         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);
    }

.actionBar-action--reply:hover, .js-multiQuote:hover, .actionBar-action--like:hover {
         background: rgb(65, 158, 224);
         color: rgb(255, 255, 255);
         text-decoration: none;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
    }

buttondemo.jpg

Code 2:
Mã:
.actionBar-action--reply, .js-multiQuote, .actionBar-action--like
    {
         display:inline-block;
         background: rgb(71, 167, 235);
         color: rgb(255, 255, 255);
         padding: 4px 9px;
         line-height: 19px;
         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);
    }

.actionBar-action--reply:hover, .js-multiQuote:hover {
         background: rgb(65, 158, 224);
         color: rgb(255, 255, 255);
         text-decoration: none;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
    }

.actionBar-action--like:hover  {
        background: rgb(65, 158, 224);
        color: rgb(255, 255, 255);
        text-decoration: none;
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
        transform: scale(1.25);
    }

@media (max-width: 800px) {
.actionBar-action--like:hover {
transform: none;     } }

buttonlikezoom.jpg

Ảnh chụp màn hình di động và ảnh chụp màn hình với xếp hạng nội dung.

buttonmobiledemo.jpg


buttondemoratings.jpg

Code 3, chỉnh sửa các nút report, edit, history, delete và ip:
Mã:
.actionBar-action--report, .actionBar-action--edit, actionBar-action--history, .actionBar-action--delete, .actionBar-action--warn, .actionBar-action--ip {
         display:inline-block;
         background: rgb(71, 167, 235);
         color: rgb(255, 255, 255) !important;
         padding: 4px 7px;
         line-height: 18px;
         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);
    }

.actionBar-action--report:hover, .actionBar-action--edit:hover, actionBar-action--history:hover, .actionBar-action--delete:hover, .actionBar-action--warn:hover, .actionBar-action--ip:hover {
         background: rgb(65, 158, 224);
         color: rgb(255, 255, 255) !important;
         text-decoration: none;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
    }

edit-report.jpg

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Jindo_Katori

Thượng Đế
Tham gia
01/03/2015
Bài viết
1,465
Được Like
1,206
Thank you for share
Cái này thay cái cũ ở 1.x được
 

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

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom