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

Thảo luận trong 'Tips and Guides' bắt đầu bởi CNTT01, 23/11/2015.

  1. CNTT01

    CNTT01 Snow Flower ✔

    Tham gia:
    06/07/2015
    Bài viết:
    803
    Đã được thích:
    651
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Nghề nghiệp:
    Mechanical Engineering
    Nơi ở:
    Lâm Đồng
    Web:
    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/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/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/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/unlike.png') no-repeat 50% 50%;
    }
    
    .publicControls .postComment:before,
    .publicControls .reply:before{
    background: url('http://cdn.vietdesigner.net/styles/aurora/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/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!
     
    ANXIN and THB like this.
  2. Chodongxoai

    Chodongxoai Thượng Đế

    Tham gia:
    10/10/2015
    Bài viết:
    218
    Đã được thích:
    120
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Webmaster
    Nơi ở:
    Bình Phước
    Web:
    Tiện thì ta chỉ hết luôn đi chỉ được vài cái thế khó nhìn lắm :)
     
  3. dakhucquan.net

    dakhucquan.net Thượng Đế

    Tham gia:
    27/06/2015
    Bài viết:
    312
    Đã được thích:
    133
    Điểm thành tích:
    43
    Giới tính:
    Nam
    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 ế
     
    bcat95 thích bài này.
  4. dakhucquan.net

    dakhucquan.net Thượng Đế

    Tham gia:
    27/06/2015
    Bài viết:
    312
    Đã được thích:
    133
    Điểm thành tích:
    43
    Giới tính:
    Nam
    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
     

Chia sẻ trang này