Code css chia 2 forum thành 2 cột ,3 cột cho xenforo

Cũng như Vbb4 thì xenforo cũng có thể chia các cột ở ngoài forum thành 2 cột chỉ bằng vài đoạn code css thì các bạn có thể làm được điều đó .
Lợi ích từ việc bạn chia 2 cột cho forum xenforo nó giúp các box chia ra làm 2 dễ nhìn và giúp forum bạn ngắn hơn , không quá dài để các bạn khó khăn trong việc tìm kiếm .
Demo:
 

Code css chia 2 forum thành 2 cột cho xenforo 

Và sau đây là code css chia 2 cột của xenforo.

PHP:


/*Chia forum làm 2 cột*/.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: 49%;float: left;min-height: 70px;
}

.nodeList .node.level_1 {clear: both;
}

Nguồn: Sưu tầm.

hoặc.................................................................................................................................................

Mã:(Click here to copy code to clipboard)

#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>

Để hiển thị forum con trong các chuyên mục thành các cột các bạn làm như sau: 

Tìm đoạn code sau trong template: node_forum_level_2

PHP:(Click here to copy code to clipboard)

<xen:if is="{$renderedChildren} AND {$level} == 2">
    <div class="Popup subForumsPopup">
        <a href="{xen:link forums, $forum}" rel="Menu" class="cloaked" data-closemenu="true"><span class="dt">{xen:phrase sub_forums}:</span> {xen:number $forum.childCount}</a>

        <div class="Menu JsOnly subForumsMenu">
            <div class="primaryContent menuHeader">
                <h3>{$forum.title}</h3>
                <div class="muted">{xen:phrase sub_forums}</div>
            </div>
            <ol class="secondaryContent blockLinksList">
            <xen:foreach loop="$renderedChildren" value="$child">
                {xen:raw $child}
            </xen:foreach>
            </ol>
        </div>
    </div>
</xen:if>

Thay bằng đoạn code sau:

PHP:(Click here to copy code to clipboard)

<xen:if is="{$renderedChildren} AND {$level} == 2">
    <div class="subForumsPopup">
        <div class="subForumsMenu">
            <ol class="secondaryContent blockLinksList">
            <xen:foreach loop="$renderedChildren" value="$child">
                {xen:raw $child}
            </xen:foreach>
            </ol>
        </div>
    </div>
</xen:if>

Tìm đoạn code sau trong template: node_category_level_2

PHP:(Click here to copy code to clipboard)

<xen:if is="{$renderedChildren} AND {$level} == 2">
    <div class="Popup subForumsPopup">
        <a href="{xen:link categories, $category}" rel="Menu" class="concealed" data-closemenu="true"><span class="dt">{xen:phrase sub_forums}:</span> {xen:number $category.childCount}</a>

        <div class="Menu JsOnly subForumsMenu">
            <div class="primaryContent menuHeader">
                <h3>{$category.title}</h3>
                <div class="muted">{xen:phrase sub_forums}</div>
            </div>
            <ol class="secondaryContent blockLinksList">
                <xen:foreach loop="$renderedChildren" value="$child">
                    {xen:raw $child}
                </xen:foreach>
            </ol>
        </div>
    </div>
</xen:if>

Thay bằng đoạn code sau:

PHP:(Click here to copy code to clipboard)

<xen:if is="{$renderedChildren} AND {$level} == 2">
    <div class="subForumsPopup">

        <div class="subForumsMenu">
            <ol class="secondaryContent blockLinksList">
            <xen:foreach loop="$renderedChildren" value="$child">
                {xen:raw $child}
            </xen:foreach>
            </ol>
        </div>
    </div>
</xen:if>

Mở template: node_forum_level_n. Thay thế tất cả nội dung trong template này bằng:

PHP:(Click here to copy code to clipboard)

<li class="node forum level-n node_{$forum.node_id}">
    <span class="dot"><span></span></span>
    <div {xen:if $forum.hasNew, 'class="unread"'}>
        <h4 class="nodeTitle"><a href="{xen:link forums, $forum}" class="menuRow">{$forum.title}</a></h4>
    </div>
    <xen:if is="{$renderedChildren}">
        <ol>
            <xen:foreach loop="$renderedChildren" value="$child">
                {xen:raw $child}
            </xen:foreach>
        </ol>
    </xen:if>
</li>

Mở template: node_category_level_n. Thay thế tất cả nội dung template trên bằng:

PHP:(Click here to copy code to clipboard)

<li class="node category level-n node_{$category.node_id}">
    <span class="dot"><span></span></span>
    <div {xen:if $category.hasNew, 'class="unread"'}>
        <h4 class="nodeTitle"><a href="{xen:link categories, $category}" class="menuRow">{$category.title}</a></h4>
    </div>
    <xen:if is="{$renderedChildren}">
        <ol>
            <xen:foreach loop="$renderedChildren" value="$child">
                {xen:raw $child}
            </xen:foreach>
        </ol>
    </xen:if>
</li>

Mở template EXTRA.css. Thêm vào đoạn code sau:

Mã:(Click here to copy code to clipboard)

.subForumsPopup,
.subForumsPopup .blockLinksList,
.subForumsPopup ol,
.subForumsMenu ol li ol li
{
    width: 100%;
}
 
.subForumsPopup .blockLinksList
{
    float: left;
}
 
.subForumsPopup .dot
{
    position: relative;
    float: left; /* firefox fix */
}
.subForumsPopup .dot span
{
    height: 0px;
    left: 6px;
    top: 10px !important;
    position: absolute;
    width: 0px;
    border: 2px solid @primaryLight;
    border-radius: 6px;
}
 
.subForumsMenu ol li
{
    width: 25%;
    float: left;
}
 
.subForumsMenu .node .nodeTitle a
{
    padding-left: 16px;
}
 
.subForumsMenu .node .node.level-n
{
    display: none;
}

Nếu muốn hiển thị Subforum thành nhiều hơn hoặc ít cột hơn. Các bạn sửa giá trị: 20% trong code:

Mã:(Click here to copy code to clipboard)

.subForumsGrid .node { width: 20%; float: left; }

Thành giá trị tương ứng sau:
20% = 5 cột
25% = 4 cột
33% = 3 cột
50% = 2 cột

Các file đính kèm:

• 

  screenshot.PNG

  Kích thước:

  8.9 KB

  Đọc:

  321