Customizing footer columns

Widgets in the footer are displayed in a grid with equal width columns by default. By using the Widget CSS Classes plugin and adding Semantic UI column classes it’s possible to easily customize the column sizes.

A normal footer with 4 widgets looks like this:

Widget CSS Classes plugin adds the “CSS Classes” field, that can be used to change the width of the columns:

Now the column with added classes is wider:

We can also control the alignment:

Resulting in a left aligned column, while other columns are still using default alignment:

Under Chap Theme -> Footer we can also customize the spacing, separation and rows of widgets.

Creating a new row of widgets after the 3rd widget:

By default the border color for internally celled grids in Semantic UI is different from divided grids. This can be changed in the Chap Theme -> SUI tab by changing the @celledBorderColor variable in the Collections – Grid component.