Box Properties

What are box properties?

Property settings affect a box's position, dimensions, appearance and functionality.

Some settings require specific pixel values, some you need to select from a list of options in a dropdown, and others can simply be toggled on and off.

How to access the Box Properties tab

• Click on box properties tab in the editor panel:

Box name

The box names appear in the tabs to the right of the skeleton layout.

This setting is just for admins - your section visitors won't see these box names.

Position & Size

Width: value in percentage of the user's browser width, for example 100, 90, 33

Z-index: value in whole numbers from one upwards, where boxes with higher numbers site in front of boxes with lower numbers, for example 1, 4, 326

Max (maximum height and width)

A box will obey the width settings (see above), and naturally take the height of its contents, but you can specify max-width and max-height thresholds beyond which it will not expand

Width: value in pixels e.g. 900

Height: value in pixels e.g. 300

Margin

Margin specifies the gap between a box and its neighbours. Each side can be set individually.

Top: value in pixels e.g. 0, 20

Right: value in pixels e.g. 0, 20

Bottom: value in pixels e.g. 0, 20

Left: value in pixels e.g. 0, 20

Padding

Padding sets the space between a box's contents its edge. Each side can be set individually.

If your box has a background colour or border, padding of 20 pixels is standard. 

Top: value in pixels, e.g. 0, 20

Right: value in pixels, e.g. 0, 20

Bottom: value in pixels, e.g. 0, 20

Left: value in pixels, e.g. 0, 20

Content

Align

Select the alignment of the box's content. If no alignment is chosen, it will default to the alignment of the box it is sitting within.

List style

Box list styles are used to manage how lists of content, people, sections etc. display.

For example, some content list styles only show the content title. For other list styles, the content's image and date may also be included.

Box list styles only affect search and sequence elements. 

Each object type can have multiple box list styles, but only one list style can be assigned to each box.

Note: your site will have its own set of box list styles.

To create a new list style or update an existing one, contact your SmallWorlders account manager for assistance.