Hướng dẫn chỉnh sửa theme default 4x

Thứ bảy - 03/09/2016 22:48
Nhằm giúp các bạn hiệu chỉnh theme default 4.x tốt hơn nay mình lập Pic này hỗ trợ mọi người.
Đầu tiên chúng ta cần nắm được là quan tâm đến file nào, thư mục nào. chúng ta cần tải vài cài đặt phần mềm lấy mã màu và notepad + + về
- Trước hết chúng ta cần tắt chức năng tối ưu hệ thống website trong cấu hình chung.
- Mở các file sau: theme/default/css/style.css
theme/default/css/bootstrap.min.css
Hướng dẫn chỉnh sửa theme default 4x
BÀI VIẾT CHI TIẾT TẠI ĐÂY

Nhằm giúp các bạn hiệu chỉnh theme default 4.x tốt hơn nay mình lập Pic này hỗ trợ mọi người.
Đầu tiên chúng ta cần nắm được là quan tâm đến file nào, thư mục nào. chúng ta cần tải vài cài đặt phần mềm lấy mã màu và notepad + + về
- Trước hết chúng ta cần tắt chức năng tối ưu hệ thống website trong cấu hình chung.
- Mở các file sau: theme/default/css/style.css
theme/default/css/bootstrap.min.css
1.Hình nền website , tìm css trong file style.css Mã: Chọn tất cả body {
height: 100%;
padding: 0;
margin: 0;
background: #ccc url('../images/bg.png') repeat;
}

Thay hình nền bạn tại đây Mã: Chọn tất cả background: #ccc url('../images/bg.png') repeat;
Nếu chỉ muốn màu thôi thì sẽ sửa thành Mã: Chọn tất cả background: #ccc;
Nếu muốn hình nền đứn Mã: Chọn tất cả   g im khi cuộn thì sửa Mã: Chọn tất cả  background: url(../images/bg.jpg) top center fixed repeat-x
Màu hình nền bên trong Mã: Chọn tất cả #body {
background: #fff;
border-color: #dadada;
border-style: solid;
border-width: 0 1px 0 1px;
box-shadow: 0 0 4px rgba(0,0,0,0.15);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.15);
padding-top: 10px;
}


2. Hiệu chỉnh màu thanh heading tìm css trong file bootstrap.min.css Mã: Chọn tất cả .panel-primary>.panel-heading {
color: #fff;
background-color: #428bca;
border-color: #428bca;
}

background-color: #428bca; -> màu sắc
border-color: #428bca; -> màu chữ
Muốn sửa thành hình thì sửa như sau background-color: #428bca; thay thế bằng Mã: Chọn tất cả background: #ccc url('../images/bg.png') repeat;
3.Màu thanh menu ngang tìm css trong file bootstrap.min.css
tương tự như trên Mã: Chọn tất cả .navbar-default {
background-color: #0855a1;
border-color: #064481;
}

Màu khi active menu Mã: Chọn tất cả .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
color: #fff;
background-color: #063b70;
}

Màu khi rê chuột Mã: Chọn tất cả .navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#fff;background-color:transparent}

4. Xóa hình nền banner Mở file layout/header_extended.tpl
tìm đoạn Mã: Chọn tất cả       <img src="/themes/default/images/banner.jpg" alt="{SITE_NAME}"/>
               

Thay hình bạn muốn thay hoặc xóa nó đi
Nếu muốn hiệu chỉnh màu header thì tìm css trong file style.css Mã: Chọn tất cả #header {
height: 100px;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: rgba(255,255,255,0.75);
z-index: 10000;
}
Tập tin đính kèm npp.6.6.9.Installer.zip

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Sản phẩm bán chạy
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây