Thứ Ba, 27 tháng 10, 2015

NukeViet: Thêm block/ Chia nhỏ giao diện thành nhiều block


Ví dụ như mục <Tin mới> và <Tin nổi bật> được tạo ra như hình dưới:


Cách làm:
1. Mở file themes/default/config.ini, thêm các block mới vào:
<position>
<name>block moi1</name>
<tag>[BLOCK_MOI1]</tag>
</position>
        
        <position>
                        <name>block moi2</name>
<tag>[BLOCK_MOI2]</tag>
</position>
2. Giả sử thay đổi ở giao diện layout left-body-right thì mở file layout.left-body-right.tpl trong themes/default/layout, thêm các block vào vị trí nào mình muốn. Như hình trên thì thêm vào dưới TOP:
        [TOP]        
      <div class="BLOCK_MOI1" >
         [BLOCK_MOI1]
      </div>
      <div class="BLOCK_MOI2" >
         [BLOCK_MOI2]
      </div>        
        {MODULE_CONTENT}
        [BOTTOM]
3. Vào template.css  trong themes/default/css để thêm:
 a.  Thêm sau  .span-23,.span-24, .span-25 chuỗi: ,.BLOCK_MOI1, .BLOCK_MOI2
 Kết quả thành: .span-23,.span-24, .span-25,.BLOCK_MOI1, .BLOCK_MOI2
b. Thiết đặt style cho nó:
.BLOCK_MOI1{
      width: 245px; //bề rộng
      overflow-y: scroll; //cho phép cuộn dọc trục y
      height: 400px; //chiều cao 
}
.BLOCK_MOI2{
      width: 245px;
      overflow-y: scroll;
      height: 400px;
}

Lưu lại, vào  Admin -> Dọn dẹp hệ thống -> Xóa cache 
F5 để xem kết quả.
****** hết *****




Không có nhận xét nào:

Đăng nhận xét