Newscycle Documentation
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. The Zen Grid Framework 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.
Module Positions
The screenshot below highlights the module positions available in this joomla template.
More settings
The Zen Grid Framework allows for flexibiility within individual templates while maintaining the same core codebase.
Layout Overrides: Newscycle uses the Zen Grid framework layout overrides to help create the unique layout that you see on the Newscycle demo site. You can find these files in the templates/jbNewscycle/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:
- banner.php
- bottom.php
- footer.php
- grid1.php
- grid6.php
- header.php
- jbtabs.php
- main.php
- nav.php
- openContainer.php
- panel.php
- top.php
If you need to edit or change the layout across any of these areas of the template then you will need to edit the files in the layout/ folder. You can also disable the layout overrides int he template by navigating to layout/overrides panel in the template administration.
Rebranding
Please note that the zen grid framework provides the ability to easily replace the Joomlabamboo copyright in the admin of your template. In order to do this you still need to have either a developer membership or have purchased rebranding. Please ensure that you look at the documentation for the framework for how to use this new feature. You can read more regarding this in the Zen Grid Framework knowledgebase.
Extensions featured on the demo
All of the extensions available from Joomlabamboo are compatible with this template. Not all are required for the running of the template and only some are featured as a part of the demo site.
The modules used on the demo site include:
- JB Library
- JB Slideshow3
- JB Type
- Microblog
- CaptifyContent
- K2
- JB BBCode
Please see below in the frontpage setup for screenshots of the modules as they are setup on the demo site of this template.
Newscycle 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
- Date - The date is controlled via the template parameters and is published above the top1 position. Please see below for further details.
- Logo and Tagline - These elements are controlled vi the template and are set to appear on the header row. The font being used for the logo is Muli - a google font replacement.
- 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.
- Banner - The JB Slideshow3 module is published to the banner position. You can see a screenshot of the specific specific configuration below.
- Search - The search module is published to search position. The search icon is automatically displayed when the search module is published.
- Inset - A custom html module is published to the inset position. This position is above the gradient line on the left directly underneath the top row of teeth.
- Grid1 - A custom html module is published to the grid1 position. The module title is enabled and the content below it is wrapped in a p tag. The module has the class suffix " leftribbon green". Note the extra space before the start of the module class. Also please note that the quotation marks are not required in a live situation.
- Grid4 - A custom html module is published to grid4 using <blockquote> tags to generate the quote image.
- Grid5 - An instance of the microblog module is published to the grid5 position.
- Grid9 - A custom html module is published to the grid9 position. The module title is enabled and the content below it is wrapped in a p tag. The module has the class suffix " leftribbon green". Note the extra space before the start of the module class. Also please note that the quotation marks are not required in a live situation.
- Grid12 - A custom html module is published to grid12 using <blockquote> tags to generate the quote image.
- Grid13 - An instance of the captifyContent module is published to the grid13 position.
- Bottom1 to Bottom6 - This row of modules contain a custom html module each that has an unordered list. You could conceivably use a popular items, latest news etc module in these positions.
- Footer - the footer position has a custom HTML module published to it.
The screenshots below highlights the settings of the various modules included on the front page.
Slideshow settings
Microblog Settings
The following settings were used on the demo to create the layout you can see on the front page of the demo site for the microblog module positioned at grid5.
CaptifyContent
The following screenshot details the settings required to replicate the settings used for the captifyContent module published to grid13.
Newscycle Colour Scheme Options
Newstream comes with thirteen distinct colour schemes that are big, bold and beautiful. A news or magazine site traditionally needs to set the general tone via a clean or minimal backdrop with a focus on simplicity but it can also emphasize its content with a dynamic and striking colour palette. Newstream does this by providing ample white space with a simple and striking colour hierachy that creates an elegant theme to accompany your news.
The colour scheme css files can be found in the templates/newstream/css/hilite folder and are very easy to edit in order to create your own colour palette.
1. Select your background colour.
2. Select your colour highlight.
3. Select your bottom colour.
Ribbons and Gradients
One of the striking features of the Newscycle template is the combination of shadow, gradient and ribbon elements that you can see on the front page of the demo site.
The template is designed in such a way that the gradient image will appear above the main content area, as well as modules assigned to the grid1 row (eg grid1, grid2, grid3, grid4), grid3 row (eg grid9, grid10, grid11, grid12) and the grid5 row (eg grid17, grid18, grid19, grid20).
This means that effectively at every second row of the grid modules when you publish a module to that row one of the shadow gradients will appear.
The ribbons are generated via the use of a module class which gives you maximum flexibility when it comes to deciding which areas of the page you want to highlight. All you need to do to apply the ribbon style to a module on the lefthand side of the page is apply the module class suffix -leftribbon to the module. While you can replicate the styling on the right side of the page by using the module class -rightribbon.
Module class examples
The following module classes are available for you to recreate the coloured ribbon elements.
Frontpage setup example
As an example the front page of the Newscycle demo is set up using the following combination of modules.
Grid1 - A custom html module is positioned at the grid1 module position and it has the -leftribbon module class assigned to it.
Grid4 - A custom html module is assigned to grid4 and has some custom text using <blockquote> styling.
Grid5 - A Microblog module is published to the grid5 position.
As you can see from the screenshot above this formation of modules makes the page look as though the two rows of modules are a part of the same section on the page.
Date and Social Icons
The Newscycle template has the option of displaying the date in the top1 position. You can see this in the screenshot above and of course at the top of the demo page. The date is enabled via a parameter in the template settings and there are eleven different date formats to choose from.
You can see the date formats available in the screenshot below.
Social Icons
We last implemented social icons in the Journal template that we released in December 2010. The icons are wholly controlled via the template admin where you are able to select from a collection of handy and pretty social icons as well as personalise the link that gets applied to them.
You can see a list of the icons that are available in the template on the demo site. However if you don't quite see the social icon that is just right for you then you can easily upload the icon you want to use to the templates/jbnewscycle/images/icons folder and then the new icon will be displayed int he template admin.
You can see the options available for the icons below.
Configuring the K2 template
The Newscycle Joomla template has K2 overrides built in and are activated simply by assigning the Newscycle template in the K2 category or via the K2 menu item if you are displaying multiple categories form that menu item.
To assign the Newscycle template to your k2 categories and items you need to edit the category and apply the Newscycle K2 template as per the screenshot below:
Starting with Newscycle from a fresh installation of Joomla
Although the this Joomla template is a simple design the default Joomla sample data doesnt quite do it justice and so here are a few steps to do if you are installing this Joomla template into a default Joomla installation.
Newscycles to install.
Essential Newscycles
- Install the Zen Grid Framework
- Install the template and set it to default
- Install the JB LIbrary plugin and enable it in the extensions > plugin manager
- Install JB Slideshow
- Install Microblog
- Install the JB BB Code plugin (For two line menus)
- Install K2
Modules to unpublish
- Disable the module title in the breadcrumb module.
- Disable main menu items except for home menu item.
- Disable the core banner module in the footer position.
- Disable the core footer module in the footer position.
- Unpublish modules published to the left module position.
Change the position of some elements on the page
- Move main menu to the menu position and make sure the module title is disabled.
At this stage you should have a pretty simple and straight forward site to start creating your site from. It's important to remember that the slideshow 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.
Troubleshooting
Are you using the latest version of the Zen Grid Framework?
Oure is only compatible with v1.1 + of the Zen Grid Framework
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 and that there is only one version of the jQuery library loading on your page.
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.
