- Joined
- Jul 25, 2024
- Messages
- 142
- Thread Author
- #1
"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 or edit the text it flows from one column to the next. Plus, you can very simply make the columns responsive and work well on any browser width or device.
The bbcode is very simple, and in my example I am using the tag col. There is also a handy font awesome columns icon you can use if you want to show an icon in the text editor.
How many columns?
As many or as few as you like, but we'll get to that later when we look at the CSS code.
First of all the custom bbcode:
(In your Admin Control Panel > Content > Custom BB codes click on Add BB code)
Define number and/or width of columns with CSS
As usual you add the code into your style's extra.less template. There are a couple of simple ways to do define number and width of columns:
Method 1. Column width + automatic number of columns
There will be as many columns of this width as can fit in the post container. Here we have defined a width of 250px and a gap of 30px between the columns.
This is actually a minimum column width so for example if only two columns fit they will each expand to fill the width of the container, still obeying the column gap. This looks more elegant as opposed to keeping a fixed width that might leave a bigger gap between or to the side/s.
You can control the number of columns by changing the width: smaller width = more columns.
So on a mobile you are like to see a nice responsive view of one column that fills the width.
Method 2. Define number of columns
Method 1 will be fine most purposes but you can define the number of columns using column-count, however in order to be responsive it is a good idea to also include the column width (as above) other wise it will force that number of columns regardless of browser width or device.
So this is really a maximum number of columns that will display depending on container width, and all we have done is added the column count to method 1.
In this case it will show two columns but reduce to one column on mobiles or devices that mean two 250px columns will not fit.
Leaving out column-width to force the number of columns is possible but in that case you will have very skinny columns on many mobiles.
Obviously you can experiment with column count and width to suit your own style and preferences.
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 or edit the text it flows from one column to the next. Plus, you can very simply make the columns responsive and work well on any browser width or device.
The bbcode is very simple, and in my example I am using the tag col. There is also a handy font awesome columns icon you can use if you want to show an icon in the text editor.
How many columns?
As many or as few as you like, but we'll get to that later when we look at the CSS code.
First of all the custom bbcode:
(In your Admin Control Panel > Content > Custom BB codes click on Add BB code)
| BB code tag | postcol |
| Title | Columns |
| HTML replacement | Code: <div class="postcol"> {text} </div> |
| Font Awesome icon (optional) | columns |
Define number and/or width of columns with CSS
As usual you add the code into your style's extra.less template. There are a couple of simple ways to do define number and width of columns:
- Define the width of the columns (browser width will determine the actual number of columns that fit based on the column width/gap)
- Define the (maximum) number of columns
Method 1. Column width + automatic number of columns
There will be as many columns of this width as can fit in the post container. Here we have defined a width of 250px and a gap of 30px between the columns.
This is actually a minimum column width so for example if only two columns fit they will each expand to fill the width of the container, still obeying the column gap. This looks more elegant as opposed to keeping a fixed width that might leave a bigger gap between or to the side/s.
You can control the number of columns by changing the width: smaller width = more columns.
So on a mobile you are like to see a nice responsive view of one column that fills the width.
Method 2. Define number of columns
Method 1 will be fine most purposes but you can define the number of columns using column-count, however in order to be responsive it is a good idea to also include the column width (as above) other wise it will force that number of columns regardless of browser width or device.
So this is really a maximum number of columns that will display depending on container width, and all we have done is added the column count to method 1.
In this case it will show two columns but reduce to one column on mobiles or devices that mean two 250px columns will not fit.
Leaving out column-width to force the number of columns is possible but in that case you will have very skinny columns on many mobiles.
Obviously you can experiment with column count and width to suit your own style and preferences.