Từ đầu loạt bài về giao diện, ta chỉ dùng những gì Odoo cho sẵn: widget, class Bootstrap, bố cục group. Nhưng khi cần một diện mạo riêng — màu thương hiệu, khoảng cách khác, một vạch nhấn — thì phải chạm tới CSS. Và cách làm đúng của Odoo không phải sửa file lõi, mà thêm một file SCSS của chính module rồi khai vào bó asset. Bài này nhuộm form thẻ thành viên theo tông cà phê để minh hoạ.
SCSS trong module, khai vào assets
Odoo biên dịch SCSS (biến, lồng, mixin) ngay trong hệ thống asset. Ta đặt file .scss vào static/src/ của module, viết style, rồi khai đường dẫn vào web.assets_backend trong manifest:
Hình 1: File SCSS dùng biến ($ca-phe-nau) và lồng (nesting) — đặc trưng của SCSS. Nó nhắm class .o_quan_form (ta tự gắn vào <form>) để giới hạn phạm vi, cùng vài class có sẵn của Odoo (.oe_title, .o_horizontal_separator, .o_form_sheet). Manifest khai file vào web.assets_backend.
Mấu chốt của "làm đúng": tôi thêm class="o_quan_form" vào chính thẻ <form> của mình, rồi mọi quy tắc bọc trong .o_quan_form. Nhờ vậy CSS chỉ tác động form của module này, không rò rỉ sang form khác của Odoo.
Form nhuộm màu cà phê
Sau khi nâng cấp module, mở form thẻ VIP-0001:
Hình 2: Kết quả. "VIP-0001" giờ màu nâu cà phê (#6f4e37) với vạch nhấn dọc bên trái. Hai tiêu đề nhóm cũng nâu cho đồng bộ. Đỉnh sheet có nền gradient kem nhạt dần về trắng. Tất cả từ đúng một file SCSS, không đụng gì tới lõi Odoo.
Đây là kiểu tuỳ biến hay gặp khi làm module cho khách: gắn màu thương hiệu, tạo điểm nhấn cho màn hình quan trọng, mà vẫn nâng cấp Odoo bình thường vì không sửa core.
Nguyên tắc tuỳ biến an toàn
- Đừng sửa file lõi Odoo. Mọi tuỳ biến nằm trong asset của module bạn. Sửa core là mất hết khi nâng cấp, và vỡ ở chỗ khó lần.
- Giới hạn phạm vi. Bọc quy tắc trong một class riêng bạn kiểm soát (
.o_quan_form) để không vô tình đổi giao diện toàn hệ thống. CSS toàn cục rất dễ gây hiệu ứng phụ. - Nhắm class ổn định. Class kiểu
.o_form_view,.oe_title,.o_list_viewkhá bền qua các bản Odoo. Tránh bám vào class sinh động hoặc cấu trúc DOM sâu dễ đổi. - SCSS cho bạn biến và lồng — dùng biến cho màu thương hiệu để đổi một chỗ áp mọi nơi; lồng cho gọn. Odoo lo phần biên dịch.
Vài lưu ý kỹ thuật
- File SCSS phải được khai trong manifest mới có tác dụng — chỉ tạo file không đủ. (Cơ chế asset là chủ đề bài sau.)
- Nâng cấp module (
-u) để Odoo nạp lại danh sách asset sau khi sửa manifest; sửa nội dung file SCSS thì thường chỉ cần tải lại trang (Odoo build lại asset), nhưng thêm/bớt file thì cần-u. - Xung đột độ ưu tiên: CSS của Odoo có thể mạnh hơn; khi cần, tăng độ đặc hiệu bằng cách lồng sâu hơn thay vì lạm dụng
!important.
Ba ý mang về
- Tuỳ biến giao diện backend bằng SCSS của chính module: đặt file trong
static/src/, khai vàoweb.assets_backend; Odoo biên dịch SCSS (biến, lồng) — không bao giờ sửa file core. - Giới hạn phạm vi bằng class riêng (gắn vào view của bạn) để CSS chỉ áp đúng chỗ, tránh rò rỉ ra toàn hệ thống; nhắm các class ổn định của Odoo.
- File phải được khai trong manifest mới chạy;
-uđể nạp lại khi thêm/bớt file; tăng độ đặc hiệu bằng lồng thay vì lạm dụng!important.
Ta vừa viết CSS/SCSS. Bài sau đi sâu vào cơ chế đứng sau nó: Phần sau về assets_backend — cách Odoo gom, nạp và phân bó các file CSS/JS, và những bó asset khác nhau (backend, frontend, điểm bán hàng...) khác nhau ra sao.
