Tùy biến giao diện riêng cho từng chuyên mục (Per-Node Styling) của XenForo 2.3
Mặc định, tất cả các chuyên mục (forum) trong XenForo đều có chung một phong cách thiết kế. Nhưng sẽ ra sao nếu bạn muốn chuyên mục "Game PC" có một banner nền đậm chất game thủ, hay chuyên mục "VIP" có một tông màu vàng sang trọng? Kỹ thuật "Per-Node Styling" sẽ giúp bạn làm điều đó.
XenForo được thiết kế rất thông minh, nó tự động gán một "mã định danh" (dưới dạng một thuộc tính data) duy nhất cho mỗi node. Bằng cách sử dụng mã định danh này, chúng ta có thể viết các đoạn mã CSS để áp dụng phong cách riêng cho từng khu vực. Bài viết này sẽ hướng dẫn bạn cách thực hiện chi tiết.
Bước 1: Tìm "Chìa khóa" - Lấy
Đây là bước quan trọng nhất. Mỗi node đều có một mã định danh riêng trong mã HTML của trang.
Sau khi đã có selector của node, bạn có thể bắt đầu viết CSS. Cách làm tốt nhất là tạo một template riêng để dễ quản lý.
Ví dụ 1: Thay đổi Banner/Header cho chuyên mục "Game PC" (giả sử có
Ví dụ 2: Thay đổi màu nền cho chuyên mục "VIP" (giả sử có
Ví dụ 3: Ẩn Sidebar chỉ trong một chuyên mục cụ thể (giả sử
Nếu bạn muốn nhiều chuyên mục có cùng một phong cách, bạn không cần phải lặp lại code. Hãy nhóm các selector lại với nhau.
Chúc các bạn thành công.
Mặc định, tất cả các chuyên mục (forum) trong XenForo đều có chung một phong cách thiết kế. Nhưng sẽ ra sao nếu bạn muốn chuyên mục "Game PC" có một banner nền đậm chất game thủ, hay chuyên mục "VIP" có một tông màu vàng sang trọng? Kỹ thuật "Per-Node Styling" sẽ giúp bạn làm điều đó.
XenForo được thiết kế rất thông minh, nó tự động gán một "mã định danh" (dưới dạng một thuộc tính data) duy nhất cho mỗi node. Bằng cách sử dụng mã định danh này, chúng ta có thể viết các đoạn mã CSS để áp dụng phong cách riêng cho từng khu vực. Bài viết này sẽ hướng dẫn bạn cách thực hiện chi tiết.
Bước 1: Tìm "Chìa khóa" - Lấy data-container-key của Node
Đây là bước quan trọng nhất. Mỗi node đều có một mã định danh riêng trong mã HTML của trang.
- Dùng trình duyệt truy cập vào trang chuyên mục (node) mà bạn muốn tùy biến.
- Nhấn chuột phải vào bất kỳ đâu trên trang và chọn Inspect (hoặc "Kiểm tra phần tử").
- Cửa sổ Developer Tools sẽ hiện ra. Hãy tìm đến thẻ
<html>ở ngay dòng đầu tiên của mã HTML. - Nhìn vào các thuộc tính của thẻ
<html>. Bạn sẽ thấy một thuộc tính có tên làdata-container-key, với giá trị có dạng"node-X", trong đóXlà một ID của Node. Ví dụ:data-container-key="node-4". (Đây chính là "chìa khóa" mà chúng ta cần. Toàn bộ chuỗihtml[data-container-key="node-4"]sẽ là CSS selector để chúng ta tùy biến.)
Bước 2: Áp dụng CSS để tùy biến
Sau khi đã có selector của node, bạn có thể bắt đầu viết CSS. Cách làm tốt nhất là tạo một template riêng để dễ quản lý.
- Truy cập AdminCP > Appearance > Style bạn đang sử dụng > Templates > + Add template. Đặt tên cho nó, ví dụ
_custom_node_styles.less. - Viết các đoạn mã CSS của bạn vào template này.
- Vào template extra.less, thêm dòng
@import "_custom_node_styles.less";vào cuối cùng để áp dụng thay đổi.
Ví dụ 1: Thay đổi Banner/Header cho chuyên mục "Game PC" (giả sử có data-container-key="node-10")
CSS:
/* Ẩn logo mặc định chỉ ở chuyên mục Game PC */
html[data-container-key="node-10"] .p-header-logo {
display: none;
}
/* Đặt ảnh nền mới cho header */
html[data-container-key="node-10"] .p-header {
background-image: url('https://your-domain.com/path/to/gaming-banner.jpg');
background-size: cover;
background-position: center;
}Ví dụ 2: Thay đổi màu nền cho chuyên mục "VIP" (giả sử có data-container-key="node-15")
CSS:
/* Đổi màu nền của khối chứa danh sách chủ đề */
html[data-container-key="node-15"] .block-container {
background-color: #FFFDF5; /* Màu vàng kem nhạt */
border: 1px solid #F0E68C; /* Viền màu vàng nhạt */
}
/* Đổi cả màu nền của trang */
html[data-container-key="node-15"] {
background-color: #FAFAFA; /* Màu xám rất nhạt cho nền ngoài */
}Ví dụ 3: Ẩn Sidebar chỉ trong một chuyên mục cụ thể (giả sử data-container-key="node-20")
CSS:
/* Ẩn toàn bộ cột sidebar bên phải */
html[data-container-key="node-20"] .p-body-sidebar {
display: none;
}
/* Mở rộng cột nội dung chính để chiếm toàn bộ không gian */
html[data-container-key="node-20"] .p-body-main--withSidebar .p-body-content {
width: 100%;
}Thủ thuật nâng cao: Áp dụng Style cho nhiều Node cùng lúc
Nếu bạn muốn nhiều chuyên mục có cùng một phong cách, bạn không cần phải lặp lại code. Hãy nhóm các selector lại với nhau.
CSS:
html[data-container-key="node-15"] .block-container,
html[data-container-key="node-16"] .block-container,
html[data-container-key="node-17"] .block-container {
background-color: #F5F7FA; /* Áp dụng nền xanh nhạt cho 3 node khác nhau */
}Kết luận
Kỹ thuật Per-Node Styling, bằng cách sử dụng thuộc tínhdata-container-key, mở ra khả năng tùy biến giao diện gần như vô hạn. Bằng cách xác định đúng selector và một chút kiến thức CSS, bạn có thể tạo ra những trải nghiệm độc đáo cho từng khu vực, làm cho diễn đàn của bạn trở nên sinh động, chuyên nghiệp và hấp dẫn hơn rất nhiều.Chúc các bạn thành công.
VNXF.VN
Bài viết liên quan
Được quan tâm
Bài viết mới
Silzedt
