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

Thảo luận trong 'Hướng Dẫn' bắt đầu bởi CNTT, 2/9/14.

  1. CNTT Đời cơ bản là buồn

    Sau đây mình sẽ hướng dẫn các bạn tạo nút Like - Unlike - Reply đẹp mắt cho xenforo. Bài này mình tham khảo trên mạng với lại có bạn hỏi làm sao để tạo nút trả lời đẹp cho xenforo hôm nay mình viết bài này giúp bạn tạo các nút Like - Unlike - Reply đẹp mắt cho Xenforo.

    Demo như http://iforum.vn các bạn đăng nhập để thấy nhé :D
    Ở đây mình sẽ để các icon mặt định của xenforo các bạn không thích có thể lên google tìm và thay theo ý thích :D

    Đầu tiên các bạn vào template message.css tìm đoạn sau:
    HTML:
    .message .messageMeta .control
                    {
                        @property "messageMetaControl";
                        @property "/messageMetaControl";
                    }
    
    Thay bằng code sau:
    HTML:
       .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";
    }
    
    Tới đây là mình đã tạo cơ bản được các nút các bạn muốn thay đổi icon thì thay đổi link các ảnh ở phía dưới theo đường dẫn các icon mà bạn yêu thích nhé :D

    Và cuối cùng là thêm code sau vào cuối template EXTRA.css
    HTML:
    /* Button Like, Unlike, Reply like */
    .publicControls .like:before,
    .publicControls .unlike:before,
    .publicControls .reply:before,
    .publicControls .postComment:before{
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('http://iforum.vn/styles/thumb_down.png') no-repeat 50% 50%;
    float: left;
    margin: -1px 6px -5px -4px !important;
    }
    .publicControls .unlike:before{
    background: url('http://iforum.vn/styles/thumb_up.png') no-repeat 50% 50%;
    }
    .publicControls .postComment:before,
    .publicControls .reply:before{
    background: url('http://iforum.vn/styles/message_reply.png') no-repeat 50% 50%;
    }
    /* End Button Like, Unlike, Reply like */
    
    Các icon trên các bạn có thể thay đổi theo ý thích nhé :D
    Chú các bạn thành công
     
    AC_Khanh01 thích bài này.
     
  2. Bình Luận Bằng Facebook

  3. traimuopnho

    traimuopnho Thành Viên Mới

    đâu thấy demo đâu, nút like ifr củng bthường có gì đâu :|
     
  4. TechBuba

    TechBuba Nhà Báo (Báo Đời) Thành viên BQT

    Hiện tại trên iforum mình bỏ rồi nhé :D
     
  5. VNXF

    VNXF Thành Viên Mới

    Cái này hay. để thử xem