XF 2.2 How to add space between category block and forum blocks in forum list?

[gogo]

Originally:



After changed:

 

[Mr Lucky]

I can't guarantee this is perfect and won't break anything so be backed up or test in anew style

In your style template node_list_category

cut this out:

<h2 class="block-header">
                <a href="{{ link('categories', $node) }}">{$node.title}</a>
                <xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>
            </h2>

And paste back above line 4 <div class="block-container">

(Currently the header is inside the container, you want it above the container)

Then add a bottom margin in extra.less

h2.block-header
{
margin-bottom:10px;
}

 

[gogo]

Thanks it works!

 

[gogo]

Actually the code in extra.less alone can do the job.

What's the purpose of modifying the template " node_list_category "? It actually works better without this modification.

 

[Mr Lucky]

Actually the code in extra.less alone can do the job.

What's the purpose of modifying the template " node_list_category "? It actually works better without this modification.

If it works without then no problem.

But on my forum that just increases the white space bnelow, not adding the gap showing page background.




Editing the template took the heading out of the container.

But again, as long is it works for you that's great!

 

[gogo]

If it works without then no problem.

But on my forum that just increases the white space bnelow, not adding the gap showing page background.

Editing the template took the heading out of the container.

But again, as long is it works for you that's great!

You're right. I didn't find the extra white space until now. The template modification does the trick. Thanks.

But the category block can't extend fully to the page width on mobile view now. There are gaps on both ends. The forum blocks are fine.

 

[Mr Lucky]

But the category block can't extend fully to the page width on mobile view now.

There may well be a better fix, but this seems to work:

@media (max-width: @xf-responsiveMedium)
{
h2.block-header
{
margin-left:-10px;
    margin-right:-10px;
}
}

The template modification does the trick.

Technically I think the terminolgy should be template edit

It's confusing but xenForo template modification refers to a different process (which does a search and replace in a master template)

 

[gogo]

Work nicely! Thanks for your great help!

 

[Mr Lucky]

These things are often tricky, I should remember to always test in responsive sizes.

I just thought of a much simpler way to almost get what you want. Only needs a small bit of css in extra.less

This keeps the block header within the container, and just adds a border bottom same colour as page background. It achieves the same except it still has the container L/R borders. I actually prefer this look.

h2.block-header
{
border-bottom: 20px solid @xf-pageBg;
}

 

[gogo]

For this code, there'll be a grey block between the category and forum block. I made it 5px and it really looks good though it's not really something I was looking for. And for this code, no change in template is need which is good.

 

[Mr Lucky]

Well you can make the colour whatever you want, eithyer match the page background to look like a gap or different colour as a bottom border. I like this also.

 

[maszd]

I can't guarantee this is perfect and won't break anything so be backed up or test in anew style

In your style template node_list_category

cut this out:

<h2 class="block-header">
                <a href="{{ link('categories', $node) }}">{$node.title}</a>
                <xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>
            </h2>

And paste back above line 4 <div class="block-container">

(Currently the header is inside the container, you want it above the container)

Then add a bottom margin in extra.less

h2.block-header
{
margin-bottom:10px;
}

Thanks @Mr Lucky it's work!

But on Latest post, Latest profile post and Notable members it's still not separate, is there any template that must be change?

Regards.

Edit. Nevermind, found it.