XF 2.1 How do I add a gap between threads?

Betclever

Well-known member
Hello,

How do I add a gap between threads?

1600350378466.png

In fact, I don't use nodes but latest messages instead.
The goal is adding a gap between threads.

I spent a few hours for trying to find the class but without success. :/

Thx for your help.
 
Solution
OK, I see the background is the container, the .structItem appears to be transparent, so give the container the page background and the item its own (e.g. white) background.

But then it makes mostr sense to lose the border of the block container. (or you could just remove left and right if you like.

This might be the best I can do with my limited skills

Code:
.block-container
{border:0}

.structItemContainer

{background:@xf-pageBg;
border:0px}

.structItem

{background:#fff;
margin-bottom:10px;
border-radius:10px}

You can now add a border radius to .structItem

Mr Lucky

Well-known member
I'm not sure exactly what you mean but try adding this to your style's extra.less template:

Code:
.structItem
{margin-bottom:10px}

If you want an actual gap, as in the page background is visible between posts then the easiest workaround is to add a border the same color


Code:
.structItem
{border-bottom:10px solid @xf-pageBg}

(or whatever background you have)
 

Mr Lucky

Well-known member
OK, I see the background is the container, the .structItem appears to be transparent, so give the container the page background and the item its own (e.g. white) background.

But then it makes mostr sense to lose the border of the block container. (or you could just remove left and right if you like.

This might be the best I can do with my limited skills

Code:
.block-container
{border:0}

.structItemContainer

{background:@xf-pageBg;
border:0px}

.structItem

{background:#fff;
margin-bottom:10px;
border-radius:10px}

You can now add a border radius to .structItem
 
Last edited:
Solution

Betclever

Well-known member
Once again, thank you very much for the time you spent on this thread but may I ask you additional CSS commands?

I would like to add a kind of transition (animation) from left to right when hovering individual blocks.
The goal is having a kind of line like a border-bottom but as an animation...
 
Top