Knowledgebase

Joomlabamboo template and extension documentation

newstream {jb_one}

Getting Started

Please ensure that you read the getting started articles in preparation for working with this template.

This template also uses the Zen Grid Framework which makes controlling widths, colours and sub themes for the Joomla template a breeze. Please make sure that you familiarise yourself with the documentation for working with the Zen Grid Framework before you get started.

{/jb_one} {jb_two}

Module Positions

Newstream is built on the Zen Grid Framework and has the same flexible and dynamic module positions layout.Please note that the modules available for Newstream differ slightly from the normal framework module positioning.

NewstreamModulePositions

{/jb_two} {jb_three}

More settings

The Zen Grid Framework allows for flexibility within individual templates while maintaining the same core codebase. The following are the specific variations to the Newstream template.

Layout Overrides: Newstream has a number of layout overrides to help fine tune the layout. You can find these files in the templates/newstream/layout folder. In general you do not need to touch these files but if you need to make some changes to any of the following areas, then this is where you need to make them:

  • main
  • bottom
  • grid1
  • nav
  • panel

{/jb_three} {jb_four}

Module used on the demo

All of the extensions available from Joomlabamboo are compatible with this template. While they aren't all featured on the demo site for Newstream you will find that they will play nicely if you need to incorporate them into the site.

The modules used on the demo site include:

{/jb_four} {jb_five}

Newstream 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.

NewstreamFrontpage

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. You can see the screenshot of the parameters for the slideshow module in one of the points below but for your reference the images that we have used in the slideshow are 920 pixels wide and 494 pixels tall. When you're calculating your image dimensions you need to take into account the gutter used in the framework. So if the template with this set to 960 pixels than 40 of those pixels will be included in the left and the right gutter ie the available space for the template or content area is reduced to 920 pixels. NOTE: if you leave the page title ON when you create a menu item, it looks pretty funky with the slideshow. Its best to disable the page title on such pages by going to the Parameters (System) and select "No" for Display Papge Title.
  • Tabbed Area - The Newstream template comes with four tabbed module positions that sit above the main content area. You can display any module in these positions and the tabs and their respective modules will only appear on the page if the module is assigned to the correct tab and is also published. There are two instances of the microblog module published to tab1 and tab2 module position on the demo sites. The titles for the tabs are set via the template administrator under the hidden panel settings via Scripts and Extras > Hidden Panel. 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. TIP: you must have an image associated with each category or section that you want displayed in this module. For more info visit the captifyContent information page.
  • 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.

The screenshots below highlights the settings of the various modules included on the front page.

CaptifyContent frontpage settings:

NewstreamCaptifySettings

The Microblog modules in the tabbed area

Please note that the microblog modules published here require the -tabs module class applied as can be seen in the screenshot below.

newstreamMicroblogTabsettings

The Microblog module called Latest news in the grid8 position.

newstreammicroblogGrid8

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.

{/jb_five} {jb_six}

Left and right Column Accordion

Newstream has an inbuilt accordion for modules published to the left or right module position that can be enabled simply by adding the module class suffix -slide to any module published to the left. The accordion works in the same way as our panel menu and creates a cookie to store the open/closed state of the accordion from page to page.

To use the accordion in conjunction with the coloured headings as can be seen in the module classes you need to specify the module class suffix as per the following example.

-slide

This will make the module heading become the trigger to open and close the accordion as well as creating a red heading image for the title of the module.

{/jb_six} {jb_seven}

Configuring the K2 template

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.

K2 Magazine Layout

 

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.

{/jb_seven} {jb_eight}

Settings for the slideshow module

newstreamSlideshowSettings

{/jb_eight} {jb_nine}

Starting with Newstream from a fresh installation of Joomla

Although the Newstream template is a simple design the default Joomla sample data doesn't quite do it justice and so here are a few steps to do if you are installing the Newstream template into a default Joomla installation.

 

Elements to install.

Essential elements

  • Install the Newstream template
  • Install the Zen Grid Framework
  • Install the JB LIbrary plugin and enable it in the extensions > plugin manager

Optional Elements

  • Install JB Slideshow
  • Install captifyContent
  • Install Microblog
  • Install the JB BB Code plugin (For two line menus)
  • Install K2

 

Elements to unpublish

  • Unpublish all modules in the right column
  • Unpublish all modules in the left module position
  • Disable the module title in the breadcrumb module
  • Disable main menu items except for home menu item

 

Change the position of some elements on the page

  • Move main menu to the menu position

 

At this stage you should have a pretty simple and straight forward site. From this point you could probably start to build out the content on your site and then adds the specific functionality from the modules once you have created your content. It's important to remember that the slideshow, captify Content and micro blog modules rely heavily on images in terms of the way that they present your content so it might be worth adding placeholder or stock images in your content as you go through setting up the rest of the modules.

The screenshot below shows you the default Joomla installation after following the points above.

stepbystep1

{/jb_nine} {jb_ten}

Troubleshooting

Are you using the latest version of the Zen Grid Framework?

Newstream is only compatible with v1.0.5 + of the Zen Grid Framework

v1.0.5 of the Zen Grid Framework implements a lot of handy little features such as google font support, ability to hide the main content on the front page, supersubs javascript for the superfish menu, as well as fixes to the tagline and changes to the way that we implement the logo or site title.

 

Help - my content is displaying underneath my navigation area.

The new stream template uses absolute positioning in order to allow the navigation area to float above the background images that you see on the demo site. If there are no modules published to the banner position and you have the template parameter set to absolutely position the navigation area (which can be found in the template administrator > layout > Gen. settings) you will have some of the main content floating underneath the navigation also. The solution is to be the sets the navigation to be displayed relatively via a template parameter or publish a module to the banner position. The template however will work fine with the navigation area positioned absolutely without any other modules published above the main content and with the main content being displayed.

The banner module position is designed specifically to sit underneath the navigation area. If the navigation is set to display using absolute positioning, then it will automatically float above any module that is published to the banner position.

 

The super fish menu does not fade or slide it just drops down

 please make sure you have installed and published the JB library plug-in.

 

My main content is not displaying

 version 1.05 of the Zen Grid Framework comes with the option of hiding the main content area on the front page e.g. the default menu item of your site. We've done this in order to help trim up any spacing or padding that is generated from the main content area that is not needed if you are not displaying any content on the front page. If you would prefer to display your content on the front page of your site, then please set the option to hide the main content area in the template parameters under layout > Gen. settings to show.

I get the following error after installing the Zen Grid Framework and a Zen Grid compatible template.

Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /homepages/26/d171984212/htdocs/tradenet/templates/zengridframework/includes/yth.php on line 36

This error means that your server is using php v4 while the Zen Grid Framework needs php5 to function properly. Often changing to php5 is a matter of adding a rule to the htaccess file on your site but it's best to ask your host for help in determining the best way to use php on your server.

{/jb_ten}