Thứ Bảy, 24 tháng 11, 2012

SubCategories in Columns - Hiển thị forum con ra ngoài trang chính


Để 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

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

<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

<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

Chủ đề: