Difference between revisions of "Layout Properties"

Revision as of 13:17, 10 July 2012

Highlighting of the update properties panel in the layout editor.

Each layout consists af a few simple properties which govern its overall appearance and structure. These properties are:

• Width (default 960px): This is the default width of the layout (unless overridden by the theme) which is used to compute the size of widgets and boxes.
• Columns (default 12 columns): The number of columns to divide the page into. Column widths are computed using the page width for maximum compatibility.

Depending on the type of item using the layout these properties may have different impacts. For example a channel layout should have a width spanning the minimum size of the page you wish to support. It can as many or as few columns as you wish to hold its content. Any layouts which are displayed within a channel layout content box would need to have a smaller layout width to be able to fit within the channel layout. Column numbers between layouts do not need to be the same as the system uses different css per layout to draw the appropriate column size.

Box column options highlighted.

Whenever you change a width or column property of a layout the system will check to make sure that the number of columns divides into the width evenly for proper support with older browsers. Therefore it is suggested to use even numbers widths and columns of common size when designing a layout. Below is an example of combinations of widths and columns which are acceptable:

• 960/4
• 960/12
• 1000/10
• 1368/9
• 1368/12
• xxx/1

Notes:

• It's worth noting the system will limit the number of columns in a layout to 100 maximum. If you find you need that granularity of column sizes we suggest using a Static Layout Design approach.
• Whenever the column parameter of a layout is changed the system will automatically attempt to convert box of similar ratios. Therefore moving from a 5 to 10 column grid will result in an identical looking page.