Hướng dẫn chỉnh sửa (RIP) theme default trong NukeViet 4

Thứ bảy - 24/01/2015 10:21
Hướng dẫn bạn một số sửa đổi, tối ưu cơ bản về giao diện dựa trên theme Default của NukeViet 4, cũng như chức năng chỉnh sửa CSS trong Admin Panel.
Hướng dẫn chỉnh sửa (RIP) theme default trong NukeViet 4
Hướng dẫn chỉnh sửa (RIP) theme default trong NukeViet 4

Một số cách thức chỉnh sửa giao diện cơ bản khi bạn tiến hành chỉnh sửa theme, được nhân bản từ theme default có sẵn kèm với bộ cài NukeViet 4. Do chủ chỉnh sửa đến CSS, bạn sẽ cần đến một trình soạn thảo tốt, có thể tham khảo qua Notepad ++.

Ngoài ra, từ bản NV4, chúng ta đã có bộ công cụ tuỳ chỉnh CSS ngay trong Admin Panel. Các cấu hình tại đây sẽ được nạp sau cùng và ghi đè lên các thuộc tính có sẵn của CSS hệ thống. Điều này khá thú vị bởi bạn không phải đụng vào các CSS bootstrap đã được nén ( vì nhìn rất mệt ), và nếu có nâng cấp Bootstrap sau này thì các chỉnh sửa cũng không ảnh hưởng nhiều.

Giờ tiến hành nhé !


 

- 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

body {height: 100%;padding: 0;margin: 0;background: #ccc url('../images/bg.png') repeat;}

Thuộc tính quy định  hình nền tại đây

background: #ccc url('../images/bg.png') repeat;


Nếu chỉ muốn màu thôi thì sẽ sửa thành

background: #ccc;


Nếu muốn hình nền đứng im khi cuộn thì sửa thuộc tính này thành :

background: url(../images/bg.jpg) top center fixed repeat-x

Màu hình nền bên trong ( khối body ).

#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

Thuộc tính này được quy định tại  file bootstrap.min.css.

Mình không khuyến khích các bạn chỉnh sửa trực tiếp file này mà hãy tạo một file CSS khác và cho nạp sau dưới cùng so với các CSS hệ thống; hoặc tận dụng chức năng chỉnh sửa CSS của NV4 mà mình sẽ đề cập ở phần dưới bài viết này.

Các bạn sẽ thấy thuộc tính của thẻ panel-heading như sau :

.panel-primary>.panel-heading {color: #fff;background-color: #428bca;border-color: #428bca;}

Trong đó :

background-color: #428bca; -> màu sắc của khốiborder-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

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

.navbar-default {background-color: #0855a1;border-color: #064481;}

 

Màu khi active menu ( khi đang truy cập ở URL thuộc Menu đó ).

 

.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 lên phần tử thuộc Menu.

.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 phần banner

- Mở file layout/header_extended.tpl

Tìm đoạn

<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 tương ứng trong file style.css

#header {height: 100px;position: absolute;top: 0;left: 0;width: 100%;background: rgba(255,255,255,0.75);z-index: 10000;}

 

5. Chức năng chỉnh sửa CSS trong Admin Panel của NV4.

Như đã nói ở trên, phiên bản 4 của NukeViet giờ đây cho phép bạn thực hiện các điều chỉnh CSS cần thiết thông qua Admin Panel. Sau khi bạn đăng nhập Admin vào site, hãy chọn phần Quản lý giao diện / Thiết lập giao diện. Hãy chọn đúng theme mà bạn muốn chỉnh sửa thông qua menu sổ xuống bên phải của phần thiết lập.

theme editor

 

Có rất nhiều tuỳ chọn trong phần này, liên quan đến từng khối hiển thị tương ứng của trang. Tuy vậy trong khuôn khổ bài viết mình chưa đi sâu vội đến các chức năng này. Bạn chỉ cần chú ý đến tab CSS. Hãy click vào và bạn sẽ thấy một khu vực để nhập các soạn thảo CSS.

css admin panel

 

Thêm vào đây các thuộc tính, tuỳ chọn tương ứng. Các thông số này sẽ được hệ thống sinh ra 1 file CSS và nạp cuối cùng trong giao diện, ghi đè lên các thuộc tính trước đó.

Trên đây là một vài thiết lập cơ bản để chỉnh sửa, tối ưu giao diện cho NukeViet 4 với theme default. Từ giao diện mặc định ban đầu này, bạn sẽ dễ dàng hơn tạo ra các giao diện mới, phù hợp hơn cho website của mình. Chúc bạn thành công !

Bài viết tổng hợp, biên tập lại các nội dung từ chia sẻ của anh nhimthulinh từ forum NukeViet.

Tác giả bài viết: Kenny Nguyễn

 Từ khóa: nukeviet, css, theme, notepad plus plus

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

Xếp hạng: 5 - 2 phiếu bầu
Click để đánh giá bài viết

  Ý kiến bạn đọc

  • Kendy Nguyễn

    Chào bạn, Cho mình hỏi chèn banner flash vào nukeviet 4 thì làm sao, hướng dẫn mình cụ thể với ạ.
    mình cảm ơn.

      Kendy Nguyễn   11/08/2016 21:29
  • Hoài An

    Good! very good! Thanks..

      Hoài An   21/07/2016 14:05
  • Hùng

    bác có rip theme không ? em đang cần làm giống trang này dùng nuke 4 http://jf61.com/index.htm bac cho em xin cái giá vào mail hoặc nhắn cho em cái tin theo số 0985 748 369 nhé thanks bác nhiều ah.

      Hùng   02/03/2016 01:38
  • Hùng

    bác có rip theme không ? em đang cần làm giống trang này dùng nuke 4 http://jf61.com/index.htm bac cho em xin cái giá vào mail hoặc nhắn cho em cái tin theo số 0985 748 369 nhé thanks bác nhiều ah.

      Hùng   02/03/2016 01:34
  • nghia

    thank, bác hướng dẫn cho mình cái chỉnh sữa dòng copy right, phần địa chỉ, sdt, được hk dạ. Ở nuke 4.

      nghia   02/12/2015 06:22
    • @nghia cái đó thường sửa trong block ( kích hoạt kéo thả block ) hoặc file footer_extend.tpl trong theme đang dùng.

        nguyentiendat713 Nguyen   04/12/2015 08:33
Mã bảo mật   
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