Customizing footer columns

Widgets in the footer are displayed in a grid with equal width columns by default. 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:

Using the plugin we can change the width of the column by adding classes:

Now the column with classes is wider:

We can also control the alignment:

Resulting in a left aligned column:

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 chaning the @celledBorderColor variable in the Collections – Grid component.

Leave a comment

Your email address will not be published. Required fields are marked *