Các lưu ý nhỏ khi làm việc với giao diện NukeViet 4

Chỉnh sửa giao diện mặc định

Giao diện mặc định (default) là thứ mà các bạn không nên đụng vào (không nên chỉnh sửa trực tiếp trên đó). Nếu muốn xây dựng giao diện từ giao diện default, bạn nên sang chép default thành một giao diện với tên khác, và chỉnh sửa trên giao diện đó.

Sử dụng các tập tin bootstrap

Đội code sẽ liên tục cập nhật các phiên bản mới của bootstrap cho giao diện mặc định (default). Khi tạo một giao diện mới có sử dụng bootstrap, để giảm tải dung lượng giao diện, bạn không nên đặt các file của boostrap vào giao diện đang dùng, mà nên liên kết đến các tập tin của giao diện mặc định.

<link href="/themes/default/css/bootstrap.min.css" rel="stylesheet" />

Chỉnh sửa CSS

NukeViet 4 sử dụng framework bootstrap để định dạng giao diện. Tại thư mục themes/default/css/ chứa các tập tin thuộc framework bootstrap (bootstrap-theme.css, bootstrap-theme.min.css, bootstrap.css, bootstrap.min.css).
Thứ tự load các tập tin css của giao diện default (Bạn có thể xem tại themes/default/layout/header_only.tpl)

1. Bootstrap (bootstrap.min.css)
2. style.css, style.responsive.css (tập tin css tùy chỉnh)
3. font-awesome.min.css: icon awesome
4. Các tập tin css của module (news.css, contact.css, download.cs,....)

Đặc biệt lưu ý: Mỗi phiên bản phát triển của bootstrap đội code sẽ thực hiện việc ghi đè nội dung các tập tin của boostrap, nên, bạn không nên chỉnh sửa css trực tiếp vào các tập tin này. Theo thứ tự load file, style.css load sau bootstrap, nếu muốn thay đổi gì, bạn nên ghi đè thuộc tính định dạng vào tập tin style.css, như thế giao diện của bạn sẽ không bị ảnh hưởng khi cập nhật phiên bản bootstrap.
Ví dụ: class panel-heading trong bootstrap.min.css được định dạng bằng các thuộc tính như bên dưới (màu viền xanh)

.panel-primary {
     border-color: #428bca;
}

Nếu muốn thay đổi màu viền từ màu xanh sang màu đỏ, mở style.css và thêm (vào cuối) các thuộc tính định dạng lại cho class này

.panel-primary {
     border-color: red;
}

Xem thêm: Làm thế nào để tùy chỉnh các lớp thuộc tính mặc định của bootstrap​

Sử dụng tài nguyên của giao diện default

Giao diện default là thứ không được phép xóa trong hệ thống, nó là nền tảng cho các giao diện khác.
Giao diện module được đặt trong thư mục themes/ten-theme/modules. Quy trình xử lý giao diện module được tiến hành như sau:

1. Hệ thống kiểm tra thư mục giao diện module của giao diện đang sử dụng
2. Nếu tồn tại giao diện của module (Ví dụ module news thì phải có themes/ten-theme/modules/news) thì hệ thống sẽ lấy các file *.tpl trong thư mục này để hiển thị giao diện. Nếu không có, thì sẽ tìm sang giao diện default (themes/default/modules/news).
3. Nếu tồn tại thư mục giao diện trong theme default, thì lấy các tập tin *.tpl ở default để hiển thị, ngược lại nếu không tồn tại, hệ thống hiển thị thông báo lỗi giao diện.

Vậy nên, nếu bạn tạo một giao diện mới dựa trên default hoặc giao diện khác có sử dụng bootstrap giống default mà muốn sử dụng giao diện module có sẵn của giao diện default, thì ở module đang dùng, bạn xóa thư mục themes/ten-theme/modules/ten-module (Tuy nhiên nếu dùng thế này, thì bạn không nên chỉnh sửa vào giao diện default khi muốn thay đổi).

Tùy chỉnh giao diện module qua file theme.php

Tập tin modules/ten-module/theme.php có chức năng xử lý (về mặt PHP) và hiển thị giao diện tương ứng với mỗi module. Khi thiết kế giao diện, mỗi giao diện sẽ có cách hiển thị khác nhau nên phần xử lý PHP cũng khác nhau, nên theme.php cũng phải đươc tùy chỉnh để phù hợp với giao diện đó. Tuy nhiên, nếu chỉnh sửa vào file modules/ten-module/theme.php thì việc này sẽ làm ảnh hưởng đến các giao diện khác, hay bạn sẽ gặp khó khăn khi nâng cấp hệ thống.
NukeViet đã thiết kế để xử lý việc này. Bạn hãy copy tập tin modules/ten-module/theme.php vào themes/ten-theme/modules/ten-module/theme.php và chỉnh sửa vào file này.

Đang cập nhật......