Page tree
Skip to end of metadata
Go to start of metadata


Layout box macro

The Layout box macro has two main functions. It can create a custom "box" for your content which you can customize in style. Furthermore, you can use Layout box to create a page layout with multiple columns.


Macro options

The Linchpin Layout box macro offers several customization options:

Background color

Color of the box' background. Input options: Normal words ("black") or hex value ("#000000").


Text color

Color of the text inside the box. Input options: Normal words ("black") or hex value ("#000000").


Width

Set the width of the box.


Outer spacing

Choose the margin of the box. Outer spacing defines the distance between your box and other elements.

You can input the outer spacing in two ways:

  1. Single number: 10px
    → 10 pixels outer spacing in every direction (top, right, bottom, left).

  2. Four numbers: 10px 0px 10px 0px
    → Every number stands for a direction. The directions are top, right, bottom, left. This example would result in an outer spacing of 10px on top and bottom and no outer spacing on the sides.


Inner spacing

Choose the inner spacing of the box. Inner spacing defines the distance between your content (for example text) and the border of the box.

You can input the inner spacing in two ways:

  1. Single number: 10px
    → 10 pixels inner spacing in every direction (top, right, bottom, left).

  2. Four numbers: 10px 0px 10px 0px
    → Every number stands for a direction. The directions are: top, right, bottom, left. This example would result in an inner spacing of 10px on top and bottom and no inner spacing on the sides.


For numerical inputs (width, outer spacing, inner spacing), you can use percentage, pixels, em or rem.


Alignment of the box

You can set floats for every Layout box. If you set several boxes to float left, and use a wrapper, those boxes will appear as columns.


Use box as a wrapper

Set up a box as wrapper if your layout should contain multiple columns. It functions as a container for other boxes. The wrapper box contains only other Layout boxes. Those will appear as columns, as long as you set them to float left.


CSS class

You can input your own CSS classes here to add additional styles like shadows, borders etc.

Please note:

The CSS classes have to be set up your administration. Otherwise this setting won't do anything.