Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Hướng dẫn - Thủ thuật Xenforo' được đăng bởi Phạm Hữu Dư, 13/11/13.

Lượt xem: 8,583

  1. Phạm Hữu Dư phamhuudu.com

    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:

    [​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:
    Code:
    .message .messageMeta .control
                    {
                        @property "messageMetaControl";
     
                        @property "/messageMetaControl";
                    }

    Và thay thế nó bằng đoạn này:
    Code:
                .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:
    /* 
    	
    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('https://forum.vietdesigner.net/styles/aurora/xenforo/like.png') no-repeat 50% 50%;
    float: left;
    margin: -1px 6px -5px -4px !important;
    }
     
    .publicControls .
    	
    unlike:before{
    background: url('https://forum.vietdesigner.net/styles/aurora/xenforo/unlike.png') no-repeat 50% 50%;
    }
     
    .publicControls .postComment:before,
    .publicControls .
    	
    reply:before{
    background: url('https://forum.vietdesigner.net/styles/aurora/xenforo/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!

    ...
    nblebinh thích bài viết này
  2. phamdieuhuynh

    phamdieuhuynh Mới đăng kí

    Dk7VvO1.png

    Các bạn ơi cho mình hỏi avatar nhìn như bị rơi xuống như hình (diễn đàn cũng xài Xenforo) có thể chỉnh lại không? Có thể hướng dẫn cho mình chỉnh lại không?
  3. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    phamdieuhuynh mặc định của Xenforo là như thế mà bạn, forum nào cũng vậy, nếu bạn thích thì chỉnh css cho nó thôi!
    phamdieuhuynh thích bài viết này
  4. phamdieuhuynh

    phamdieuhuynh Mới đăng kí

    À, ra vậy. #:-s
    Cảm ơn bạn!
  5. Quoc Cuong Pham

    Quoc Cuong Pham Mới đăng kí

    Nếu làm theo hướng dẫn thì có nút reply ko ?
    hay không có vậy a Dư :">
  6. khanhquay1988

    khanhquay1988 Mới đăng kí

    Thanks bác đã chia sẽ nha hii
    lewyvuong thích bài viết này
  7. Gabby Sama

    Gabby Sama Mới đăng kí

    Bác dư Upload lại hình ảnh nhé ... Tks bác :D
  8. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Gabby Sama hình ảnh nào nhỉ? có hình nào die đâu ta?
  9. Gabby Sama

    Gabby Sama Mới đăng kí

    @Phạm Hữu Dư ... Cái nút Like forum.vietdesigner.net/styles/aurora/xenforo/like.png ... đó bác :D
  10. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Gabby Sama thích bài viết này

Ủng hộ diễn đàn