Platform Documentation

Platform front page setup

The screenshot below shows you the modules we have published on the front page of the demo site. Please see the descriptions below regarding the usage and any other relevant information of the modules.

Description

• Social Icons. The social icons to the right of the ribbon are controlled via the template under tools > social icons in the template settings.
• The Ribbon element. The ribbon element is controlled in the logo panel in the template parameters. You can enable or disable the ribbon via that setting.
• Logo. The logo is controlled via the template parameters. The demo site is using Google font replacement and using the Muli font for the site name.
• Left Menu. The left menu is a core Joomla menu module that uses the -panelmenu class suffix to generate an accordion menu layout. Please view this document regarding setting up the panel menu for details about how to set up the menu structure. The Zen Grid Framework version 2 provides the option of accordion menu, a panel menu and a selective panel menu as options for determining how the menu displays in this position.
• Main Content. The main content area uses a standard front page / featured items menu type. We have used the loadposition syntax to embed an instance of the Zentools module displaying items from Joomla using the masonry layout. 
• Right Column. The frontpage layout also helps to generate the pagination optiosn that you see to the right of the page when the browser is wider than 820px. When the browser width is less than 820px the pagination is shifted to the bottom of the page.
• Right Ribbon / Hidden Panel Trigger. The ribbon on the top right of the page is the trigger for the hidden panel display. If you would like to disable this you need to ensure that there are no modules published to the panel1 to panel4 positions.

Zentools settings for the frontpage

The frontpage of the Platform demo site features the Zentools module using a masonry layout. The settings used in the demo site are shown below. This module is referencing items from the k2 component which is how we are able to display videos in the items.

Please note that teh category tag will sit above the image in this layout only if the image item is first in the list and then the category item directly follows it as per the screenshot above.

Controlling the left column, main layout and frontpage widths

The platform template uses a left aligned layout that changes the way that we calculate the various column widths. Please note that this is different to the way that column widths are normally calculated in the framework.

Platform essentially combines the overall template width as well as a single width (specified in px) in the template parameters to determine the width of the main content area.

The settings for this are available on the layout > Settings panel.

Left column width. This needs to be a px width value and controls the width of the left column. The left column will always sit on the left edge of the browser and sits to the left of all os the other positions.

Template Width. This setting controls the overal width of the page if the layout type is anythign other than 1140. If the layout type is 1140 then the width of the page is limited to a maximum width of 1140px.

Frontpage Width. The frontpage width is a new setting and essentially allows you to specify a different width for menu types that use a the featured or frontpage menu type. We implemented this so that users could take advantage of fullscreen fullwidth layouts but not be limited to the front page width on the sub pages.

The width of the main column. The main column width is calculated by subtracting the left column value + some padding from the overall template width. The column count for any module widths on the positions set within the main column (see the all module position page) can then be determined in the usual way that the framework calculates the widths for an item.