1. Chào mừng Khách tham gia cộng đồng Android Việt Nam

topbigslide

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

  1. King
    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 ảnh:

    [​IMG]

    Đâ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é!

    [​IMG]
    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:
    .message .messageMeta .control
    {
    @property "messageMetaControl";
    
    @property "/messageMetaControl";
    }
    Và thay thế nó bằng đoạn này:
    .message .publicControls .item
    {
    margin-left10px;
    floatleft;
    text-decorationnone;
    background-color#eeeeee;
    padding0 10px;
    margin-top: -5px;
    margin-left3px;
    border5px solid #eeeeee;
    border-radius2px;
    -
    webkit-border-radius2px;
    -
    moz-border-radius2px;
    -
    khtml-border-radius2px;
    line-height17px;
    @
    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:
    .publicControls .like:before,
    .
    publicControls .unlike:before,
    .
    publicControls .reply:before,
    .
    publicControls .postComment:before{
    content"";
    displayinline-block;
    width16px;
    height16px;
    backgroundurl('http://cdn.vietdesigner.net/styles/aurora/xenforo/like.png'no-repeat 5050%;
    floatleft;
    margin: -1px 6px -5px -4px !important;
    }

    .
    publicControls .unlike:before{
    backgroundurl('http://cdn.vietdesigner.net/styles/aurora/xenforo/unlike.png'no-repeat 5050%;
    }

    .
    publicControls .postComment:before,
    .
    publicControls .reply:before{
    backgroundurl('http://cdn.vietdesigner.net/styles/aurora/xenforo/quote.png'no-repeat 5050%;
    }
    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!

Bạn đang xem Zing.vn Mobile trên màn hình máy tính hoặc thiết bị trình chiếu mà giao diện này không hỗ trợ.

Chuyển về giao diện đầy đủ