DRAERP cung cấp khả năng tạo chủ đề nâng cao để tùy chỉnh giao diện trang web của bạn và làm cho nó phù hợp với thương hiệu của bạn.
Truy cập : Trang chủ > Cài đặt > Website > Chủ đề trang Web.
1. Cách tạo Chủ đề trang web
- Đi tới danh sách Chủ đề trang web và nhấp vào Mới.
- Nhập tên chủ đề.
- Tùy chỉnh chủ đề của bạn.
- Nhấp vào Lưu.
Lưu ý: Đảm bảo bạn đặt Chủ đề trang web trong Cài đặt trang web để chủ đề được áp dụng.
2. Tính năng
2.1. Cấu hình chủ đề
Phần 'Cấu hình Chủ đề' ở đó để khởi động một chủ đề cơ bản. Tại đây, bạn có thể chọn bảng màu, phông chữ và kiểu nút của mình
2.2. Biểu định kiểu
Nếu bạn biết về SCSS và Bootstrap 4 , bạn có thể viết SCSS tùy chỉnh theo cách thủ công.
Trong trường 'Ghi đè tùy chỉnh', bạn có thể ghi đè các biến được xác định bởi tệp chủ đề của bất kỳ ứng dụng nào. Nội dung của trường này sẽ được đưa vào trước khi nhập bất kỳ SCSS nào khác. Ví dụ, biến $space được đặt thành 1rem theo mặc định. Chỉ cần xác định lại nó để $spacer: 2rem;làm cho tất cả các khoảng trắng lớn gấp đôi.
Trong trường 'SCSS tùy chỉnh', bạn có thể thêm kiểu của riêng mình. Điều này sẽ được bao gồm sau khi nhập các chủ đề của ứng dụng. Bạn cũng có thể ghi đè bất kỳ kiểu cụ thể nào. Ví dụ: nếu bạn không thích các nút của chúng tôi, chỉ cần bao gồm những điều sau:
.btn-primary {
background-color: $teal;
color: $orange;
}
2.3. Tệp chủ đề bao gồm
Nếu bạn xem chủ đề mặc định được tạo bởi hộp thoại cấu hình, nó sẽ nhập frappe/public/scss/website và DraERP/public/scss/website. Đây là các tệp chủ đề mặc định cho frappe và DraERP ứng dụng. Nếu bạn đã cài đặt bất kỳ ứng dụng nào khác, họ cũng có thể cung cấp website.scss tệp của riêng mình.
Phần 'Tệp chủ đề được bao gồm' liệt kê tất cả các ứng dụng đã cài đặt. Mỗi ứng dụng có thể mang đến tệp chủ đề riêng ( [app]/public/scss/website.scss). Một chủ đề có thể hoàn chỉnh, cung cấp phong cách cho toàn bộ trang web hoặc chỉ là một tiện ích bổ sung. Ví dụ, nó có thể chỉ tạo kiểu cho các phần tử mà nó giới thiệu. Bằng cách chọn các hộp, bạn có thể chọn chủ đề nào sẽ được đưa vào trang web của mình.
2.4. JS tùy chỉnh
Bạn cũng có thể viết JavaScript tùy chỉnh sẽ chạy khi chủ đề của bạn được áp dụng. Sử dụng nó để thêm / xóa các lớp khỏi các phần tử hoặc bất kỳ tập lệnh nào giúp bạn thay đổi giao diện các phần tử của mình.
