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

[PVS]

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.

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:

.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%);
    }

​

Code 2:

.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;     } }

​

Ả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.

​

Code 3, chỉnh sửa các nút report, edit, history, delete và ip:

.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%);
    }

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

Nguồn: xenforo.com​

 

[Jindo_Katori]

Thank you for share
Cái này thay cái cũ ở 1.x được

 

[huynhvantam123]

ad ơi hướng dẫn thêm nút share zalo được không ạ