• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Tutorial: Sub Forum Grid Listing...

Jaxel

Jaxel

Well-known member
These edits will add a GRID LISTING of sub forums in your forum list and forum views.

Untitled-1.webp

Its pretty simple... but unfortunately, it requires template edits.

Add to EXTRA.css
HTML: 
.subForumsGrid { padding-right: 4px; }
.subForumsGrid .blockLinksGrid { width: 100%; display: inline-block; padding: 5px; }
.subForumsGrid .fullWidth { width: 100% !important; padding-bottom: 4px; }
.subForumsGrid .node { width: 20%; float: left; }
.subForumsGrid .node ol { padding-left: 10px; }
.subForumsGrid .node  a { padding: 5px 10px 5px 18px; }
.subForumsGrid .node .node a { padding: 0px 10px 1px 18px; }
.subForumsGrid .node .nodeTitle { font-size: 11px; white-space: nowrap; overflow: hidden; }
.subForumsGrid .node div,
.subForumsGrid .node div a:hover
{
background-image: url('@imagePath/xenforo/widgets/read.png');
background-repeat: no-repeat;
background-position: 0px 50%;
}
.subForumsGrid .node div.unread,
.subForumsGrid .node div.unread a:hover
{
background-image: url('@imagePath/xenforo/widgets/unread.png');
background-repeat: no-repeat;
background-position: 0px 50%;
}

Add to the END of the following templates:
  1. node_category_level_2
  2. node_forum_level_2
  3. node_link_level_2
  4. node_page_level_2
Code: 
<xen:if is="{$level} == 2 AND {$renderedChildren}">
<li class="subForumsGrid">
<ol class="secondaryContent blockLinksList blockLinksGrid">
<xen:foreach loop="$renderedChildren" value="$child">
{xen:raw $child}
</xen:foreach>
</ol>
</li>
</xen:if>

Add to the end of the CLASS on the FIRST LINE of the following templates:
  1. node_category_level_n
  2. node_forum_level_n
  3. node_link_level_n
  4. node_page_level_n
Code: 
{xen:if $renderedChildren, ' fullWidth'}
 
I made some changes to both the EXTRA.css and the _level_2 templates...

I didn't realize this, but the way I was doing it before, also edited the drop down list of your control panel. The new code will no longer mess with anything except the sub forum grid.
 
I'm not using the sub forum grid listing but I thought I'd throw a suggestion (I'm sure you thought of it) and had a good reason not to include it but is there an option to collapse the grid? Pending it spans to more than one line. If not, that might be a nice feature to add.

I'm still personally looking for a better sub forum solution but this is definitely a good start. Nice job.
 
wow looks so sweet >.< loved it Jaxel, thanks =)

well could you make a xml addon about this (sub-forums)? ^O^
 
With one level of subforums this works. Subforums within subforms gets a bit weird with the formatting.
 
Sorry I'm a retard. "Add to the end of the CLASS on the FIRST LINE of the following templates" where is that exactly.
 
This looks good, I would say it is missing something simple - and that is an easy way to see if there is an unread post in those subforums. This could be achieved by putting an image afterwards, say:
IwXLb.png


or simply using these before the subforum name (so it looks similar to the original forum display):
t46OP.png

tJj2t.png


What do you think?
 
DavidH said:
This looks good, I would say it is missing something simple - and that is an easy way to see if there is an unread post in those subforums. This could be achieved by putting an image afterwards, say:
IwXLb.png


or simply using these before the subforum name (so it looks similar to the original forum display):
t46OP.png

tJj2t.png


What do you think?
Click to expand...
It already "bolds" the text to subforums with new posts. Its hard to see it on some fonts though.
 
laztrix said:
Sorry I'm a retard. "Add to the end of the CLASS on the FIRST LINE of the following templates" where is that exactly.
Click to expand...

I can answer that. The first time I did it I just happened to over look that line. It's pretty simple, on the first line of these templates:
  1. node_category_level_n
  2. node_forum_level_n
  3. node_link_level_n
  4. node_page_level_n
You'll see a line looks similar(not the exact same, but it's always the first lie) to this:
HTML: 
<li class="node category level-n node_{$category.node_id}">
What is is saying is that you have to add this(right before the last quotation):
PHP: 
{xen:if $renderedChildren, 'fullWidth'}

to make it looks like this:
HTML: 
<li class="node category level-n node_{$category.node_id}{xen:if $renderedChildren, 'fullWidth'}">

Does that help a little bit?
 
You must log in or register to reply here.
Back
Top Bottom