#182758 gửi bởi quocviet2006
Ngày 13 Tháng 03 2017 , 08:17

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. 

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 đoạn mã: </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-laivideos.

- 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 được bôi đỏ 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 !

Sửa lần cuối bởi quocviet2006 vào Ngày 15 Tháng 03 2017 , 12:55, với tổng số 1 lần sửa.