Chèn và thay đổi màu nền header Nukeviet

Thứ bảy - 11/03/2017 01:26

Nếu đã thay đổi màu nền của panel-heading theo mudule thì tại sao bạn không chèn và thay đổi luôn màu nền của header cho phù hợp với website của mình ? Bài viết này sẽ hướng dẫn bạn chèn nền vào header và thay đổi màu của nó theo từng module.

Điều kiện:

- Một ảnh dạng .png có kích thước phù hợp với header của site.

- Áp dụng cho Nukeviet 4.x.

 

Thay đổi màu nền header Nukeviet

 

Các bước thực hiện:

1. Thêm option tên module vào tag body của site:

(Nếu đã thực hiện việc thay đổi màu nền panel-heading theo tên module rồi thì bỏ qua bước này).

- Mở file theme.php trong thư mục themes/ten-theme/. Tìm đến dòng

$xtpl->assign( 'MODULE_NAME', $module_name );

thêm vào bên dưới nó đoạn mã sau:

$xtpl->assign( 'OP', $op );

- Mở file header_only.tpl trong thư mục themes/ten-theme/layout/. Tìm đến dòng

<body>

sửa thành:

<body id="body-{MODULE_NAME}" class="body-{OP}">

2. Chèn ảnh nền vào header website:

- Mở file theme.php theo đường dẫn themes/ten-theme/. Tìm đến dòng

$xtpl->assign('LOGO_HEIGHT', $size[1]);

thêm vào bên dưới nó đoạn mã sau:

// Banner_site
$xtpl->assign('SITE_NAME', $global_config['site_name']);
$xtpl->assign('THEME_SITE_HREF', NV_BASE_SITEURL . 'index.php?' . NV_LANG_VARIABLE . '=' . NV_LANG_DATA); 
$banner_size = @getimagesize(NV_ROOTDIR . '/' . $global_config['site_banner']); 
$banner = preg_replace('/\.[a-z]+$/i', '.svg', $global_config['site_banner']);
if (! file_exists(NV_ROOTDIR . '/' . $banner)) {
$banner = $global_config['site_banner'];
}
$xtpl->assign('BANNER_SRC', NV_BASE_SITEURL . $banner);
$xtpl->assign('BANNER_WIDTH', $banner_size[0]);
$xtpl->assign('BANNER_HEIGHT', $banner_size[1]);

3. Thay đổi màu nền header theo module:

- Mở file header_extended.tpl trong thư mục themes/ten-theme/layout/. Tìm đến dòng

<div id="header" class="row">

thêm vào bên dưới nó dòng code sau:

<div style="width: {BANNER_WIDTH}px; height: {BANNER_HEIGHT}px; 
background-size: {BANNER_WIDTH}px {BANNER_HEIGHT}px; background-repeat: 
no-repeat;" class="banner_site" id="{MODULE_NAME}">

Tìm tiếp:

</header>

thêm vào bên trên nó tag đóng </div>.

- Để tùy chỉnh màu banner thay đổi theo từng module bạn cần lọc ra liên kết tĩnh của module đó. Trong ví dụ này là 2 module: song-cham-lai videos.

- Cuối cùng, cũng trên file header_extended.tpl, thêm vào bên trên cùng đoạn css sau:

<style>
.banner_site {background: #6ed7ed url('{BANNER_SRC}');}
#song-cham-lai {background: rgba(0,255,204,0.5) url('{BANNER_SRC}');}
#videos {background: #fcf url('{BANNER_SRC}');}
</style>

Trong đó, bạn cần tùy chỉnh các màu #6ed7ed,  rgba(0,255,204,0.5), #fcf  trong đoạn css trên cho phù hợp với màu site của bạn.

Chúc các bạn thành công !

Tác giả bài viết: S.C.L

Bạn có thích bài viết này không ? Hãy like bài viết này hoặc chia sẻ bài viết đến bạn bè. Mọi ý kiến đóng góp hay thắc mắc bạn có thể Liên hệ hoặc tham gia Bình luận bên dưới.

Chân thành cảm ơn !

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

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