Chào các bạn hôm nay mình sẽ hướng dẫn các bạn css giao diện Nukeviet tùy biến theo rất nhiều kiểu khác nhau thông qua id và class được truyền ở thẻ body
Các bước thực hiện như sau:
Bước 1:
Bạn mở file themes/theme_ban/theme.php
Tìm đoạn:$xtpl->assign( 'MODULE_NAME', $module_name );Thêm xuống dưới:
$xtpl->assign( 'OP', $op );Thành:
$xtpl->assign( 'MODULE_NAME', $module_name ); $xtpl->assign( 'OP', $op );
Bước 2:
Bạn mở file themes/theme_ban/layout/header_only.tpl
Tìm đoạn<body>Sửa thành
<body id="body-{MODULE_NAME}" class="body-{OP}">Bước 3:
Bạn mở file themes/theme_ban/css/style.css
Mình sẽ tiến hành css demo cho tiêu đề block để bạn có thể hình dung được dễ dàng hơn
#body-cam-nang-du-lich .block-panel-default .block-panel-heading { background: #041721; color: #fff; } #body-du-lich-con-dao .block-panel-default .block-panel-heading { background: ##FF0119; color: #fff; }
Như vậy bạn sẽ có background cho tiêu đề của block có các màu khác nhau
[ATTACH=full]31[/ATTACH]
Trong đó cam-nang-du-lich và du-lich-con-dao là tên các module
ngoài ra bạn cũng có thể css theo class ở từng khu vực của module#body-du-lich-con-dao.body-main{ } #body-du-lich-con-dao.body-detail{ } #body-du-lich-con-dao.body-viewcat{ }
Tìm kiếm nhanh
Kỹ thuật css cho theme Nukeviet 4(Phần 1)
Thảo luận trong 'Coding' đăng bởi dangdinhtu, 23/06/2016 16:22.
-
-
-
-
[ATTACH=full]34[/ATTACH]
đây là block page html của module page. H em muốn sửa cái heading của nó thì viết css thế nào theo hướng dẫn trên
[ATTACH=full]35[/ATTACH]
Tên module là dòng mấy vậy nhỉ
Tệp đính kèm:
-
-
-
-
-
[QUOTE="aptx4869, post: 91, member: 25"]
tên module là tên gốc của nó phải không nhỉ
Còn làm cho block giống vậy không truyền biến thế nào bác.
Vídụ: em có 1 cái module là page (hệ thốg) rồi bật block global html (của module page)
Bây giờ em muốn sửa cái background thì phải viết thế nào
[/QUOTE]
Các bước bạn làm theo hướng dẫn. Đến đoạn thêm css trong style.css bạn xem bạn sử dụng Template block nào thì bạn thêm class cho template đó, nhưng bạn nên tạo 1 template riêng để dùng cái này, ví dụ bạn dùng default thì khi thêm css bạn sửa thành:
Lưu ý bạn muốn đổi màu những module nào (kể cả module ảo cũng được) thì bạn tạo bấy nhiêu vùng chọn cho từng module nhé.
#body-page .panel-body { background: #041721; color: #fff;}#body-news .panel-body { background: ##FF0119; color: #fff;}[ATTACH=full]41[/ATTACH]
Tệp đính kèm:
-
-
-
-
-
-
(Bạn không có quyền trả lời tại chủ đề này.)