Khác biệt

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

--- programming4:theme:copy-from-deault-theme [2017/07/12 12:04] – [7) Chỉnh sửa lại giao diện để được giao diện mới] hoaquynhtim99
+++ programming4:theme:copy-from-deault-theme [2020/11/18 09:37] – [1) Copy Giao diện] nguyennam
@@ Dòng 1: / Dòng 1: @@
 ====== 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
@@ Dòng 168: / Dòng 170: @@
 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.
+Giao diện mặc định ở dạng ''boxed'' nếu muốn chỉnh sửa lại thành dạng ''full-width'' thì nên tránh việc CSS lại các thành phần ''.container, .wraper'' mà hãy tận dụng CSS ''position absolute fixed'' và ''z-index''
+Ví dụ một header có dạng sau:
+{{ :programming4:theme:header_full_width.png |}}
+Khi sửa từ giao diện mặc định ta chỉ cần thêm vào đầu file ''header_extended.tpl''
+<code html>
+<div class="site-banner-bg">&nbsp;</div>
+<div class="site-banner-bg1">&nbsp;</div>
+<div class="site-menu-bg">&nbsp;</div>
+</code>
+Và trong CSS
+<code css>
+.site-banner-bg {
+    background: #fdd602;
+    background: -moz-linear-gradient(top, #fdd602 0%, #ffd701 3%, #fed503 5%, #fdcb01 41%, #fcb701 72%, #fba201 96%, #fba202 100%);
+    background: -webkit-linear-gradient(top, #fdd602 0%,#ffd701 3%,#fed503 5%,#fdcb01 41%,#fcb701 72%,#fba201 96%,#fba202 100%);
+    background: linear-gradient(to bottom, #fdd602 0%,#ffd701 3%,#fed503 5%,#fdcb01 41%,#fcb701 72%,#fba201 96%,#fba202 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdd602', endColorstr='#fba202',GradientType=0 );
+    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: url(../images/trong-dong.png);
+    background-repeat: no-repeat;
+    background-position: center bottom;
+}
+.site-menu-bg {
+    background: #d36f21;
+    background: -moz-linear-gradient(top, #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%);
+    background: -webkit-linear-gradient(top, #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%);
+    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:DXImageTransform.Microsoft.gradient( startColorstr='#d36f21', endColorstr='#992a05',GradientType=0 );
+    height: 33px;
+    position: absolute;
+    top: 100px;
+    left: 0;
+    width: 100%;
+}
+</code>