Hướng dẫn chỉnh sửa Giao diện diễn đàn Xenforo

[PVS]

Để có được một diễn đàn đẹp yêu cầu nhà quản 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 template EXTRA.css:

.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 template EXTRA.css:

.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 template EXTRA.css:

.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 template EXTRA.css:

.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 template EXTRA.css:

.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 template EXTRA.css:

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

Nguồn: azviet.asia​

 

[phankt]

Bác @PVS cho em hỏi

1/Làm sao để chỉnh từ giao diện mặc đinh sang giao diện phẳng làm mất bo góc các box ?

2/Làm sao để chỉnh chiều cao của thanh nav ?

3/Làm sao để chỉnh hover cho toàn bộ link trên website.
Diễn đàn của em khi di chuột vào là link font-size lớn hơn trong viết và thanh navi ;nhảy nhỏ ở các node.

4/ Làm sao để chỉnh sửa giao diện responsive chuẩn theo thiết bị khi mà ở đi động dd em bị vỡ như này.

 

[bannvph00701]

Bác @PVS cho em hỏi

1/Làm sao để chỉnh từ giao diện mặc đinh sang giao diện phẳng làm mất bo góc các box ?
View attachment 15354

2/Làm sao để chỉnh chiều cao của thanh nav ?
View attachment 15355

3/Làm sao để chỉnh hover cho toàn bộ link trên website.
Diễn đàn của em khi di chuột vào là link font-size lớn hơn trong viết và thanh navi ;nhảy nhỏ ở các node.

4/ Làm sao để chỉnh sửa giao diện responsive chuẩn theo thiết bị khi mà ở đi động dd em bị vỡ như này.
View attachment 15356

Cùng câu hỏi vơi bác. bác admin giúp với ạ