1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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.
    Dismiss Notice
  3. 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...

Discussion in 'Template Modifications [Archive]' started by Jaxel, Jan 22, 2011.

  1. Jaxel

    Jaxel Well-Known Member

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


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

    Add to EXTRA.css
    .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
    <xen:if is="{$level} == 2 AND {$renderedChildren}">
    <li class="subForumsGrid">
    <ol class="secondaryContent blockLinksList blockLinksGrid">
    <xen:foreach loop="$renderedChildren" value="$child">
    {xen:raw $child}
    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
    {xen:if $renderedChildren, ' fullWidth'}
  2. Jaxel

    Jaxel Well-Known Member

    I have just updated the EXTRA.css code... now it looks better.
    mahdportal.com likes this.
  3. Allan

    Allan Well-Known Member

    Great job, congrat !
  4. Jaxel

    Jaxel Well-Known Member

    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.
  5. Gustavo Fernandez

    Gustavo Fernandez Active Member

    How do I adjust the margins?

    vuhoan likes this.
  6. Jaxel

    Jaxel Well-Known Member

    Change the width
    .subForumsGrid .blockLinksGrid { width: 100%; display: inline-block; }
  7. Itworx4me

    Itworx4me Well-Known Member

    Nicely done Jaxel
  8. Jaxel

    Jaxel Well-Known Member

    Okay... I just updated the EXTRA.css... new codes which fix that margin.
    Gustavo Fernandez likes this.
  9. Shelley

    Shelley Well-Known Member

    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.
    ToDie4, erich37 and Gustavo Fernandez like this.
  10. shenmuee

    shenmuee Active Member

    wow looks so sweet >.< loved it Jaxel, thanks =)

    well could you make a xml addon about this (sub-forums)? ^O^
  11. Jaxel

    Jaxel Well-Known Member

    Not until there are template hooks for it.
    shenmuee likes this.
  12. ArnyVee

    ArnyVee Well-Known Member

    Some of my other sites will need this once I get those moved over to xenForo. Thanks Jaxel! :D
  13. matthewalan

    matthewalan Active Member

    This is exactly what I was looking for. Thank you so much!
  14. steven s

    steven s Well-Known Member

    With one level of subforums this works. Subforums within subforms gets a bit weird with the formatting.
  15. fattony69

    fattony69 Well-Known Member

    CaptainMorgan likes this.
  16. yavuz

    yavuz Well-Known Member

    Sorry I'm a retard. "Add to the end of the CLASS on the FIRST LINE of the following templates" where is that exactly.
  17. lms

    lms Well-Known Member

    Nicely done Jaxel


  18. DavidH

    DavidH Member

    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: [​IMG]

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

    What do you think?
  19. Jaxel

    Jaxel Well-Known Member

    It already "bolds" the text to subforums with new posts. Its hard to see it on some fonts though.
  20. matthewalan

    matthewalan Active Member

    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:
    <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):
    {xen:if $renderedChildren'fullWidth'}
    to make it looks like this:
    <li class="node category level-n node_{$category.node_id}{xen:if $renderedChildren, 'fullWidth'}">
    Does that help a little bit?

Share This Page