Hiển thị sub forum theo dạng cột cho xenforo

[PVS]

Từ Xenforo 1.2 trể lên Xenforo đã cho người dung tùy chọn hiển thị subforum ra trang chủ xenforo hay ẩn diễn đàn con mà không cần thay đổi cấu trúc web của bạn. hôm nay mình sẽ hướng dẫn các bạn cho các diễn đàn con hiện ra trang chủ forum.

Các bạn chỉ cần vào phẩm quản lý và theo đường dẫn sau: Apperance > Style Properties > Forum List
Và bỏ dấu tích khỏi ô Show sub-forums popup thì đã có thể hiện subforum.

Sau đây, mình sẽ hướng dẫn các bạn cấu trúc hiện thị forum theo dạng cột, thẩm mỹ hơn so với cấu hình mặc định.

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

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

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

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

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

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

.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

Nguồn: muaban47.net​

 

[SangNTP]

Ở code đầu tiên, tìm trong extra.css không thấy code đó bạn ơi...

 

[SangNTP]

...mình không sửa ở đây

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

...mà mình sửa ở đây

.subForumsMenu ol li { width: 20%; float: left; }

 

[PVS]

Ở code đầu tiên, tìm trong extra.css không thấy code đó bạn ơi...

đoạn đó dư mình del đi rồi ^^!

 

[5chaunet]

Sau khi làm xong các bước trên không có gì thay đổi bạn ạ