Tùy biến theme XenForo mà không đụng đến code gốc

[Thanh Nguyệt]

Bạn có thể "lột xác" cả forum mà không cần chạm tay vào một dòng code gốc nào không? Có đấy!

Tại sao KHÔNG nên sửa trực tiếp code gốc?​

Việc chỉnh sửa trực tiếp file gốc (core) trong XenForo giống như bạn khâu thêm áo cho người đang chạy: rủi ro, rối rắm, và dễ “toang” khi update.

Cập nhật lên XenForo mới là mọi chỉnh sửa đi bụi
Khó debug, dễ gây lỗi toàn hệ thống
Mất khả năng tái sử dụng khi triển khai site mới

---

Vậy làm sao để “độ xe” XenForo một cách an toàn?​

XenForo cực kỳ mạnh ở chỗ cho phép bạn tùy biến giao diện, style, màu sắc, bố cục... mà không hề đụng tới code gốc, thông qua 5 công cụ chính:

---

1. Style Properties – Truy cập GUI, chỉnh cực nhanh​

Vào AdminCP > Appearance > Styles > Style Properties
Tại đây, bạn có thể:

• Đổi màu nền, viền, text, button… bằng GUI
• Thay đổi kích thước border, padding, font size
• Chỉnh radius, hiệu ứng hover… mà không cần viết CSS

Tất cả các giá trị này được lưu thành biến @xf-* như @xf-primaryColor, cực kỳ dễ quản lý.

---

2. Templates – Tùy chỉnh giao diện qua hệ thống Template​

XenForo sử dụng template engine riêng cho HTML và SCSS. Bạn có thể override một template mà không sửa gốc bằng cách:

• Tạo bản sao của template
• Hoặc chỉnh trong child style (kế thừa style cha)

Ví dụ: muốn sửa layout trang chủ, bạn chỉnh template PAGE_CONTAINER hoặc thêm đoạn vào extra.less.

---

3. extra.less – Vùng đất tự do cho CSS/SCSS custom​

extra.less là nơi bạn có thể viết SCSS để:

• Ghi đè style mặc định
• Thêm animation
• Viết class riêng cho các widget hoặc addon

Không cần sửa file nào khác, và hoàn toàn an toàn khi cập nhật.

.message-userArrow {
  display: none;
}

.block-container {
  border-radius: 12px;
}

---

4. Biến @xf – Mặc đồng phục cho toàn forum​

Ví dụ:

background-color: @xf-primaryColor;

Bạn chỉnh màu @xf-primaryColor trong GUI -> cả forum tự động đổi theo. Quá tiện!

---

5. Child Style – Tùy biến mà vẫn giữ nguyên gốc​

Không nên sửa trực tiếp style gốc. Hãy:

• Tạo một Child Style (kế thừa style mặc định)
• Tùy chỉnh trong child này
• Khi update style cha, style con vẫn hoạt động bình thường

---

Một vài mẹo "độ giao diện" không đụng code:​

• Dùng display: none; để ẩn thành phần không cần
• Tùy chỉnh typography với font-family, line-height, letter-spacing
• Tạo hiệu ứng hover sáng bóng cho button bằng SCSS
• Viết @media để làm responsive phần bạn thêm

---

Tổng kết​

Cần thay đổi gì?	Làm ở đâu?	Có đụng code gốc không?
Màu sắc, khoảng cách	Style Properties
Giao diện tổng thể	Templates/Child
CSS tùy chỉnh nâng cao	extra.less
Biến cấu hình style	@xf-*

Tùy chỉnh thoải mái – vẫn an toàn khi update!

---