Page Layouts are defined by the IContentFragmentPageDataService via the LayoutType enumeration and displayed via images in the web/utility/images/layouts/ folder and CSS within the generic theme.
This article contains the following information:
LayoutType enumeration
The LayoutType enumeration contains 11 selectable layouts:
| 0 |
Content |
 |
| 1 |
ContentLeftSidebarRight |
 |
| 2 |
SidebarLeftContentRight |
 |
| 3 |
SidebarLeftContentCenterSidebarRight |
 |
| 4 |
ContentLeftSplitSidebarRightTopSingleSidebarRightBottom |
 |
| 5 |
HeaderTopContentLeftSidebarRight |
 |
| 6 |
HeaderTopSidebarLeftContentRight |
 |
| 7 |
HeaderTopSidebarLeftContentCenterSidebarRight |
 |
| 8 |
HeaderTopContentLeftSplitSidebarRightTopSingleSidebarRightBottom |
 |
| 9 |
SplitContent |
 |
| 10 |
HeaderTopSplitContent |
 |
(top)
Layout methods
IContentFragmentDataService.GetRegions(LayoutType layout)
This method returns the names of the regions for the given LayoutType in the order they should be rendered. The following region names are used by default:
- Header
- Content
- RightSidebar
- LeftSidebar
- SplitSidebarRight
- SplitSidebarLeft
Combinations of these layout names are used to create each of the layouts defined in the LayoutType enum.
IContentFragmentDataService.GetMappingRegions(LayoutType layout, string regionName)
This method is used when changing one layout to another. For each LayoutType and region, this method returns a list of othe regions that content should be migrated from when changing the layout to this LayoutType.
For example, when changing to the ContentLeftSidebarRight layout, the content in the LeftSidebar, SplitSidebarLeft, SplitSidebarRight, and RightSidebar regions from the previous layout will be migrated into the RightSidebar region of the new layout (in that order) and content in the Header and Content regions will be migrated into the Content region of the new layout.
(top)
Supporting Files
Preview images
For each layout defined in the LayoutType enumeration, a preview image should exist in the web/utility/images/layouts/ folder. This image will be used when displaying this layout type as an option in the UI.
CSS
All supported layouts have default CSS styles defined within the web/themes/generic/css/layout/css file. This file is automatically included for all themes inheriting from the generic theme (for example, Evolution2 and Fiji themes). When included in custom themes, layout.css is added as the first stylesheet allowing the individual themes to customize the layout's CSS via overrides within the theme's own CSS files included through Page Headers or through end-user-defined CSS overrides (if the theme supports CSS overrides).
When layouts are rendered, they follow the naming and format conventions in the Style/Markup Guide.
(top)
Customizing layouts
Layouts and their regions are not designed to be easily extended or customized; however, some adjustments can be made.
Add new layouts
Because the layout types are defined within an enumeration, new layouts cannot be easily added. Instead, an existing layout can be adjusted to add, remove, and reorder regions.
Add/remove/reorder regions within a layout
By overriding the out-of-the-box implementation of IContentFragmentPageDataService (or creating a new implementation) and changing the service binding located in web/Modules/ContentFragmentPageModule.config, you can adjust the layout-related method identified above to add, remove or reorder layouts. However, this change may make it more difficult to upgrade to future versions of the Telligent Evolution Platform.
Adjusting layout styling
You can make style changes via CSS overrides within a theme by styling against the markup and style classes for layouts defined in the Style Markup Guide.
(top)