Công cụ thành viên

Công cụ trang web


programming4:theme:copy-from-deault-theme

Khác biệt

Đây là những khác biệt giữa hai phiên bản của trang.

Liên kết đến bản xem so sánh này

Phiên bản trước của cả hai bênPhiên bản trước
Phiên bản sau
Phiên bản trước
programming4:theme:copy-from-deault-theme [2017/07/12 12:11] – [8) Một số chú ý khi làm giao diện] hoaquynhtim99programming4:theme:copy-from-deault-theme [2020/11/21 09:41] (hiện tại) nguyennam
Dòng 1: Dòng 1:
 ====== Xây dựng giao diện bằng cách copy theme mặc định ====== ====== Xây dựng giao diện bằng cách copy theme mặc định ======
  
-===== 1) Copy Giao diện =====+===== 1) Copy Giao diện (Copy themes) =====
  
-Copy Giao diện mặc định thành giao diện ví dụ đặt tên là abc+Copy Giao diện mặc định ../themes/default và đổi tên theme thành tên dự án.
  
 +> Ví dụ đặt tên là .../themes/shop-hoa
 +
 +
 +===== 2) Xóa các phần thừa =====
 +
 +Vào thư mục ''/themes/ten-theme/blocks'' xóa hết các file trừ ''index.html''
 +
 +Vào thư mục css xóa hết các file chừa lại ''admin.css, bootstrap.min.css, bootstrap.non-responsive.css, custom.css, style.css, style.non-responsive.css, style.responsive.css''.
 +
 +Vào thư mục images xóa hết chừa lại thư mục ''icons, file index.html, no_image.gif''.
 +
 +Vào thư mục js xóa hết các file chừa lại ''bootstrap.min.js, custom.js, main.js''.
 +
 +Vào thư mục language xóa ''admin_fr.php, fr.php''. Nếu site của bạn không làm trên ngôn ngữ tiếng Anh thì xóa cả ''admin_en.php, en.php ''
 +
 +Vào thư mục layout xóa các:
 +  * Template block: ''block.border.tpl, block.primary.tpl, block.simple.tpl'' khi cần thì phát triển template cho giao diện
 +  * Xóa các file layout ''layout.xxx.tpl'' nếu không dùng
 +
 +
 +===== 3) Thay đổi hình minh họa của giao diện =====
 +Mở config.ini cấu hình lại các thông số tên giao diện, tác giả, mô tả, website
  
-===== 2) Thay đổi hình minh họa của giao diện ===== 
 Hình minh họa của giao diện là ''/themes/abc/default.jpg''. Nếu đổi tên ''default.jpg'' thành tên khác thì cần mở file ''/themes/abc/config.ini'' thay đổi giá trị tương ứng tại dòng <code xml><thumbnail>default.jpg</thumbnail></code> Hình minh họa của giao diện là ''/themes/abc/default.jpg''. Nếu đổi tên ''default.jpg'' thành tên khác thì cần mở file ''/themes/abc/config.ini'' thay đổi giá trị tương ứng tại dòng <code xml><thumbnail>default.jpg</thumbnail></code>
  
-> Ảnh này có kích thước chiều rộng là ''300px'', chiều cao từ ''150 200px''+> Ảnh này có kích thước chiều rộng là ''800px'', chiều cao từ ''600px'' 
 + 
 +Trong config.ini xóa hết các thẻ setlayout, setblocks và nội dung trong nó. Cấu hình lại layout mặc định trong thẻ <layoutdefault> 
 + 
 +===== 4) Chỉnh sửa giao diện ===== 
 + 
 +Các chỉnh sửa liên quan tới CSS cố gắng viết vào file ''../themes/ten-theme/css/customs.css''. Trường hợp có liên quan đến responsive, non-responsive có thể sửa vào style.css, style.responsive.css, style.non-responsive.css tùy. 
 + 
 +Các chỉnh sửa liên quan tới JS phải viết vào file ''../themes/ten-theme/js/customs.js'' 
 + 
 +Các block của module mà có giao diện, cấu trúc hay không thể chỉnh sửa bằng css thì buộc phải viết thành block riêng của giao diện. Block của giao diện cần thỏa mãn cấu hình sau (hình minh họa phía dưới) 
 + 
 +  * Chọn module: Cầu lấy dữ liệu 
 +  * Cấu hình tùy chọn của block đó 
 + 
 +{{ :programming4:theme:2.png?400 |}} 
 + 
 +Các chỉnh sửa thêm liên quan tới CSS bắt buộc phải sửa vào module thì phải viết xuống dòng file css của module đó và có thêm comment chú thích. 
 + 
 +Các chỉnh sửa liên quan tới JS bắt buộc phải sửa vào JS của module thì cần phải chú thích đoạn nào đã sửa và thêm mới để người sau có thể biết tránh xóa đi. 
 + 
 +Các giao diện rip từ mẫu có sẵn thì phải chỉnh sửa trên ...themes/ten-theme cho phù hợp chứ không được lấy full css html của giao diện đang rip đó vì sẽ thừa rất nhiều file
  
-===== 3) Giao diện của các Module =====+===== 5) Giao diện của các Module =====
  
 Nếu module nào không chỉnh sửa, cần xóa nó đi, bởi nếu không khi giao diện default chỉnh sửa sẽ phải đi sửa tất cả các giao diện này, và sinh ra rất nhiều rác trong code. Nếu module nào không chỉnh sửa, cần xóa nó đi, bởi nếu không khi giao diện default chỉnh sửa sẽ phải đi sửa tất cả các giao diện này, và sinh ra rất nhiều rác trong code.
Dòng 27: Dòng 69:
  
  
-===== 4) Layout của giao diện =====+===== 6) Layout của giao diện =====
  
 Kiểm tra lại các layout, Kiểm tra lại các layout,
Dòng 48: Dòng 90:
 </code> </code>
  
-===== 5) Template của block =====+===== 7) Template của block =====
 Kiểm tra các file ''/themes/abc/layout/block.**.tpl'' - chúng là các template của block, nếu cái nào làm thì giữ lại, cái nào không làm xóa đi. Kiểm tra các file ''/themes/abc/layout/block.**.tpl'' - chúng là các template của block, nếu cái nào làm thì giữ lại, cái nào không làm xóa đi.
  
 > Chú ý: Template block.default.tpl là tối thiểu phải có, không được xóa nó. > Chú ý: Template block.default.tpl là tối thiểu phải có, không được xóa nó.
  
-===== 6) Các block global của giao diện =====+===== 8) Các block global của giao diện =====
 Kiểm tra lại các blocks ở ''/themes/abd/blocks'', cái nào cần sử dụng thì giữ lại, cái nào không cần sử dụng thì xóa đi.  Kiểm tra lại các blocks ở ''/themes/abd/blocks'', cái nào cần sử dụng thì giữ lại, cái nào không cần sử dụng thì xóa đi. 
  
 > Xem [[programming4:block#tổng_quan_về_blockquy_uớc_va_cach_dặt_ten|tổng quan về block]] > Xem [[programming4:block#tổng_quan_về_blockquy_uớc_va_cach_dặt_ten|tổng quan về block]]
  
-===== 7) Chỉnh sửa lại giao diện để được giao diện mới =====+===== 9) Chỉnh sửa lại giao diện để được giao diện mới =====
 Cuối cùng là việc chỉnh sửa CSS và các file tpl để giao diện abc trở thành giao diện mới. Cuối cùng là việc chỉnh sửa CSS và các file tpl để giao diện abc trở thành giao diện mới.
  
-===== 8) Một số chú ý khi làm giao diện =====+===== 10) Một số chú ý khi làm giao diện =====
  
 Hạn chế tối đa việc copy giao diện của các module từ giao diện mặc định sang giao diện mới để chỉnh sửa giao diện mà hãy tận dụng tối đa khả năng tùy biến của CSS để chỉnh sửa giao diện. Hạn chế tối đa việc copy giao diện của các module từ giao diện mặc định sang giao diện mới để chỉnh sửa giao diện mà hãy tận dụng tối đa khả năng tùy biến của CSS để chỉnh sửa giao diện.
programming4/theme/copy-from-deault-theme.txt · Sửa đổi lần cuối: 2020/11/21 09:41 bởi nguyennam