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

Code box đẹp với tính năng "Click to select all" cho Xenforo.

Chủ đề thuộc danh mục 'Hướng dẫn - Thủ thuật Xenforo' được đăng bởi Tư Xả Láng, 12/9/15.

Lượt xem: 2,876

  1. Tư Xả Láng Thành viên cấp 2

    8IH1Q6F.png
    Mặc định code box của Xenforo không có tính năng " Click to select all" ( nhấp chuột trái để chọn tất cả ). Điều nầy đôi khi gây bất tiện cho các bạn muốn copy code được chia sẻ trên forum, vì nếu code quá dài, khi quét chọn code có thể bạn sẽ bỏ sót code.
    Mình xin chia sẻ với các bạn trên diễn đàn, cách cải tiến Xenforo default code box có thêm tính năng " Click to select all". Đồng thời mình cũng thay đổi style code box cho nhỏ gọn, đẹp, vui mắt. Làm cho trang web có vẻ chuyên nghiệp hơn.

    Ưu điểm:
    - Nhỏ gọn, không chiếm nhiều không gian trang web bất kể đoạn code dài hay ngắn.
    - Với tính năng " Click to select all", bạn sẽ dễ dàng quét chọn code chỉ với một thao tác nhấp chuột trái.
    Xem demo.

    Các bạn có thể dùng tài khoản công cộng để post thử code trên trang demo.
    account: public
    password: 123456

    Nếu các bạn thấy ưng ý thì chúng ta bắt tay vào việc nào.

    Trước tiên, các bạn tải hình nầy:
    kG9dpRM.png
    Sau khi tải xong, các bạn rename hình kG9dpRM.png vừa tải xuống với new name là teacher.png
    Upload hình vừa tải lên folder xenforo của bạn theo đường dẫn sau:
    folder xenforo của bạn/styles/default/xenforo/teacher.png
    Vào ACP > Appearance > template > bb_code_tag_code
    Tìm và thay thế đoạn code nầy:
    Code:
    <pre>{xen:raw $content}</pre><xen:comment><!-- content is escaped via parser --></xen:comment>
    ...bằng đoạn code nầy:
    Code:
    <div class="teacher"><textarea style="resize:none" onclick="this.focus();this.select()" readonly="readonly">{xen:raw $content}</textarea><xen:comment><!-- content is escaped via parser --></xen:comment></div>
    Vào ACP > Appearance > template > bb_code.css
    Paste code bên dưới vào ngay sau hàng nầy thông tin nầy:
    /* .bbCodeX classes are designed to exist inside .baseHtml. ie: they have no CSS reset applied */
    Code:
    textarea {
        height: 260px;
        width: 256px;
        background: none;
        border: none;
        color: #ffffff;
        word-wrap: break-word;
        font-family: 'Reenie Beanie',cursive;
        clear: both;
        list-style-type: none;
        overflow: auto;
        margin-left:165px;
        margin-top: 10px;
        transition: all 0.3s ease-in-out 0s;
    }
    textarea:hover {
      color: #FFFF00;
    }
    .teacher {
        background: url("styles/default/xenforo/teacher.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        background-position: 0 0;
        height: 281px;
        width: 427px;
        margin: 15px 35px 15px 15px;
    }
    .teacher:hover {
        background-position: 0 -281px;
    }
    Vậy là xong. Qúa dễ! phải không các bạn. Chúc các bạn thành công.

    Style code box tham khảo tại: http://helplogger.blogspot.com/2012/04/amazing-examples-to-customize.html

    ...
    Chỉnh sửa lần cuối: 12/9/15
    Phạm Hữu Dư thích bài viết này
  2. Phạm Hữu Dư

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

    Khi nào rảnh test thử, thanks for share :D
    Tư Xả Láng thích bài viết này
  3. onlyonelove

    onlyonelove Mới đăng kí

    hơi khó hiểu, để nhanh hơn thì nên xài addon [Nopviet] Copy to clipboard 1.0
    Link: nopviet.com/t/nopviet-copy-to-clipboard-1-0-them-nut-copy-nhanh-doan-code-trong-xenforo.1041/

Ủng hộ diễn đàn