Resource icon

Sub-nodes in columns

CyberAP

Well-known member
CyberAP submitted a new resource:

Sub-nodes in columns (version 1.0) - It'll make your sub-nodes display in columns instead of default popup with simple listing

Find templates called 'node_category_level_2' and 'node_forum_level_2'. Within them faind this piece: '<xen:if is="{$renderedChildren} AND {$level} == 2">'

Replace all of its contents including '</xen:if>' with this:
HTML:
<xen:if is="{$renderedChildren} AND {$level} == 2">
        <div class="subForumsPopup">
                <div class="subForumsMenu">
                        <ol class="secondaryContent blockLinksList">
                        <xen:foreach loop="$renderedChildren"...

Read more about this resource...
 

yavuz

Well-known member
This is great CyberAP, but you know what would be more great? Making it avaliable for TMS :D
 

high1976

Active member
thx CyberAP, very helpfull

just if someone wants to play with a more vb-look-a-like version:
MediaPortal Forum - Google Chrome_2012-04-16_23-50-02.png

Code:
body .subForumsPopup
{
margin: 0;
float: none;
}
 
body .subForumsPopup .blockLinksList2
{
display: inline-table;
width: 100%;
box-sizing: border-box;
word-spacing: -10px;
}
 
body .subForumsPopup .blockLinksList2 > li
{
display: inline-block;
word-spacing: 0;
vertical-align: top;
}
 
body .subForumsPopup .blockLinksList2 .nodeTitle
{
font-weight: normal;
}
 
body .subForumsPopup .blockLinksList2 .unread .nodeTitle
{
font-weight: bold;
}
 
body .subForumsPopup .blockLinksList2 .nodeTitle a:before
{
content: "";
}
 
body .subForumsPopup .blockLinksList2 li.node > .unread .nodeTitle a:before
{
background: @primaryMedium;
}
 
.subForumsMenu .node .node
{
display: none;
}
 
.inlineimg
{
margin-left: 10px;
}
 
.blockLinksList2 a, .blockLinksList2 label {
padding: 5px 5px !important;
border-radius: 0px !important;
display: inline !important;
}
 
.blockLinksList2 a:hover, .blockLinksList2 a:focus, .blockLinksList2 li.kbSelect a, .blockLinksList2 label:hover, .blockLinksList2 label:focus, .blockLinksList2 li.kbSelect label
{
text-decoration: underline !important;
background: none !important;
}

Code:
            <div class="nodeStats pairsInline">
<xen:if is="{$renderedChildren} AND {$level} == 2">
        <div class="subForumsPopup">
                <div class="subForumsMenu">
                        <ol class="blockLinksList2">
                        <xen:foreach loop="$renderedChildren" value="$child">
                              <img class="inlineimg" src="/curves/statusicon/subforum_old.png" alt="" border="0"> {xen:raw $child}
                        </xen:foreach>
                        </ol>
                </div>
        </div>
</xen:if>
                <dl>
                    <dt>{xen:phrase discussions}:</dt> <dd>{xen:number $category.discussion_count}</dd>
                    <dt>{xen:phrase messages}:</dt> <dd>{xen:number $category.message_count}</dd>
                </dl>
            </div>
        </div>

just shows level 2 and img-tag has to be removed or adjusted ofc. It's just a very fast test so don't take it too serious. ;)

Edit: Code updated so it's not interfering with Navbar aso
 

Matthew2D

Well-known member
thx CyberAP, very helpfull

just if someone wants to play with a more vb-look-a-like version:
View attachment 28425

Code:
body .subForumsPopup
{
    margin: 0;
    float: none;
}
 
body .subForumsPopup .blockLinksList
{
    display: inline-table;
    width: 100%;
    box-sizing: border-box;
    word-spacing: -10px;
}
 
body .subForumsPopup .blockLinksList > li
{
    display: inline-block;
    word-spacing: 0;
    vertical-align: top;
}
 
body .subForumsPopup .blockLinksList .nodeTitle
{
font-weight: normal;
}
 
body .subForumsPopup .blockLinksList .unread .nodeTitle
{
  font-weight: bold;
}
 
body .subForumsPopup .blockLinksList .nodeTitle a:before
{
    content: "";
}
 
body .subForumsPopup .blockLinksList li.node > .unread .nodeTitle a:before
{
    background: @primaryMedium;
}
 
.subForumsMenu .node .node
{
    display: none;
}
 
.blockLinksList a, .blockLinksList label {
    padding: 5px 5px  !important;
    border-radius: 0px  !important;
    display: inline  !important;
}
 
.blockLinksList a:hover, .blockLinksList a:focus, .blockLinksList li.kbSelect a, .blockLinksList label:hover, .blockLinksList label:focus, .blockLinksList li.kbSelect label
{
  text-decoration: underline !important;
  background: none !important;
}

Code:
            <div class="nodeStats pairsInline">
<xen:if is="{$renderedChildren} AND {$level} == 2">
        <div class="subForumsPopup">
                <div class="subForumsMenu">
                        <ol class="blockLinksList">
                        <xen:foreach loop="$renderedChildren" value="$child">
                              <img class="inlineimg" src="/curves/statusicon/subforum_old.png" alt="" border="0"> {xen:raw $child}
                        </xen:foreach>
                        </ol>
                </div>
        </div>
</xen:if>
                <dl>
                    <dt>{xen:phrase discussions}:</dt> <dd>{xen:number $category.discussion_count}</dd>
                    <dt>{xen:phrase messages}:</dt> <dd>{xen:number $category.message_count}</dd>
                </dl>
            </div>
        </div>

just shows level 2 and img-tag has to be removed or adjusted ofc. It's just a very fast test so don't take it too serious. ;)

Exactly what I've been looking for! Thank you! :)
 

high1976

Active member
Do you think you make the subforums like like IPB's?

MediaPortal Forum - Google Chrome_2012-04-17_11-04-35.png

Code:
 <ol class="blockLinksList2 subforums9">
<xen:foreach loop="$renderedChildren" value="$child">
{xen:raw $child},
</xen:foreach>
</ol>

Code:
.blockLinksList2 a, .blockLinksList2 label {
padding: 1px 1px !important;
border-radius: 0px !important;
display: inline !important;
margin-left: 10px;
}
 
div.subForumsMenu .subforums9 {
margin: 2px 0 3px 5px;
padding-left: 10px;
background: url(http://content.community.invisionpower.com/public/style_images/master/subforum_stem.png) no-repeat left 4px;
}
 

high1976

Active member
I've updated the first codeedits yesterday, be sure to use the updated ones as starting point (see also conversation) and then just exchange the related parts with the ipb-Codesnippets from above.
 

karoshio

Active member
I am getting a Syntax error whenever I try to save the template edits. Any ideas? Everything looks fine to me.
 

Matthew2D

Well-known member
Replace

Code:
<div class="nodeStats pairsInline">
                <dl>
                    <dt>{xen:phrase discussions}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.discussion_count}}</dd>
                    <dt>{xen:phrase messages}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.message_count}}</dd>
                </dl>
                <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>
            </div>
        </div>

With:
Code:
<div class="nodeStats pairsInline">
<xen:if is="{$renderedChildren} AND {$level} == 2">
        <div class="subForumsPopup">
                <div class="subForumsMenu">
                        <ol class="blockLinksList2">
                        <xen:foreach loop="$renderedChildren" value="$child">
                              <img class="inlineimg" src="/curves/statusicon/subforum_old.png" alt="" border="0"> {xen:raw $child}
                        </xen:foreach>
                        </ol>
                </div>
        </div>
</xen:if>
                <dl>
                    <dt>{xen:phrase discussions}:</dt> <dd>{xen:number $category.discussion_count}</dd>
                    <dt>{xen:phrase messages}:</dt> <dd>{xen:number $category.message_count}</dd>
                </dl>
            </div>
        </div>
 

karoshio

Active member
Having is listed like this would be great if someone wants to make the changes. :p


Sub Forums: First, Second, Third, Fourth, Fifth


Similar to the above except "Sub Forums:" in front as well as no ',' after the last one.


I think I'm having a dumb moment because adding "Sub Forums:" is getting all squished.


EDIT: Free month advertising on my Webmaster forum if it's wanted by someone who wants to do the above.


EDIT2: This broke my discussion and message counters.
 

Shelley

Well-known member
I think this is the subforum display structure I'll go for with what seems fewer template edits. Nice work CyberAP. (y)
 
Top