Control the appearance of your template layout

Each design starts with a template layout item. It is the container for all the other items in your layout. Since the template appearance settings are passed down to all other items, the template layout item is best for style you want to carry throughout your design.

The template item, like other items, has a gear settings button which opens the customizations popup.

click to view appearance settings

The popup provides you with styling controls for each level of your layout. You’ll notice that this is the top template level item, so there are controls for child items block, row, column, and other settings – each in a tabbed view along the top of the popup.

different tabs provide style control or each layout element

In the example above, you see that the Block Appearance tab is being viewed, and the block background section is using a background color of none. Since this setting is at the template level, each block item will have a background color of none by default. (transparent, showing the template background color/image through)

To apply a different color to each block in the design, change the color here at the template level, and all blocks will receive your color setting. The same goes for other block settings found in the popup – padding settings, margins, and more – the styles you set here apply to all your block items for a consistent, cohesive look. This makes it easy to come to one place and make changes when you want all blocks to update together. The same is true for Row Appearance, for Column Appearance, and all other settings you see: styles applied at the template level are inherited throughout the sub-items of your layout.

What if you need a certain row to have a background color different from the other rows in the template? Or if you need to apply a font style to change the text appearance of widgets in a column?

You may override appearance settings in any sub-item of your template layout when it should look different from the other parts of your layout. Just choose a block, row, or column, and click the gear settings button.

click to edit the row customizations

For this example, we’ll edit the appearance of a row where two columns are used for menu widgets. The row needs to have a minty green background color, so we’ll click the edit button to override the background color of the row.

settings edit buttons which show blue are overriding

When you click an edit button to make changes, your settings will override the styling. In this example, the background color of a row is being changed, so the parent block and the parent template settings won’t apply anymore.

If one or more settings in a particular group is inheriting from its parent template you’ll be required to unlock inheritance for that group before you can save changes.

Okay, let’s change the row background color to a light green.

When done, there is a light green background color for the row which holds the menu widgets. From now on any changes I make to the Row appearance settings for that specific row in the parent will not be inherited by this child template.

green background overrides the default background for one row

Now, let’s also change an option you see only when a menu widget is used – you’ll notice the horizontal menus tab up top in the popup. Let’s change the row settings to use a different font for menus appearing in this row.

All other menus in our design will continue using the original menu link color settings, but this row will use a special font style for the menu links. They now appear gray from the styling changes we just made in our example.

Each layout item gives you style controls for itself, but also provides style controls for it’s child items. For example, blocks include controls for row and column child items.

Applying style settings for child items in a parent item affects all children until one of them overrides the style. For example, if all the columns inside a row should have a 5% top padding, avoid setting this special style in each column. Instead, the row can apply 5% top padding for all child columns in one place.

a row overrides child column top padding to 5%

This way, one setting is applied to each child column in that row for a consistent look, and one place to make adjustments.

As you can see, applying style settings is easy to do, and works the same at each level of your layout. Think about styling you want to use, and apply it at the highest level you can. You may even decide to move and organize layout items into different blocks or rows to get the effect you want. Then, make per-item styling changes only when necessary.