Code box đẹp với tính năng "Click chọn tất cả" cho Xenforo

[PVS]

Code box đẹp với tính năng "Click chọn tất cả" cho Xenforo

Mặc định code box của Xenforo không có tính năng "Click chọn tất cả" (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ỏ xót code.

Sau đây mình xin chia sẻ với các bạn trên diễn đàn, cách cải tiến code box của Xenforo mặc định có thêm tính năng "Click chọn tất cả". Đồ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 chọn tất cả", 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.

1. Đầu tiên, các bạn tải hình dưới đây về:

​

2. Sau khi tải xong, các bạn rename hình 2.png vừa tải xuống với tên mới là teacher.png
3. Upload hình vừa tải lên folder xenforo của bạn theo đường dẫn sau: styles/default/xenforo/teacher.png
4. Vào ACP > Appearance > template > bb_code_tag_code
Tìm đoạn code sau:

<pre>{xen:raw $content}</pre><xen:comment><!-- content is escaped via parser --></xen:comment>

Và thay thế bằng:

<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>

5. Vào ACP > Appearance > template > bb_code.css
Paste code bên dưới vào ngay sau hàng thông tin này:

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;
}

6. Lưu lại và thưởng thức.

Chúc các bạn thành công.

Nguồn: vietdesigner.net​

 

[hoangmanhtran]

Bài viết hay lắm. Cảm ơn bạn