Setting up our Demo

This template offers multiple layouts for item listings as you can see in the demo site.

It also offers three different K2 templates, one used for the front page , one for the inner pages and a variation of the index page (best used in a three columned layout).

The Front-page

If you have already downloaded and installed the quick-start package you will notice all the settings are inherited from the K2 categories.

For the Frontpage we are using a three columned layout. We have published modules both on the newsworthy_left and right positions. We are using the frontpage template with 3 large imaged items. Alternatively you can use a K2 content module (also called frontpage).

Please note: The front page settings are located in the menu item.

Front Page Module/ Component

For the frontpage (available only if you use K2) you can also have a K2 Content module instead of the component view. Simply select the frontpage module template.

Hint. If you want to show its title like the component heading you have to use the .frontPageModule module suffix.

K2 Categories

For the item listing we are using the same setup category with the same settings but with the default template instead.

Category Images

In this template we chose to go with something different. The category image is used as a background to our page 
headings. Using CSS3 awesome properties you can use a single image (a large one preferably above 1000px) and
create a beautiful cover for your headings. If you wish to support IE8 you have to use images as large as the content (1200px for IE8).

Page Headings

The big solid coloured blocks you will see in the demo site containing the title is simply the page heading and/or the K2 category title. You can enable or disable the page headings in the appropriate menu items.

Color Variations

This template comes with nine (4) preset colour variations apart from the default one.

• Black/White
• Gray/Teal
• Orange/Plum
• Yellow/Gray

You can easily change the Color Variation from the template parameters.

Image Sizes

The following image sizes are recommended for this template:

• XSmall 100
• Small 200
• Medium 400
• Large 660
• XLarge 1200
• Generic 300
• Category Image 1200
• Avatar Size 120
• Commenter Image 120

Module Suffixes

• .floatLeft adds a float:left to a block.
• .floatRight adds a float:right to a block.
• .textCenter adds a center alignment to a block.
• .textRight adds a right text alignment to a block.
• .textLeft adds a left text alignment to a block.

Template Specific Module Overrides

In this template we are using overrides for all K2 modules and several for the K2 Content module.

The following templates are available for the K2 content module

• Agenda,
• DontMiss
• Frontpage
• Interview
• Lists (generic styling)
• Popular
• Slider
• Slideshow
• VideoPlayer
• WhiteTipSingleBlock

Please Note: Apart from the VideoPlayer all the module templates are available also for the nuContent extension, for those who choose to use Joomla's default article system.

Module Classes

You can use a lot of preset module suffixes to control your layout.

• .offsetTop - provides a 30px top margin
• .offsetBottom - provides a 30px bottom margin
• .whiteBg - wraps the content in a white background
• .banner300 used for small rectangle banners

Module Positions

• newsworth_Leaderboard
• newsworth_Search
• newsworth_Slideshow
• newsworth_Menu
• newsworth_Breadcrumbs
• newsworth_aboveComponent
• newsworth_Component
• newsworth_Inside_K2_Item
• newsworth_Right
• newsworth_Left
• newsworth_underComponent-1
• newsworth_underComponent-2
• newsworth_underComponent-Half-1
• newsworth_underComponent-Half-2
• newsworth_aboveFooter
• newsworth_Footer
• newsworth_Footer-2
• newsworth_Footer-3
• newsworth_Footer-4

Module Grid

For best results and for maximum control over your responsive layout we have developed a small grid for your sidebar's (mostly) modules.
For the viewports between 900 and 569 pixels you can use the medium-module-1 to medium-module-12 (medium-module-6 for 50% width) as a module suffix.

Breadcrumbs

You have to use the following pageSuffix hasPageHeading for your breadcrumbs module if you also have a Page Title visible.

The Grid - for developers and enthusiasts

In this template we are using Foundation's 12 column grid with a small variation. You have the default large-xx , small-xx classes but we have also included a medium state (medium-xx) for viewports between 1060 and 900pixels.

More info can be found here. http://foundation.zurb.com/docs/components/grid.html

Block Grid - for developers and enthusiasts

We have included Foundation's block grid with some minor alterations and tweeks for modules like the category listings.
More info can be found here. http://foundation.zurb.com/docs/components/block-grid.html

Visibility Classes - for developers and enthusiasts

If you need complete control over your modules in responsive states we 've got you covered. This template uses the power of the The most advanced responsive
front-end framework in the world, ZURB's Foundation.

• .hide-for-small Hides the module in viewports bellow 767px
• .show-for-small Shows the module in viewports bellow 767px
• .hide-for-medium Hides the module in viewports above 768px and bellow 1279px
• .hide-for-medium-up Hides the module in viewports above 768px
• .show-for-medium Shows the module in viewports above 768px and bellow 1279px
• .show-for-medium-up Shows the module in viewports above 768px
• .show-for-medium-down Shows the module in viewports bellow 1279px
• .show-for-large Shows the module in viewports above 1280px and bellow 1440px
• .show-for-large-up Shows the module in viewports above 1280px
• .hide-for-large Hides the module in viewports above 1280px and bellow 1440px
• .hide-for-large-up Hides the module in viewports above 1280px
• .show-for-xlarge Shows the module in viewports above 1440px
• .hide-for-xlarge Hides the module in viewports above 1440px
• .show-for-landscape Shows the module in the landscape orientation
• .hide-for-landscape Hides the module in the landscape orientation
• .show-for-portrait Shows the module in the portrait orientation
• .hide-for-portrait Hides the module in the portrait orientation
• All these classes are located in the template.css and can be easily expanded and/or edited and can be used for every block of your template, not just your modules.

K2.css - for developers and enthusiasts

As you might have noticed this template does not use the default k2.css. We have completely rewritten all the template's styles to be more efficient. In case you download the standalone template package we have included a blank k2.css file in our distribution to avoid 'breaking' you site.

Additional Components

Apart from the K2 component we offer CSS styling for the following components

• com_contact
• com_content
• com_users
• com_search
• com_weblinks
• com_newsfeeds

Commercial Extensions

Simple Image Gallery Pro - After installing it go to the Extension's parameters Layout template for image galleries and choose the one named after the template, i.e. newsworth.

Visual Walkthrough