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.
Phiên bản sau | Phiên bản trướcPhiên bản sauPhiên bản sau của cả hai bên | ||
programming4:theme:copy-from-deault-theme [2016/06/17 08:07] – được tạo ra hoaquynhtim99 | programming4:theme:copy-from-deault-theme [2017/07/12 12:11] – [8) Một số chú ý khi làm giao diện] hoaquynhtim99 | ||
---|---|---|---|
Dòng 5: | Dòng 5: | ||
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 thành giao diện ví dụ đặt tên là abc | ||
- | ===== 2) Xóa các file đã được lấy từ giao diện mặc định ===== | ||
- | nếu không có nó sẽ lấy từ giao diện | + | ===== 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/ | + | |
- | / | + | |
- | </ | + | |
+ | > Ảnh này có kích thước chiều rộng là '' | ||
- | ===== 3) Thay đổi hình minh họa của giao diện | + | ===== 3) Giao diện |
- | / | + | 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 |
- | ảnh này có kích thước chiều rộng là 300px, chiều cao từ 150 - 200px | + | Để tránh việc |
- | ===== 4) Giao diện của các Module ===== | + | Thành phần của giao diện module bao gồm: |
- | Nếu module | + | * File '' |
+ | * Thư mục '' | ||
+ | * File '' | ||
+ | * Thư mục '' | ||
- | Để tránh việc | + | > Các file và thư mục trên tính từ thư mục '' |
- | ===== 5) Layout của giao diện ===== | + | ===== 4) Layout của giao diện ===== |
Kiểm tra lại các layout, | Kiểm tra lại các layout, | ||
Dòng 40: | Dòng 35: | ||
</ | </ | ||
- | Cái nào làm thì dữ 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 | + | 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 / | Sau đó sửa lại file / | ||
Dòng 46: | Dòng 41: | ||
Sửa dòng | Sửa dòng | ||
< | < | ||
- | < | + | < |
</ | </ | ||
- | Thay **left-body-right** bằng layout mặc định cho giao diện, ví dụ thay thành | + | Thay **left-main-right** bằng layout mặc định cho giao diện, ví dụ thay thành |
< | < | ||
- | < | + | < |
</ | </ | ||
+ | ===== 5) Template của block ===== | ||
+ | Kiểm tra các file ''/ | ||
+ | > 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 ở ''/ | ||
+ | |||
+ | > Xem [[programming4: | ||
+ | |||
+ | ===== 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ư '': | ||
+ | |||
+ | 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: | ||
+ | |||
+ | <code css> | ||
+ | /* TIN TỨC LÀM HAI CỘT */ | ||
+ | .news_column.two_column > .panel { | ||
+ | margin-left: | ||
+ | position: relative; | ||
+ | background-color: | ||
+ | border-radius: | ||
+ | } | ||
+ | .news_column.two_column > .panel > .panel-heading { | ||
+ | margin-left: | ||
+ | position: relative; | ||
+ | margin-right: | ||
+ | border-radius: | ||
+ | background-color: | ||
+ | background-image: | ||
+ | border: 0; | ||
+ | padding-left: | ||
+ | } | ||
+ | .news_column.two_column > .panel > .panel-heading h4 { | ||
+ | font-size: 18px; | ||
+ | font-weight: | ||
+ | position: relative; | ||
+ | background-image: | ||
+ | background-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: | ||
+ | } | ||
+ | .news_column.two_column > .panel > .panel-heading h4 a { | ||
+ | color: #fff; | ||
+ | display: block; | ||
+ | background-image: | ||
+ | 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: | ||
+ | padding-left: | ||
+ | padding-right: | ||
+ | } | ||
+ | .news_column.two_column > .panel > .panel-body > h3 { | ||
+ | padding-top: | ||
+ | } | ||
+ | .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: | ||
+ | } | ||
+ | .news_column.two_column > .panel > .panel-body > ul li { | ||
+ | margin-bottom: | ||
+ | } | ||
+ | .news_column.two_column > .panel > .panel-body > a img { | ||
+ | margin-left: | ||
+ | margin-right: | ||
+ | border-radius: | ||
+ | padding: 3px; | ||
+ | border: solid 1px #cecece; | ||
+ | background-color: | ||
+ | float: right!important; | ||
+ | } | ||
+ | .news_column.two_column > .panel > .panel-body > div ul li: | ||
+ | margin-left: | ||
+ | padding-left: | ||
+ | } | ||
+ | .news_column.two_column > .panel > .panel-body > div li { | ||
+ | margin-bottom: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | 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ụ ' | ||
+ | |||
+ | Giao diện mặc định ở dạng '' | ||
+ | |||
+ | Ví dụ một header có dạng sau: | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | Khi sửa từ giao diện mặc định ta chỉ cần thêm vào đầu file '' | ||
+ | |||
+ | <code html> | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | |||
+ | Và trong CSS | ||
+ | |||
+ | <code css> | ||
+ | .site-banner-bg { | ||
+ | background: #fdd602; | ||
+ | background: -moz-linear-gradient(top, | ||
+ | background: -webkit-linear-gradient(top, | ||
+ | background: linear-gradient(to bottom, #fdd602 0%,#ffd701 3%,#fed503 5%,#fdcb01 41%,#fcb701 72%,#fba201 96%,#fba202 100%); | ||
+ | filter: progid: | ||
+ | height: 100px; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .site-banner-bg1 { | ||
+ | height: 100px; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | background-image: | ||
+ | background-repeat: | ||
+ | background-position: | ||
+ | } | ||
+ | .site-menu-bg { | ||
+ | background: #d36f21; | ||
+ | background: -moz-linear-gradient(top, | ||
+ | background: -webkit-linear-gradient(top, | ||
+ | background: linear-gradient(to bottom, #d36f21 0%,#c13513 3%,#bf360c 6%,#bc350f 10%,#b5340d 32%,#aa2f0d 52%,#aa2f0d 58%,#a42e0c 61%,#a62f0b 65%,#9f2d0b 84%,#9a2c0a 90%,#992703 94%,#982b0c 97%,#992a05 100%); | ||
+ | filter: progid: | ||
+ | height: 33px; | ||
+ | position: absolute; | ||
+ | top: 100px; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | </ |
programming4/theme/copy-from-deault-theme.txt · Sửa đổi lần cuối: 2020/11/21 09:41 bởi nguyennam