Style and Layout

Layout

The Style and Layout editor is based on the following concepts:

• Website
  In the Style and Layout editor, Website refers to the frame within which your website content is displayed. You can edit the properties of the Website frame under Global style.
• Website exterior
  The Website exterior is what surrounds the Website within the browser window. You can edit the properties of the Website frame under Global style.
• Blocks
  Blocks are the groups of elements (Components) of your website that define its layout. Blocks are of 3 types: headers, columns, footers. You can have several blocks of each type – for example, several headers. To edit the properties of a Block, just click on it (but not on a component) and its settings will appear in the right-hand side panel.
• Components
  Components are where the actual pieces of content, similar to widgets. There are many types of Components (e.g. text, image, search box…). You can freely add, remove and move Components. To edit the properties of a Component, just click on it and its settings will appear in the right-hand side panel.
• Pinned blocks and components
  Pinned blocks and components do not follow your website layout: they are layered on top of the layout, and stay pinned to the frame of the browser. They don’t move when you scroll the page.
  (To create a pinned block/element that takes the full width or the full height of the browser window, use the value 100% for its width or minimum height, and make sure the internal margin is 0 on the longest edge)

Hierarchy of styles

Within the hierarchy Website – Block – Component, styles applied to a “parent” apply to its “children” too.

For example, a change in style at the “Website” level will apply to all Blocks and Components, unless they have their own style (i.e. style field not blank). Similarly, a change in style at a Block level will apply to its Components too, unless the Components have their own style.

To unset a Component or a Block’s own style so that it inherits its parent’s style, just leave the style field blank.

It is recommended to strive to apply styles at the highest possible hierarchy level to make it easier to change them later on.

Understanding margins

Blocks and Components containers have both internal and external margins:

There are several ways to specify margin values. Examples:

• 20px -> 20 pixel-wide margin on all sides or the element
• 0 20px -> no margin on top/bottom, 20 pixel margin on left/right-hand sides
• 0px 10px 20px 30px -> going clockwise: no margin on top, 10 pixel margin on right-hand side, 20 pixel on bottom side, 30 pixel on left-hand side

Sizes

Heights and width values can be specified:

• In pixel values, e.g. 100px
• In percentages of the available space in the layout, e.g. 90%

Borders and rounded corners

Borders are defined in the standard condensed CSS format. Examples:

• 1px solid white -> white border of 1px width
• 3px dotted #112233 -> 3px-wide dotted border of RGB color #112233 (See e.g. PhotoShop color info to translate color values into this format)

In addition, you can define rounded corners. For example, a rounder corners value of 10px will create round corners with a radius of 10px.

NOTE: Rounded corners are not supported by Internet Explorer prior to version 9, so visitors with older IE browsers always see square corners.

Shadows

You can also add shadows to blocks and components. The shadow value is defined as in the CSS3 standard.

Example:
8px 9px 5px #666666 creates a shadow of color #666666 (mid-grey) that extends 8 pixels below the element and 9 pixels to its right-hand side, with 5 pixels of blur.

For a smarter way to define he shadow color, you can also specify its value so that it depends on the background. For example:
10px 10px 5px rgba(0,0,0,0.4) creates a shadow that is black (RGB values 0,0,0), with a transparency of 0.4. Therefore, it will appear e.g. dark blue if the background is blue.

NOTE: Shadows are not supported by Internet Explorer prior to version 9, and are not visible to visitors with older IE browsers.