Overview
The Layout property controls how the main sections of the page are positioned relative to each other. You can choose a Layout with one, two, or three columns, with fixed-width content or variable-width, and dozens of other alternatives.
The Layout names are codified because there are a lot of options and the names would be quite long otherwise. See the Layout Naming Rules section later on this page for an explanation.
The PageSets Section contains a subsection for each PageSet and a PageSets.Default section that applies to all PageSets. Each of those sections contain a Layout property.
When you choose a Layout, GedSite displays an icon that indicates the arrangement of the page sections in that Layout. The diagram colors are explained on the Layout Gallery page. That page shows all the Layout options and reviewing it will help to understand both the names and the Layout options.
Layouts are implemented via CSS styles. As a result, when you change one or more of the Layout properties, you can update the site using the File > Make CSS command rather than the more time-consuming File > Make Site command.
GedSite assigns reasonable Layout choices when you create a new GedSite file:
- The PageSets.Default.Layout property is set to "1 Col F Con Side-Xtra", a fixed-size, one-column layout where the SideBar and Extra Content sections are arranged below the Content section. The page contents are centered in the browser window.
- The Image Pages.Layout property is set to "1 Col LC Con Side-Xtra", a Layout where the image occupies the entire window width.
It's important to use a Layout that accommodates wide content because images can be very wide. If you use a two column or three column Layout, and the image is wide, the browser may not honor the page Layout, and the page will look like a mess. Use "1 Col LC Con Side-Xtra", or for two columns, one of the Chart Layouts (Even though they have "Chart" in the name, they are designed for any extra-wide content.)
- The remaining Layout properties in other subsections are set to "Inherit", which means they use the Layout assigned to the PageSets.Default.Layout property.
- Con for the main Content section
- Side for the SideBar section
- Xtra for the Extra section
- Ftr for the Footer section
Those values will produce good results for most sites, but you may opt to change Layout values if your site includes SideBar menu entries or a lot of Static Content, among other possible motivations.
Layout Naming Rules
The structure of the names are as follows:
| Field | Value | Meaning |
|---|---|---|
| Columns | 1 Col | One column |
| 2 Col | Two columns | |
| 3 Col | Three columns | |
| Type | F | Fixed Centered – Each of the columns has a fixed width and the contents are centered in the browser window. The fixed section will shrink if the browser window is not wide enough. |
| FL | Fixed Left – Each of the columns has a fixed width and the contents are left-adjusted in the browser window. The fixed section will shrink if the browser window is not wide enough. | |
| FS | Fixed SideBar – The SideBar section is in its own column, and its width is fixed. The remaining columns expand or contract based on the width of the browser window. | |
| FX | Fixed Extra – The Extra section is in its own column, and its width is fixed. The remaining columns expand or contract based on the width of the browser window. | |
| LC | Liquid Content – The Content column expands or contracts to fit the browser window; the other columns are fixed. | |
| P | Percentage – Each of the columns is assigned a percentage width relative to the width of the browser window. | |
| S | Static Width – A variation of the Fixed Centered Layout where the fixed-width section will remain the same width even if it is wider than the browser window. I do not recommend the use of static Layouts. Pages with static Layouts will be difficult to use on mobile devices. | |
| SL | Static Width Left – A variation of the Fixed Left Layout where the fixed-width section will remain the same width even if it is wider than the browser window. I do not recommend the use of static Layouts. Pages with static Layouts will be difficult to use on mobile devices. | |
| Column Codes | Con Side Xtra Ftr | Column sequence – The column sequence is described using short codes in the sequence of the columns.
For one column layouts, a minus sign (-) between two codes means that the two sections share a column. For example, in "1 Col F Con Side-Xtra", the Content section gets a column of its own and the SideBar section is next to the Extra section in the same column. For two column layouts, a plus sign (+) between two codes means that the first section is above the second. For example, in "2 Col F Side+Xtra Con", the SideBar section is above the Extra section in the same column, and the Content section gets a column of its own. If the Footer section is not included in the sequence, as is the usual case, the Footer is below all the columns. The notation Con+Ftr means the Footer is positioned directly below the Content. |
| Bottom Extra | BE | The code "BE" at the end of the name indicates that the Extra section is a wide section stacked below the other two columns. |
There are a few Layouts whose names do not follow the structure shown above.
As described above, any Layout with the word "Chart" in the name is intended for content that exceeds the width of the browser window such as occurs in box charts.
There are also some special purpose Layouts. The "1 Col LC Border" Layout is intended for sites that use a Theme that includes a graphic border of vertically-repeating images on the left-hand side of the page.