Resource icon

Sub-nodes in columns

Overview Reviews (9) Discussion
CyberAP

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"...
Click to expand...

Read more about this resource...
 
This is great CyberAP, but you know what would be more great? Making it avaliable for TMS :D
 
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.webp

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
 
high1976 said:
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. ;)
Click to expand...

Exactly what I've been looking for! Thank you! :)
 
Matthew2D said:
Do you think you make the subforums like like IPB's?
Click to expand...

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

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;
}
 
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.
 
I am getting a Syntax error whenever I try to save the template edits. Any ideas? Everything looks fine to me.
 
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>
 
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.
 
I think this is the subforum display structure I'll go for with what seems fewer template edits. Nice work CyberAP. (y)
 
You must log in or register to reply here.

Similar threads

H
  • Question Question
XF 1.5 Categories in sub nodes
Replies
3
Views
704
Hansrutger
H
K
  • Question Question
XF 1.4 "xen:raw $child" causing line jump
Replies
8
Views
1K
Paul B
Paul B
Live Free
  • Question Question
XF 1.2 hiding 3rd level children forums with conditionals
Replies
0
Views
914
Live Free
Live Free
L
Difficulties with parent node variable
Replies
0
Views
1K
Luxus
L
V
  • Question Question
Sub Node Styling Help...
Replies
13
Views
3K
CMGDevel
C
Top Bottom