Hướng dẫn chia cột cho sub forum từ phiên bản 1.2 trở lên

Trước kia để chia cột cho các sub forum chúng ta cần phải sửa template rất nhiều, tuy nhiên xenForo hiện tại đã cho phép tùy chọn trong giao diện mà không cần sửa code nữa. Như các bạn thấy ở hình ảnh bên trên, các sub forum đã được chia cột rất ngay ngắn chỉ bằng cách click vào tùy chọn tại:
http://trangcuaban.com/admin.php?styles/test.2/style-properties&group=nodeList

Và bỏ dấu tích khỏi ô Show sub-forums popup


Như vậy là đã xong rồi đấy

 

Còn mình muốn subforum 1 hàng dọc thì làm sao Kid

 

bạn tìm

Mã:

.node .subForumList li

thay width: 31% thành 100%

 

mình muốn làm giao diện 3 cột giống như bên nhattao.com nó tự động căn chỉnh và sắp thành 2 cột hoặc 1cột rất hay nó điều Respon khi mình vào bằng ĐT và Máy tính bảng, thì phải sữa code như thế nào đây mấy bạn @Kid @dinhchi

Mình thêm code này vào thì nó chia đc 3 cột nhưng nó không tự động Respon các cột đc ( đã bật tính năng Respon rồi)...mình k biết nhiều về code mong đc giúp đỡ.

code mình để vào EXtra như sau:

Mã:

/*Categories in two columns*/
.node .nodeText {
margin-right: 0 !important;
}
.node .nodeLastPost,
.node .tinyIcon {
display: none !important;
}
.node .forum.level_2,
.node .page.level_2,
.node .category_forum.level_2 {
width: 33%;
float: left;
min-height: 70px;
}
.nodeList .node.level_1 {
clear: both;
}

 

up lên ai biết chỉ e với!

 

Đây bạn nhé, thử code này. Reponsive không ngon lành lắm nhưng nói chung là đc, muốn ngon hơn thì chờ @dinhchi vào giúp

Cách dùng: copy toàn bộ code bên dưới rồi dán vào template Extra.css

Mã:

#loginBarHandle {
    display: none;
}
.node .nodeLastPost, .nodeControls  {
    display: none;
}
.node .nodeText {
    margin-right: 20px!important;
}

.nodeList {
    overflow: auto;
}
.nodeList .categoryStrip {
    background-image: none!important;
}
.level_2 {
    width: 33%;
    float: left;
}
<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth) {
      .level_2 {
        width: 50%;
        float: left;
    }
    }

    @media (max-width:@maxResponsiveMediumWidth) {
      .level_2 {
        width: 100%;
        float: left;
    }
    }

 
</xen:if>

 

Ok...ngồi nghiên cứu tí cũng tìm ra đc chỗ còn thiếu thiếu!!hihi... thêm dòng này vào code của bạn nữa là chuẩn rồi.. Thanks bạn @Kid rất nhiều!

Mã:

@media (max-width:@maxResponsiveNarrowWidth) {
      .level_2 {
        width: 100%;
        float: left;
    }

Mã:

#loginBarHandle {
    display: none;
}
.node .nodeLastPost, .nodeControls  {
    display: none;
}
.node .nodeText {
    margin-right: 10px!important;
}

.nodeList {
    overflow: auto;
}
.nodeList .categoryStrip {
    background-image: none!important;
}
.level_2 {
    width: 33%;
    float: left;
}
<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth) {
      .level_2 {
        width: 50%;
        float: left;
    }
    }

    @media (max-width:@maxResponsiveMediumWidth) {
      .level_2 {
        width: 50%;
        float: left;
    }
    }
@media (max-width:@maxResponsiveNarrowWidth) {
      .level_2 {
        width: 100%;
        float: left;
    }
    }
</xen:if>

 

đã làm đc....

 

thêm cái này vào đâu?
mỹ phẩm ikute chuyên cung cấp son mac, son velvelt, son ysl, giá tốt nhất

 

@minhcl bạn đọc comment ngay bên trên là thấy.

 

@minhcl copy nguyên code này là đc rồi!

Mã:

#loginBarHandle {
    display: none;
}
.node .nodeLastPost, .nodeControls  {
    display: none;
}
.node .nodeText {
    margin-right: 10px!important;
}

.nodeList {
    overflow: auto;
}
.nodeList .categoryStrip {
    background-image: none!important;
}
.level_2 {
    width: 33%;
    float: left;
}
<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth) {
      .level_2 {
        width: 50%;
        float: left;
    }
    }

    @media (max-width:@maxResponsiveMediumWidth) {
      .level_2 {
        width: 50%;
        float: left;
    }
    }
@media (max-width:@maxResponsiveNarrowWidth) {
      .level_2 {
        width: 100%;
        float: left;
    }
    }
</xen:if>

 

up đang hóng cái này

 

@ThienHac
Add vào EXTRA.css Templates mà bạn đang sử dụng
Chèn đoạn code dưới vào EXTRA.css

 

up

 

đã làm được nhưng mình muốn mỗi chia 3 category theo từng cột như site muabantop.net thì làm thế nào nhỉ
site của mình http://sangiagoc.net/

 

Chia như thế này nhìn chuyên nghiệp và đẹp hơn hàng dọc mà bạn. đặc biệt với chỗ nhiều sub nhìn hàng dọc dài phản cảm

 

Done!

 

sao em chia cột xong chỉ khi dùng quyền admin mới thấy,,cả thay icon diễn đàn nữa..còn người khác không thấy,,hix,, http://vxf.vn/threads/chia-cot-xong-chi-dang-nhap-quyen-admin-moi-thay-thay-doi.21232/#post-149575

 

Còn chia thành 2 cột thì phải làm sao bạn?

 

Chia giống mình đây hả bạn
http://sccn.vn/