• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • 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

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

Untitled-1.png

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'}
 

Jaxel

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

Shelley

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

yavuz

Well-known member
#16
Sorry I'm a retard. "Add to the end of the CLASS on the FIRST LINE of the following templates" where is that exactly.
 
#18
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:


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



What do you think?
 

Jaxel

Well-known member
#19
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:


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



What do you think?
It already "bolds" the text to subforums with new posts. Its hard to see it on some fonts though.
 
#20
Sorry I'm a retard. "Add to the end of the CLASS on the FIRST LINE of the following templates" where is that exactly.
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?