• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Sub-nodes in columns

CyberAP

Well-known member
#1
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...
 

high1976

Active member
#7
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
#8
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! :)
 
#10
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;
}
 
#12
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.
 

Matthew2D

Well-known member
#17
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
#18
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.