XF 2.2 Multi-column post with "Quick Facts"?

KensonPlays

Well-known member
Trying to convert some of my old blog posts on WP into Articles in XF, but one thing is kinda slowing me down. I tried following this guide:

And I'm wanting to recreate this: 1652507231044.png

If there's a way to do something similar to this with custom BBcode, I'd like to see if anyone knows how. That Columns tutorial didn't meet my needs, it ends up looking like this:
1652507311864.png

Is this possible to do via BBCode? I have no coding expertise, except VERY basic HTML and CSS. Like, super basic and I can barely put together pages like this.

1652507374742.png
 
Solution
For this kind of thing I don't use columns, I'd just use a right floating text box for your quick facts so your main text floats left of and below the box..

e.g.

bbcode tag = frbox
html replacement =
Code:
<div class="frbox">{text}</div>

css in extra/less: (change to suit)

Code:
.frbox
{width:240px;
/* or you might want max-width*/
float:right;
margin-left:20px;
padding:10px;
background:#f1f1f1;
border-radius:15px}

@media (max-width: @xf-responsiveMedium)
{.frbox
{width:100%;
float:none;
margin-left:0px}
}
You may find you want some margin-bottom also.

Screenshot 2022-05-14 at 16.04.43.png

(the responsive code is there so you don't get odd narrow text wrap on mobiles etc. Experiment with widths how your want)

If you don’t have a different background...

Mr Lucky

Well-known member
For this kind of thing I don't use columns, I'd just use a right floating text box for your quick facts so your main text floats left of and below the box..

e.g.

bbcode tag = frbox
html replacement =
Code:
<div class="frbox">{text}</div>

css in extra/less: (change to suit)

Code:
.frbox
{width:240px;
/* or you might want max-width*/
float:right;
margin-left:20px;
padding:10px;
background:#f1f1f1;
border-radius:15px}

@media (max-width: @xf-responsiveMedium)
{.frbox
{width:100%;
float:none;
margin-left:0px}
}
You may find you want some margin-bottom also.

Screenshot 2022-05-14 at 16.04.43.png

(the responsive code is there so you don't get odd narrow text wrap on mobiles etc. Experiment with widths how your want)

If you don’t have a different background colour, then you may not need padding.
 
Last edited:
Solution

Mr Lucky

Well-known member
I was able to achieve this with the shadow using google. It seems I can't have the bbcode itself and a heading on same line, or it adds that extra space. I had to select the "Quick Facts" bit and change just that text font size to 22.

View attachment 268246
Yes, that will work but if you have an actual heading it probably will have the space above, you would need to style the heading specifically for the box, an example:

Code:
.frbox h3
{padding-top:0px;
margin-top:0px}

This depends whether the heading is h2 or h3 or whatever and whether the space is caused by padding, margin or both,
 

KensonPlays

Well-known member
I'll give that a try in a few hours when I get home! Off to drop someone off at airport.

Added some tags so people searching for something similar can hopefully find this.

Edit: assuming I can make a copy with float left for the opposite effect? Since images have a float option when you click on the image, thankfully don't need it for that.
 
Last edited:

KensonPlays

Well-known member
One more thing, @Mr Lucky - It does look a little off with the padding, I tried adjusting padding and margins to be both positive and negative, 10, 20, etc. Can't seem to figure out how to adjust it. I'd like it to have even padding all the way around where the text won't cut into the rounded edges.
1652563747643.png
 

Mr Lucky

Well-known member
The left margin is necessary as otherwise some of the text outside will go right up to and touch the box.

Looking at it now I would actually have a bigger than 10px paddding inside the box.

I would definitely not have any negative padding of margin. My pref would pro my just be padding of 20px and a smaller border radius. It’s all down to trial to see what works best for you.

Also you have some space above the heading. This could be because you have it on the line below the bbcode tag so it creates a line break there, or else it’s a heading that itself has margin or padding above.
 

KensonPlays

Well-known member
I was able to achieve this with the shadow using google. It seems I can't have the bbcode itself and a heading on same line, or it adds that extra space. I had to select the "Quick Facts" bit and change just that text font size to 22.

1652565267239.png
 

KensonPlays

Well-known member
Yes, that will work but if you have an actual heading it probably will have the space above, you would need to style the heading specifically for the box, an example:

Code:
.frbox h3
{padding-top:0px;
margin-top:0px}

This depends whether the heading is h2 or h3 or whatever and whether the space is caused by padding, margin or both,
This seems to let me also use the Heading tag on a separate line for SEO with Google. I would consider this solved, I think.
 

Mr Lucky

Well-known member
Edit: assuming I can make a copy with float left for the opposite effect?
Yes, and in which case you’d have margin right instead of margin left.

But one more thing, note in either case if there is no different background you probably won’t need the paddding

BTW: you may find with either float you may need a little margin-bottom if necessary
 
Top