[Skip to content]

Search our Site
Easysite Resource Centre
Columns / Multi-Columns: Markup updated (Theme changes required)

Columns / Multi-Columns: Markup updated (Theme changes required)


The Columns element has new CSS classes available although the existing classes are unchanged. Additional CSS classes have been added but the same structural mark-up is still present – new columns are named ‘columns-alpha’ rather than ‘element-columns-alpha-outer’.

The Column structure is the same but, similar to the Panel element classes, the mark-up has been slimmed down to use generic class names at every level with just one top level distinguisher class. For example, ‘columns-alpha,’ ‘columns-beta,’ etc. The alpha and beta classes replace left and right from the old Columns element – allowing for up to six columns to be added.

It will simply be a matter of mapping over ‘element-columns-alpha-outer’ to ‘columns-alpha,’ etc. Again, like the Panels element, you will require two class names to target a particular part of the Column, where the first class refers to which chosen column style and the second class refers to the first column within the element. For example, ‘.columns-alpha .column-alpha’.

Easysite 7:

[ Zoom ]
Columns mark up screenshot

Easysite 6.5:

[ Zoom ]
Easysite 6 columns mark up

Article details

Published11 June 2014