Columns

https://phpbbstudio.com/ext/phpbbstudio/studio/styles/all/theme/images/studio-round-white.svg BBCodes 26-Mar-2019T16:00:23 phpBB Studio https://phpbbstudio.com/ext/phpbbstudio/studio/styles/all/theme/images/studio-round-blue.svg https://phpbbstudio.com/ext/phpbbstudio/studio/styles/all/theme/images/studio-round-blue.svg

Columns

 
Creating columns in a post is an often sought after effect.
While there are many solutions, most require inline style and are not (very) responsive.
Using the following approach, you forego all these issues.

tip

css3 This BBCode has no inline style!

 


 

pencil BBCode usage

[column={HASHMAP=left:1,right:2;preFilter=strtolower;postFilter=#int} #requireAncestor=clearfix]{TEXT}[/column]

 

html5 HTML replacement

<div class="column{@column}">{TEXT}</div>

 

question Help line

Create a column: [column=1|2 or left|right]Text[/column]

 

Explanation

HASHMAP=left:1,right:2;preFilter=strtolower;postFilter=#int
angle-double-right HASHMAP: makes it so, that the left and right text is turned into its respective integer.
angle-double-right preFilter: turns the user entered string to lowercase, so users can also use LEFT, RiGhT, etc…
angle-double-right postFilter: double checks if the correct value is found, we can only use integers (1 and 2).

#requireAncestor=clearfix
angle-double-right clearfix: as phpBB uses float: left; and float: right to create these columns, a clearfix is required at some point. So we make sure that columns are only allowed when they are inside a [clearfix] tag. It’s set to Ancestor instead of Parent, to make it possible to nest columns within eachother. Reference: clearfix

Examples

[clearfix]
	[column=1]This is the left column[/column]
	[column=2]This is the right column[/column]
[/clearfix]

This is the left column

This is the right column

[clearfix]
	[column=left]
		[column=1]This is the first column[/column]
		[column=right]This is the second column[/column]
	[/column]
	[column=right]
		[align=center]This is the third column[/align]
	[/column]
[/clearfix]

This is the first column

This is the second column

This is the third column

[clearfix]
	[column=left]
		[column=1]This is the first column[/column]
		[column=2]This is the second column[/column]
	[/column]
	[column=right]
		[column=left]This is the third column[/column]
		[column=right]This is the fourth column[/column]
	[/column]
[/clearfix]

This is the first column

This is the second column

This is the third column

This is the fourth column