Tùy biến bố cục 2 cột thành 1 cột (Ẩn Sidebar) cho XenForo 2.3
Bố cục hai cột với nội dung chính bên trái và sidebar bên phải là thiết kế kinh điển của XenForo. Tuy nhiên, với xu hướng thiết kế web hiện đại, nhiều quản trị viên muốn loại bỏ hoàn toàn sidebar để tạo ra một không gian hiển thị rộng rãi, tập trung hoàn toàn vào nội dung.
Việc này không chỉ giúp diễn đàn có một diện mạo mới mẻ, giống một trang tạp chí hay blog, mà còn cải thiện trải nghiệm đọc trên các màn hình lớn. Bài viết này sẽ cung cấp cho bạn các đoạn mã CSS cần thiết và hướng dẫn cách áp dụng chúng một cách an toàn để ẩn sidebar trên toàn bộ diễn đàn hoặc chỉ ở những khu vực nhất định.
Để đảm bảo các thay đổi của bạn dễ quản lý và không ảnh hưởng đến việc nâng cấp sau này, hãy luôn thêm CSS vào một template riêng.
Đây là giải pháp triệt để nhất, biến toàn bộ diễn đàn của bạn thành giao diện một cột.
Hãy dán đoạn mã CSS sau vào template
Giải thích:
Đôi khi bạn chỉ muốn trang danh sách chuyên mục (forum list) hiển thị một cột, còn các trang xem chủ đề bên trong vẫn giữ lại sidebar.
Trên các màn hình nhỏ (di động), sidebar thường bị đẩy xuống dưới cùng. Nếu bạn muốn ẩn hoàn toàn nó trên di động, bạn có thể sử dụng Media Query.
Dán đoạn mã CSS sau vào template
Chúc các bạn thành công.
Bố cục hai cột với nội dung chính bên trái và sidebar bên phải là thiết kế kinh điển của XenForo. Tuy nhiên, với xu hướng thiết kế web hiện đại, nhiều quản trị viên muốn loại bỏ hoàn toàn sidebar để tạo ra một không gian hiển thị rộng rãi, tập trung hoàn toàn vào nội dung.
Việc này không chỉ giúp diễn đàn có một diện mạo mới mẻ, giống một trang tạp chí hay blog, mà còn cải thiện trải nghiệm đọc trên các màn hình lớn. Bài viết này sẽ cung cấp cho bạn các đoạn mã CSS cần thiết và hướng dẫn cách áp dụng chúng một cách an toàn để ẩn sidebar trên toàn bộ diễn đàn hoặc chỉ ở những khu vực nhất định.
Bước 1: Cách áp dụng CSS tùy chỉnh
Để đảm bảo các thay đổi của bạn dễ quản lý và không ảnh hưởng đến việc nâng cấp sau này, hãy luôn thêm CSS vào một template riêng.
- Truy cập AdminCP > Appearance > Style bạn đang sử dụng > Templates > + Add template.
- Đặt tên cho template, ví dụ:
_custom_layout.less. - Dán các đoạn mã CSS bạn muốn vào template này và lưu lại.
- Mở template extra.less.
- Thêm dòng sau vào cuối cùng của file:
@import "_custom_layout.less"; - Lưu lại. Giờ đây, mọi thay đổi trong file
_custom_layout.lesssẽ được áp dụng.
Bước 2: Ẩn sidebar trên toàn bộ diễn đàn
Đây là giải pháp triệt để nhất, biến toàn bộ diễn đàn của bạn thành giao diện một cột.
Hãy dán đoạn mã CSS sau vào template
_custom_layout.less của bạn:
CSS:
/* Ẩn hoàn toàn cột sidebar */
.p-body-sidebar {
display: none;
}
/* Mở rộng cột nội dung chính để chiếm toàn bộ không gian */
.p-body-main--withSidebar .p-body-content {
width: 100%;
}- Dòng đầu tiên tìm đến phần tử có class
.p-body-sidebar(chính là cột sidebar) và ẩn nó đi. - Dòng thứ hai tìm đến phần tử chứa nội dung chính (
.p-body-content) và đặt chiều rộng của nó thành 100% để nó tự động chiếm lấy khoảng trống mà sidebar để lại.
Bước 3: Chỉ ẩn Sidebar trên trang Forum
Đôi khi bạn chỉ muốn trang danh sách chuyên mục (forum list) hiển thị một cột, còn các trang xem chủ đề bên trong vẫn giữ lại sidebar.
- Truy cập trang chủ diễn đàn của bạn.
- Dùng công cụ Inspect của trình duyệt để tìm
data-templatetrên thẻ<html>. Đối với trang danh sách forum, nó thường làdata-template="forum-list".
CSS:
/* Chỉ ẩn sidebar trên trang forum list */
html[data-template="forum-list"] .p-body-sidebar {
display: none;
}
/* Chỉ mở rộng nội dung chính trên trang forum list */
html[data-template="forum-list"] .p-body-main--withSidebar .p-body-content {
width: 100%;
}Thủ thuật nâng cao: Ẩn Sidebar trên di động
Trên các màn hình nhỏ (di động), sidebar thường bị đẩy xuống dưới cùng. Nếu bạn muốn ẩn hoàn toàn nó trên di động, bạn có thể sử dụng Media Query.
Dán đoạn mã CSS sau vào template
_custom_layout.less:
CSS:
/* Áp dụng cho các màn hình có chiều rộng tối đa là 800px */
@media (max-width: 800px) {
.p-body-sidebar {
display: none;
}
}Kết luận
Chỉ với một vài dòng CSS đơn giản, bạn đã có thể thay đổi hoàn toàn bố cục của diễn đàn XenForo, mang lại một diện mạo hiện đại và tập trung hơn. Dù bạn muốn ẩn sidebar trên toàn bộ trang web hay chỉ ở những khu vực nhất định, các kỹ thuật trên đều cung cấp một giải pháp linh hoạt và hiệu quả. Hãy thử nghiệm để tìm ra bố cục phù hợp nhất với phong cách cộng đồng của bạn!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
