[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)

Description

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