Hướng dẫn Hướng dẫn chỉnh sửa Giao diện và thiết kế giao diện cho xenforo

[CNTT01]

Để có được một diễn đàn đẹp yêu cầu nhà quả trị cũng như người thiết kế phải biết cách chỉnh sửa và có mắt thẩm mỹ. Hôm nay mình chia sẻ bài viết này mong rằng sẽ có ích với các bạn khi chỉnh sửa giao diện xenforo.

Tôi làm cách nào để thay thế 1 styles mới cho diễn đàn?
Truy cập ACP -> Styles -> Create a New Styles (tạo 1 style mặc định để có thể chỉnh sửa) hoặc ACP -> Styles -> Import a style -> lựa chọn file XML của style (sau khi đã upload file vào thư mục styles)

Làm cách nào để fix độ rộng của style?
Bạn chỉnh tại ACP -> Styles -> Style Properties -> General: Page Width Controller, nhập dữ liệu sau vào trường Miscellaneous:
width: 992px;
margin: 0 auto;
Chú ý: độ rộng 992px có thể thay đổi giá trị theo ý muốn của bạn

Làm sao để thêm các trường giá trị thông tin phía dưới avatar user (số bài viết, được thích, nơi ở,…)?
Bạn thêm các trường đó tại ACP -> Styles -> Style Properties -> Message Elements

Tôi thay đổi màu của các nhóm user ở đâu?
Bạn thay đổi tại ACP->User->User Groups -> Administrator -> User Name CSS: color: red;. thay đổi màu của các nhóm user theo ý bạn.

Tôi chỉnh màu của giao diện ở đâu?
Bạn có thể chỉnh tại ACP -> Styles -> Style Properties -> Color Palette. Hoặc dùng chức năng Search template để chỉnh tiểu tiết khi bạn đã có key tìm kiếm.

Làm thế nào để chỉnh màu sắc và font chữ hiển thị tại Quote box hoặc một số BB Code khác?
Bạn chỉnh tại ACP -> Styles -> Style Properties -> BB Code Elements.

Làm sao để chỉnh màu chữ và màu nền của naviation tabs?
Bạn thêm vào EXTRA.css template:

.navTabs .navTab.PopupClosed .navLink {
     color: @primaryDark;
     background-color: @primaryLight;
}

Thay đổi màu cho phù hợp
Làm sao để chỉnh màu chữ và nền của navigation tabs khi trỏ chuột vào (hover)?
Bạn thêm vào EXTRA.css template:

.navTabs .navTab.PopupClosed .navLink:hover {
     color: @secondaryDark;
     background-color: @secondaryLight;
}

Thay đổi màu cho phù hợp

Làm sao để thay đổi màu nền của từng Category?
Thêm vào EXTRA.css template:

.nodeList .node_x .categoryStrip {
     background-color: @primaryLighter;
}

Thay thế node_x với giá trị ID của node đó, ví dụ, node_10. Thay đổi màu cho phù hợp

Làm sao để thay đổi icon cho mỗi forum?
Bạn có thể tham khảo add-on Custom Node icon.

Làm sao để tạo ra style riêng cho các bài post của staff?
Bạn có thể add thêm class .staff CSS vào EXTRA.css, ví dụ:

.staff {
      font-weight: bold;
      color: red;
}

Làm sao để tạo ra tiền tố (prefix) trước các tiêu đề?
Bạn có thể tạo tại đây: ACP -> Applications -> Thread Prefix ->Create New Thread Prefix .

Làm sao để xóa bỏ tiêu đề forum ở ngoài trang chủ?
Bạn thêm vào EXTRA.css template:

.forum_list .titleBar {
        display: none;
}

Chú ý có thể ảnh hưởng đến SEO của website

Làm cách nào để giới hạn kích thước ảnh trong bài post?
Bạn thêm vào EXTRA.css template:

.bbCodeImage {
         max-width: 50%;
}

Chú ý là bạn nên chọn giá trị % hơn là giá trị px và sau khi bạn resize thì click chuột vào ảnh sẽ cho kích thước gốc.

Làm thế nào để cấm sử dụng hình ảnh và thẻ quote trong chữ kỹ thành viên?
Bạn thêm vào EXTRA.css template:

.signature .bbCodeImage, .signature .bbCodeBlock {
        display: none !important;
}

Làm sao để tôi đặt 1 ảnh hoặc 1 module quảng cáo trên góc phải header?
Bạn sửa trong template ad_header

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