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 05:22.

  • dangdinhtu

    dangdinhtu Đặng Đình Tứ

    Điều hành viên Quản trị diễn đàn

    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ệp đính kèm:

    • demo.jpg
      demo.jpg
      Dung lượng:
      58.23 KB
      Lượt xem:
      131
  • aptx4869

    aptx4869 Trần Phương

    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

     
  • dangdinhtu

    dangdinhtu Đặng Đình Tứ

    Điều hành viên Quản trị diễn đàn

    Bạn nói hơi khó hình dung bạn nên cho cái hình mẫu cái coi

     
  • aptx4869

    aptx4869 Trần Phương

    [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:

    • 1.jpg
      1.jpg
      Dung lượng:
      27.17 KB
      Lượt xem:
      103
    • 2.jpg
      2.jpg
      Dung lượng:
      14.63 KB
      Lượt xem:
      97
  • dangdinhtu

    dangdinhtu Đặng Đình Tứ

    Điều hành viên Quản trị diễn đàn

    Bạn muốn nó thay đổi ở các module khác nhau à

     
  • aptx4869

    aptx4869 Trần Phương

    uh đúng rồi đó bác em định mỗi module màu mè khác nhau. Mà thôi h bác chỉ em 2 câu hỏi trên em mò chắc cũng ra

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    [QUOTE="aptx4869, post: 94, member: 25"]

    [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ỉ

    [/QUOTE]

    Tên module là news nhé.. 

    #body-news .block-panel-default .block-panel-heading {    background: #041721;    color: #fff;}#body-news .block-panel-default .block-panel-heading {    background: ##FF0119;    color: #fff;}

     

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    [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:

  • aptx4869

    aptx4869 Trần Phương

    ok con dê complete. 4rum này ko có nút like hay gì gì nhỉ

     
  • aptx4869

    aptx4869 Trần Phương

    #body-news .block-panel-default .block-panel-heading {    background: #041721;    color: #fff;}#body-news .block-panel-default .block-panel-heading {    background: ##FF0119;    color: #fff;}

    cái dòng .block ở đây là gì là block à. NV nó tự nhận block trong css luôn hay sao bạn

     
  • dangdinhtu

    dangdinhtu Đặng Đình Tứ

    Điều hành viên Quản trị diễn đàn

    [QUOTE="aptx4869, post: 135, member: 25"]

    ok con dê complete. 4rum này ko có nút like hay gì gì nhỉ

    [/QUOTE]

    Nút Like sắp có bạn nhé

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    [QUOTE="aptx4869, post: 136, member: 25"]

    #body-news .block-panel-default .block-panel-heading {    background: #041721;    color: #fff;}#body-news .block-panel-default .block-panel-heading {    background: ##FF0119;    color: #fff;}

    cái dòng .block ở đây là gì là block à. NV nó tự nhận block trong css luôn hay sao bạn

    [/QUOTE]
    .block-panel-default

    là tên class của thẻ div trong templates bạn dùng nhé.

     
  • thanhchunghti

    thanhchunghti Lê Thành Chung

    Em cấu hình cái này sao block nó không nhận bác nhỉ?

     

    .panel-primary > .panel-heading { 
    height: 35px; 
    color: #FFF; 
    padding-left: 38px; 
    line-height: 35px; 
    background: url("../images/icon_label.png") no-repeat scroll 0 center; 
    border-bottom: 2px solid #be045b; 
    }

     

     

Chia sẻ trang nà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