XF 2.1 How do I add a gap between threads?

[Betclever]

Hello,

How do I add a gap between threads?



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.

 

[Betclever]

I found the same page but on XF:



Link: https://xenforo.com/community/whats-new/posts/1756872/

Thx for your help

 

[Mr Lucky]

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

.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

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

(or whatever background you have)

 

[Betclever]

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

I want separate/individual blocks instead of one big block.

Do you know what I mean?

Thanks for your help Lucky.

 

[Mr Lucky]

Do you know what I mean?

I think so but the only easy way I know of to achieve that look is my method 2, where you have a border same colour as page background.

 

[Betclever]

I think so but the only easy way I know of to achieve that look is my method 2, where you have a border same colour as page background.

Yep, but how do I add a border-radius for individual blocks after using method 2?
Tried on the main class but without success. :/

 

[Mr Lucky]

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

.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

 

[Aivaras]

…and:

.structItem
{
    border-collapse: separate;
}

for border-radius to be effective.

 

[Mr Lucky]

…and:

.structItem
{
    border-collapse: separate;
}

for border-radius to be effective.

Seems to work fine without:

 

[Mr Lucky]

And for me it works best with a gap also under the filter bar

.block-filterBar
{border-bottom:10px solid @xf-pageBg
}

 

[Aivaras]

Seems to work fine without:

I fiddled with it but for a short moment on the page specified by OP, could've made a mistake. Had borders defined around the element and they would not react to the border-radius value unless as per above instruction.

 

[Betclever]

TYVM guys!

Thanks for the time you spent, it is very much appreciated!

 

[Betclever]

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...

 

[Mr Lucky]

but may I ask you additional CSS commands?

I would start a new thread for that, I think you'll get more help as it's a bit more advanced

NB: the CSS I posted above in post 7 had a bit of duplicate code, I have now edited. It still worked but not necessary.

 

[Betclever]

I would start a new thread for that, I think you'll get more help as it's a bit more advanced

NB: the CSS I posted above in post 7 had a bit of duplicate code, I have now edited. It still worked but not necessary.

Thanks... I posted a new thread this morning: https://xenforo.com/community/threads/title-length-for-existing-threads.185440/