Setting Up Controlling the layout
Controlling the layout
Our new framework offers an amazing amount of layout flexibility. Please take care to read through this document so you get the full impact of how flexible the framework is. We have allowed for an amazing array of layout variables and options and it should be possible to create virtually any layout you desire by using the settings outlined below.
General Layout Options.
As mentioned above the framework is based on a grid system that evenly divides the site width into a 12 column or 16 column grid. The widths and dimensions of the grid are all configurable and are controlled by the settings you see below and in the rest of this section.
Equalise all module widths:
The general width and layout elements for the entire theme are controlled in the first group of parameters. There are basically two tracks that you can follow here:
- You can let the template calculate the widths of each module position and spread them out across the page accordingly. Please note that this option does not control the widths and layout for the main center colomn.
- Or you can set the width of each module position on the page.
Options:
Main Container Alignment:
This option allows you to control the general alignment of the website container. Select between left, center and right alignment.
Options:
Left or right offset:
If you have looked through our back catalogue you probably will have noticed that we are quite fond of left aligned website layouts. Sometimes a design or site lends itself to being left of center so we have put some functionality into the framework to help you to select a left or ight aligned layout.
The left or right offset is the pixel distance from the edge of the browser window you want the main container to sit if you have chosen left or right as the alignment option above. If however you would prefer the layout to be centered then theres no need to touch this option as centered is set to default.
Number of columns, gutter width and template width:
This setting determines the number of columns the entire site container area (minus the gutter width) is divided into. The number of columns, the gutter width and the template width in the next two inputboxes provide the basis for the layout for the rest of the layout settings.
The template takes the template width and calculates the space to allow for each "column" on the site based on your gutter width and the number of columns you divide your site into.
eg if you have a template width of 960px, a gutter width of 20px and 12 columns specified then a single column width will be around 58px. In doing the calculations we only count 11 gutter widths since the last column doesnt have a gutter and we also remove the side gutter widths from the overall template width.
If you are using the advanced width options, once those settings have been set its just a matter of specifying the ratio of widths you require for each module within a group of modules. As an example, the number of columns you specify for the top row of modules needs to equal 12 (if you choose the 12 column layout) or 16 if you choose the 16 column layout. So if you only have three out of the four modules published to any of the top1, top2, top3 or top4 modules then they still need to add up to 12 (12 column mode) or 16 (16 column mode).
Please note that in the Woodflower theme the columns for the maincontent layout need to add upto 11 and 15 when the right column has modules published to it.
The template calculates the width required and automatically floats the modules so that they sit nicely next to each other. The first three modules in any row float to the left while the fourth module floats to the right. This means that if you are using less than the four modules in any row at any time to achieve full symmetry you must always have the last module in the row published. For example if you are publishing three modules to the first grid row you must publish two of the first three modules (ie grid1, grid2 or grid3) plus the fourth module (ie grid4).
Options:
Module layout:
Top row of modules:
The first drop down menu determines the way you want to control the widths of these module positions. There are two options:
- Use individual module position widths below
- Equalise width according to number of modules published
Logo and Navigation Row.
The logo and navigation row settings control the position of the logo, as well as the width of the logo, header1, header2, header3, header4 and menu module positions.
The position of the logo refers to whether it appears on the row with the header1 to header4 positions or whether it sits on the same row as the menu.
If you choose to position the logo on the same row as the header modules then the logo takes the position of header one, and the remaining modules on that row header2, header3, header4. also if you choose to let the template calculate the width of each of those modules the template will count the logo position as one module but it will not set the width for the logo position. The logo position width is set in the parameters below. If you choose to use the manual option of setting the width of the logo and header module positions then you need to make sure that the widths for the logo, header2, header3, and header4 all at up to the total number of columns you have set above.
If the logo is positioned on the same row as the navigation then the widths of the inset and search positions are calculated and then menu and logo widths are calculated according to the widths you specify below.
Here is a screenshot of the options available for controlling the logo, menu, inset and search layout.
Top 3 rows of the grid - Grid1 to Grid 12
The following screenshot shows the width options available for the first three rows of the grid modules. Row 1 includes grid1 to grid4, row 2 includes grid5 to grid8 and row 3 includes grid9 to grid12. You have the option of having the modules evenly spaced or you can specify individual widths for each of the module positions.
Top Advert Positions - Advert1, Advert2, Advert3
The following settings control the widths of the advert1, advert2 and advert3 positions. This group is actually a little different to the others and the total of the width ratios should not add up to the column number (eg 12 or 16) but should equal the number of columns assigned to the main content column. The width of the main content column depends on the width assigned in the various layout options below.
Main Content Area layouts
The following settings control the layout options for the main content area. These settings relate to the following module positions: left, center, right, advert1, advert2, advert3, advert4, advert5, advert6.
Please note that in the Woodflower theme the columns for the maincontent layout need to add upto 11 and 15 when the right column has modules published to it.
Center Module position
The center module position controls the order of the four main columns available in the main content area. In addition to the left, main content/component and right columns we have add a center module that can be placed either before or after the main content area.
Center column appearing before the main content.
Center column appearing after the main content.
The options shown in the screenshot below highlight the two options that are available.
Left Column Mode - Left + Main Content
Options:
Right Column Mode - Main Content + Right
Options:
Three Column Mode - Left + Main Content + Right
Options:
Four Column Mode - Left + Center + Main Content + Right
Options:
Three Column Mode - Main Content + Center + Right
Options:
Bottom Advert Rows - Advert 4, Advert5, Advert6
The following settings control the widths of the advert4, advert5 and advert6 positions. This group is actually a little different to the others and the total of the width ratios should not add up to the column number (eg 12 or 16) but should equal the number of columns assigned to the main content column. The width of the main content column depends on the width assigned in the various layout options below.
Options:
Bottom Three Rows of the Grid - Grid13 to Grid24
Options:
Bottom Modules - Bottom1, Bottom2, Bottom3, Bottom4
Options:
