Tutorial: Sub Forum Grid Listing...

[Jaxel]

Thats actually wrong... it should not be:

<li class="node category level-n node_{$category.node_id}{xen:if $renderedChildren, 'fullWidth'}">

It should be:

<li class="node category level-n node_{$category.node_id} {xen:if $renderedChildren, 'fullWidth'}">

I specifically said in my opening post:

(Remeber to be aware of the SPACE between this element and previous element of the class)

 

[yavuz]

Now it's clear guys, thanks.

 

[yavuz]

This is how it looks:

Did I miss anything ?

 

[Jaxel]

Some of your forum titles are long... you may want to change:

.subForumsGrid .node { width: 20%; float: left; }

to:

.subForumsGrid .node { width: 25%; float: left; }

or

.subForumsGrid .node { width: 33%; float: left; }

 

[matthewalan]

Opps, I forgot to add the space when I inserted it! My bad! lol

 

[yavuz]

It looks much better now. Can't say the same for 3th level subforums. Looks like this:

 

[Rich]

How do i remove the drop down arrows?

 

[gmaister22]

Before:

After:

how u fix that green grid width ?

 

[matthewalan]

All I did from my own custom style was remove this from the EXTRA.css

.node .nodeLastPost { margin-right: 0px !important; }
.node .nodeControls { right: 232px !important; }

 

[Jaxel]

All I did from my own custom style was remove this from the EXTRA.css

.node .nodeLastPost { margin-right: 0px !important; }
.node .nodeControls { right: 232px !important; }

Yes, those two lines make it look nicer with the DEFAULT theme... if you dont use the default theme, delete them.

 

[gmaister22]

ah alright

 

[Andy.N]

How can we define how many subforum per row? And how many columns?

 

[Lu Kas]

How can we define how many subforum per row? And how many columns?

i think you can use

.subForumsGrid .node { width: 33%; float: left; }

and change the width, the 100% will be 1 forum / row, 50% two

i cant test it right now but it should work.

 

[Andy.N]

Lu Kas,
That works. Thanks a lot.

 

[DavidH]

Looks good! I almost completely forgot about the post I had made It might look better if the image was on the right though, as it doesn't affect the text layout

I've changed your snippet to:

        <xen:if is="{$forum.hasNew}">
            <h4 class="nodeTitle"><a href="{xen:link forums, $forum}" class="menuRow">{$forum.title} <img style="vertical-align:text-bottom;" src="@imagePath/xenforo/widgets/discussion-new.png" alt="new" /></a></h4>
        <xen:else />
            <h4 class="nodeTitle"><a href="{xen:link forums, $forum}" class="menuRow">{$forum.title}</a></h4>
        </xen:if>

Looks great!

 

[DavidH]

That looks nice! Try using vertical-align:text-bottom; in the css style of the images, I found the images nudged the text down slightly, or at least didn't line up with the text (looks the same in your picture) and this resolved that for me.

 

[Bob]

Been wanting to mess with this and finally had time this AM.. did mine a little different. Only wanted the Sub Forum Grids on 2 forums and the rest remaining default xenforo. Also wanted 64 (32 new, 32 old) images for each of the 32 sub forums. Still have some tweaking that I want to do, but its coming along nicely Each Team uses 2 images (node_id-new.png and node_id-old.png).

 

[Jaxel]

You can do waht you guys are trying to do without template edits... here is my current css...
http://www.8wayrun.com/forum/

/* SUB FORUM GRID LISTING SETTINGS */
    .subForumsGrid { padding-right: 4px; }
    .subForumsGrid .blockLinksGrid { width: 100%; display: inline-block; }
    .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 { background: url('@imagePath/xenforo/widgets/read.png') no-repeat 0px 50%; }
    .subForumsGrid .node div.unread { background: url('@imagePath/xenforo/widgets/unread.png') no-repeat 0px 50%; }

 

[Jaxel]

Thanks Jaxel...only one issue with that is that the image disappears on hover

All you would need to do is add a :hover pseudo-selector and it would handle that.

    .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%;
    }

 

[DieselMinded]

wow after reading this thread , would like an option in xenforo to display 3 levels on forum home : Catergory,Forum,Subforum