Recreating the frontpage layout

Written by Administrator

Democontent - Setting Up

The front page layout of the Inside Out template is reasonably straightforward. The main focus is the use of our JB Slideshow module in the advert1 position and the microblog module in the advert4 position. You can see screenshots of the settings used for these module below.

General Overview

Here is a quick run down of the modules we have used on the front page of the demo site.

• The search position is published to the top1 position..
• The login module is published to the panel1 position and the tab that triggers it opening and closing is poditioned in the top row area.
• The logo is controlled in the template parameters also and has a width of 3 cols to match the width of the left column below it.
• The slideshow is published to the banner position.
• The main menu is a core Joomla menu published the left position. You can see a full run down of the settings required to recreate the layout and the superfish menu in the Zen Grid Framework documentation. The two line menu is achieved by using our slight reworking of the original YVBB plugin that renders BB code anywhere on your Joomla site. Take a look at the creating  a two line menu tutorial for more information on how to do this.
• An instance of the Microblog module is published to each of the tab positions tab1, tab2,  tab4.
• A custom html module with raw html content is published to tab3.
• An instance of the core Joomla Most Read module is published to bottom1.
• An instance of the core Joomla Popular items module is published to bottom4.
• A core Joomla menu module is published to the footer position.

Setting up the slideshow

The slideshow module has the ability to display both Joomla content items and K2 items in a content fading / sliding / scrolling  module. The demo site uses Joomla content to display the content and the settings that were used are below:

Microblog Settings

The following screenshots highlight the microblog settings used for the tab1, tab2, tab3 positions. 

Click on the thumbnails to launch a larger image.

Tab1 Microblog

Tab2 Microblog

Tab3 Microblog