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

[KensonPlays]

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:

Columns in posts/articles bbcode

"Why would I want columns in posts?" I hear you ask. Well, given that with xenForo 2.2 we have article threads, some people might like their articles to look more magazine like. "Why can't I just use tables" Because with columns, as you add to...

xenforo.com

And I'm wanting to recreate this:

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:


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.

 

[Mr Lucky]

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 =

<div class="frbox">{text}</div>

css in extra/less: (change to suit)

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



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

 

[KensonPlays]

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.

 

[KensonPlays]

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.

 

[Mr Lucky]

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]

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.

 

[Mr Lucky]

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:

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

it was a linebreak like this:

 

[Mr Lucky]

it was a linebreak like this:

View attachment 268247

It probably needs the heading to be immediately after the bbcode on the same line. But using the browser inspect element should reveal what is causing any issues.

 

[KensonPlays]

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:

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

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