At the core of the Zen Grid Framework is a flexible and highly configurable layout that is loosely based on the formula used in the 960 CSS grid framework. It differs because of the way that the Zen Grid Framework handles the calculations involved when it comes to setting the widths of the columns, gutters and the overall template width plus it intelligently handles multiple and flexible module positioning and configuration.

 

As a part of the new framework we have also factored in the ability to create template specific layouts, or overrides, that override the core framework layout. The overrides add an amazing amount of flexibility to the construction of individual themes while at the same time help us to maintain a core set of files for the framework that mean that upgrading and maintaining the codebase is a breeze.

 

Understanding the theme overrides

The overrides basically come into play when the framework finds an override file in the Zen Grid Framework compatible in the layout folder of the template - eg templates/zen_avanti/layout

 

Each override file is a snippet of the main index.php file and can be added to or edited in anyway that you like. The following is a list of overrides that are available in the top to bottom order on the page:

• openContainer.php - Used to open wrappers around the entire content body
• top.php - top1 to top4 module positions
• header.php - header1 to header4 module positions
• nav.php - the menu module position and the logo if you have published the logo to be on the same row as the nav.
• banner.php - the banner modules
• grid1.php - grid1 to grid4 module positions
• grid2.php - grid5 to grid8 module positions
• grid3.php - grid9 to grid12 module positions
• main.php - main content area including advert1 to advert6, left, right, center and main content output.

• grid4.php - grid13 to grid16 module positions
• grid5.php - grid17 to grid20 module positions
• grid6.php - grid21 to grid24 module positions
• bottom.php - bottom1 to bottom4 module positions
• footer.php - footer module and copyright position
• panel.php - controls the hidden panel
• closeContainer.php - Used to close divs that wrap around the site body.
• frontpage.php - used to override the view when the active menu is also the front page or default menu item.

 

Sample override files

There are example files for each of the overrides mentioned above located in the zengridframework/assets/layout folder. To implement the override on your site simply copy one of these files into the templates/zen_avanti/layout folder and make sure that you have the template override set to enabled in the layout > template override tab in your template parameter - as can be seen in the screenshot below.