Đây là một phiên bản cũ của tài liệu!
Mục lục
Xây dựng giao diện bằng cách copy theme mặc định
1) Copy Giao diện
Copy Giao diện mặc định thành giao diện ví dụ đặt tên là abc
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
<thumbnail>default.jpg</thumbnail>
Ảnh này có kích thước chiều rộng là300px
, chiều cao từ150 - 200px
3) 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.
Để tránh việc thừa, Nên xóa hết giao diện của module, khi chỉnh sửa cho module nào thì mới copy từ giao diện mặc định sang.
Thành phần của giao diện module bao gồm:
- File
css/ten-module.css
- Thư mục
images/ten-module/
- File
js/ten-module.js
- Thư mục
modules/ten-module/
Các file và thư mục trên tính từ thư mụcthemes/abc/
4) Layout của giao diện
Kiểm tra lại các layout,
/themes/abc/layout/layout.***.tpl
Cái nào làm thì giữ lại, Cái nào ko làm thì phải xóa đi để tránh người dùng cấu hình vào nó lỗi
Sau đó sửa lại file /themes/abc/config.ini
Sửa dòng
<layoutdefault>left-main-right</layoutdefault>
Thay left-main-right bằng layout mặc định cho giao diện, ví dụ thay thành main
<layoutdefault>main</layoutdefault>
5) 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.
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
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.
7) 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.
8) 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.
Áp dụng triệt để các thuộc tính của CSS 3 như :last-child, :first-child, :before, :after
để tùy biến giao diện.
Ví dụ trường hợp sau:
Giao diện tin tức yêu cầu phải là hiển thị chuyên mục thành hai cột. Mặc định NukeViet có sẵn như sau:
Yêu cầu phải có giao diện như sau:
Khi đó chỉ cần viết đoạn CSS như sau là có thể chỉnh sửa được giao diện:
/* TIN TỨC LÀM HAI CỘT */ .news_column.two_column > .panel { margin-left: 10px; position: relative; background-color: #fff; border-radius: 0; } .news_column.two_column > .panel > .panel-heading { margin-left: -9px; position: relative; margin-right: 60px; border-radius: 0; background-color: transparent; background-image: none!important; border: 0; padding-left: 0; } .news_column.two_column > .panel > .panel-heading h4 { font-size: 18px; font-weight: bold; position: relative; background-image: url(../images/homepage-focus-bg.gif); background-repeat: repeat; border: 1px #f1a60d solid; } .news_column.two_column > .panel > .panel-heading h4:before { width: 9px; height: 11px; overflow: hidden; content: ""; position: absolute; bottom: -12px; left: -1px; background-image: url(../images/news-cat-conner.jpg); } .news_column.two_column > .panel > .panel-heading h4 a { color: #fff; display: block; background-image: linear-gradient(to bottom,rgba(251, 149, 1, 0.39) 0%,rgba(251, 149, 1, 0.36) 100%) !important; padding: 3px 3px 3px 10px; } .news_column.two_column > .panel > .panel-body { padding: 0; } .news_column.two_column > .panel > .panel-body > h3, .news_column.two_column > .panel > .panel-body > div, .news_column.two_column > .panel > .panel-body > p { background-color: #f8f8f8; padding-left: 10px; padding-right: 10px; } .news_column.two_column > .panel > .panel-body > h3 { padding-top: 10px; } .news_column.two_column > .panel > .panel-body > h3 a { color: #bb3914; } .news_column.two_column > .panel > .panel-body > h3 a:hover { color: #3a4276; } .news_column.two_column > .panel > .panel-body > p { padding-bottom: 10px; } .news_column.two_column > .panel > .panel-body > ul li { margin-bottom: 6px!important; } .news_column.two_column > .panel > .panel-body > a img { margin-left: 10px; margin-right: 10px; border-radius: 0; padding: 3px; border: solid 1px #cecece; background-color: #fff; float: right!important; } .news_column.two_column > .panel > .panel-body > div ul li:first-child { margin-left: 0; padding-left: 0; } .news_column.two_column > .panel > .panel-body > div li { margin-bottom: 3px!important; }
Nếu copy giao diện module từ giao diện mặc định sang giao diện mới để chỉnh sửa hãy kiểm tra lại nếu không thật sự cần thiết phải chỉnh sửa file js của module thì nên xóa nó đi, hệ thống sẽ tự động gọi từ giao diện mặc định, như vậy sẽ giảm thiểu một khối lượng công việc khi nâng cấp giao diện.
Không nên chỉnh sửa vào file style.css và main.js của giao diện mặc định copy sang mà hãy tạo file mới ví dụ 'custom.css' và 'custom.js' để viết những cái mới để sau này nâng cấp chỉ cần ghi đè các file tương ứng từ giao diện mặc định sang là giao diện mới hoàn toàn có thể sử dụng ngay.