Hướng dẫn tạo subforum nằm ngang

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
17,150
Được Like
12,745
Demo:

1.png

Để phân cột như vậy bạn mở template EXTRA.css và thêm vào đoạn này:
Mã:
.nodeLastPost {
display:none!important;
}
.nodeControls {
display:none!important;
}

.node .nodeText {
    margin-right: 10px!important;
}

.nodeList {
    overflow: hidden;
}
.level_2 {
    width: 33%;
    float: left;
    height:100px;
}
<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>

Cũng tương tự nhưng đẹp hơn chút nè

2.png

Mã:
#loginBarHandle {
    display:;
}
.node .nodeLastPost, .nodeControls  {
    display: none;
}
.node .nodeText {
    margin-right: 3px!important;
    margin-top: 12px!important;
    margin-bottom: 5px!important;
    border: 1px solid #d7edfc;
    padding: 15px;
}


.subForumsPopup a.PopupControl {
padding-left: 0px;
padding-right: 5px;
display: inherit;
}

.subForumsPopup .dt
{
    display:none;
}

.Popup .arrowWidget
{
    /* circle-arrow-down */
    background: transparent url('data/img/down.png') no-repeat 0px ;
margin-top: -2px;
margin-left: 2px;
display: inline-block;
*margin-top: 0;
vertical-align: middle;
width: 55px;
height: 13px;

}



.nodeList {
    overflow: auto;
}
.nodeList .categoryStrip {
    background-image: none!important;
}

.level_2 {
    width:33%;
    float: left;
 
}


<xen:if is="@enableResponsive">
    @media (max-width:1280px) {
      .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>

Chúc các bạn thành công.


Nguồn: azviet.asia​
 

Top Bottom