Recreating the demo site

It's not always possible to start building out a site with a new template by using the quickstart package. This guide will help you to see which elements we used and where we used them on the demo site for you to quickly go about rectreating the demo site for this template.

Front page layout

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

• Logo / Tagline - This is configured via the template admin as described in the Zen Grid Framework knowledgebase.
• Menu - The menu is using the core Joomla menu module and is published to the menu module position as described in the zen grid framework documentation. The double line menu items are created using the YYVB BB Code plug-in. You can see an in-depth article on how to create these double line menu items via our blog post on the subject.
• Slideshow - The JB Slideshow3 module is published to the banner position. You can see the specific configuration here. Please note that in order to get the nav bar to sit above the slideshow you must ensure that the absolute position option in the template > General layout settings is enabled.
• Tabbed Area - There are four instances of the microblog module published to tab1, tab2, tab3 and tab4 module positions. The titles for the tabs are set via the template administrator. Each module is set to display K2 content items according to different display criteria. You can also use this module to display Joomla content items.
• Captify Content / Category Area - The captifyContent module is published to the grid5 position and is set to display K2 category information. You can also use this module to display K2 items or Joomla sections, categories or content items.
• Search -  the search module is published to the grid 4 position.
• A little about Newstream -  the intro text to the new stream template is published to the grid 4 position. this is just a custom HTML module.
• Microblog -  the right column latest news items an instance of the micro-blog module published to the grid8 module position.  It is set to display in flat mode and the title length is truncated and the intro text is truncated also. You can see a screenshot of the module settings that we have used on the micro-blog page.
•  Bottom menu -  the bottom menu is a court Joomla menu module published to the footer module position.
• Panel Trigger - The top right open panel text, is the trigger for the hidden panel. In order to have this button displayed on your site you need to ensure that there is at least one module of any kind published to the panel1, panel2, panel3, all panel4 module positions.

Other Settings

For the front page of the Newstream template we decided to utilize the grid positions rather than display the main content or use the right module position for the modules that you see on the right-hand side. It is of course possible to re-create this layout using the main content and the right module position.

We have also elected to hide the front page/main content area via a setting in the general layout settings in the Joomla template administrator.  We have done this in order to reduce padding at the bottom of the page, but please be aware that if you choose to do this you may have some conflicts with Joomla's  menu item ID assignment.

For instance, if you use the search module and there is not a menu item that points to the search component, then the front page will be displayed but because the template is set to hide the front page/main content area then you will not see your search results. In order to circumvent this you need to make sure that there is a menu item that points to the search component. This menu item does not necessarily have to be published on the page.

K2 Frontpage Layout

The following screenshot highlights the settings that we have used on the K2 menu item as per the top menu on the demo site.

Description

The basic setup for this page is the same as all the other pages in that the logo, tagline,  Super Fish menu, bottom menu is the same as per the description above.

• Page Settings - The menu item is set to display all items from the parent demo content K2 category and the attributes of the page are controlled via the K2 to category. The banner at the top of this page that says “ take too magazine layout” is simply the menu title that is controlled via the menu settings. You need to edit the menu item, and then open the accordion that controls the parameters >  system settings and change the menu title there.
• Top Banner Graphic -  The banner image at the very top of the page is a custom HTML module that is displaying an image that is the width of the template. It is positioned absolutely and fits the needs the menu and logo strip. This position setting is controlled via the layout setting in the templates administrator area.
• Newstream Authors - The new stream offers module on the right column is a K2 offers module that is published to the right module position. The author description is set to enabled but is limited to 10 or so words.

Other notable elements on the demo.

Some other settings that you might like to know about for the demo site include:

•  the two column module that sits in the right-hand column in the setting up the new stream template section is an instance of the micro-blog module published in column mode with two columns set. We have also disabled the images from loading in the module And have set the intro text to eight words.
• The login module that you see in the hidden panel at the top of the page is an instance of JB login module set to flat display.
• The footer that is see at the bottom of the  demo site is a collection of all custom HTML modules that have been created to reflect a site map type set up for the footer. Ideally for your site you will re-create the same effect by using either the core Joomla many modules or perhaps latest news, popular news or micro-blog modules. We elected to re-create the put a layout using this method as a means to putting down on time for you if you choose to use the quick start package. The  column with the logo the twitter links in the official stuff notice is a custom HTML module posted to the bottom1 module position. The other modules are published to the bottom2, bottom3, bottom4 and bottom6  module positions.