This template comes with three different content variations. The Construction (yellow) which is the default, the Medical (light blue) and the Technology (blue). You can choose the one you like to use through the option Content Variations under the Template Specific tab in the Template's parameters.

Setting up our demo

This template has three different layouts for listings and three different layouts for item pages.

The first category layout in use is the Default. It is used for the categories Skyscrappers, Sports Facilities, etc. For this list layout we need four Secondary items with Small image size photos in a single Column.

The next category layout in use is based on the Default layout, but has different settings in order to show as a Grid. This layout is used for the Bridges section under K2 Categories. For this layout we need six Primary items with Medium image size photos in three Columns. Another parameter that is very essential and cannot be ignored, is to give the pageSuffix gridView to the menu item pointing to that Grid category.

The last category layout is that of the Blog section. For this list layout we need two Leading items with Large image size photos in a single Column.

What we also used in this template is a different item layout for the Default K2 template. While the default item page consists of an image slideshow at the top and the item image on the left of the introtext (as shown on the K2 Item page of the demo site) OR no image slideshow on top and the item image in that position instead (as shown in a blog's item page of the demo site), this item's layout shows all images on the left and all other content on the right of the page (as shown in K2 Item -> Images on the left item of the demo site).

Image Sizes

The following image sizes are recommended for this template:

  • XSmall 100
  • Small 273
  • Medium 353
  • Large 725
  • XLarge 1096
  • Generic 353
  • Category Image 100
  • Avatar Size 100
  • Commenter Image 122

Module Suffixes

  • .floatLeft, .fLeft adds a float:left to a block.
  • .floatRight, .fRight adds a float:right to a block.
  • .center, .text-center adds a center alignment to a block.
  • .left, .textLeft adds a left alignment to a block.
  • .right, .textRight adds a right alignment to a block.
  • .radialGradient adds a radial Gradient to any background, like the one used in the menu bar on the Construction and Medical themes or thee one used in the header's inner pages.
  • .sidebarModules adds a shadow and a border right under the module title.
  • .sidebarBoxes is used along with the color suffixes below and shows the module as a box also with the shadow and border right under the module title.
  • .darkGrey adds a dark grey background (#3c3c3c) for both Construction and Medical themes and a black background with 0.5 opacity for the Technology theme.
  • .lightGrey adds a light grey background (#f1f2f2).
  • .white adds a white background (#ffffff).
  • .shadow adds a shadow image at the bottom. It is used only on the Technology theme.

Template Specific Module overrides

K2 Content Modules
  • 3Column
  • 3ColumnFeatured
  • 3ColumnWithIconOnTheLeft
  • ImageSlider
  • LatestBlogEntries
  • LatestItems
  • Quotes
  • Slideshow
NuContent Modules
  • 3Column
  • 3ColumnFeatured
  • 3ColumnWithIconOnTheLeft
  • ImageSlider
  • LatestBlogEntries
  • LatestItems
  • Quotes
  • Slideshow

Extra fields

For better content management we have set up some Extra Fields that are associated with specific categories.
Let's start with the Quotes category. The Quotes category is associated with the Quotes K2 Content Module which is located in the Homepage of the Demo site, as well as in the inner pages, titled "Words from our clients".
For this category we have set up an Extra Field Group called Quotes which includes two Extra Fields, the Quoter and the Quoter Details.

Another set of Extra Fields that is used for the Projects section is the Project Details Group. This group includes the following fields: Year, Client, Visit the site, 4 image fields for the item Slideshow (Slideshow Image 1-4).
All Extra Fields in this group are shown also in the category listings and modules, if enabled, except the image types. To set up the item Slideshow just go to the Extra Fields tab in the item's page and fill in the 4 image fields with images selected from the image folder (in the demo site the folders are images/projectSlideshow/project01, images/projectSlideshow/project02, etc.). The preferable width for the images is 1096px.
If you need to use the item layout that uses the images on the left of the content, you will have to apply this Extra Field group to this category, also, and fill in the 4 image fields accordingly.

Notes: It is important to fill in the image fields from 1 to 4 and leave no blank fields in the middle, i.e. don't start with image No 2 and continue with No 4. Make sure you keep a correct order for these fields. If you need to use less images just leave blank the last fields. If you leave blank all image fields, the item image will show in the slideshow's position instead.

The Slideshow in the Homepage also uses Extra Fields. The Extra Field Group applied to this category is the Slideshow. It contains two Fields, the Title and the Tagline. The image used is the item image.

Use of page Heading

In the demo site, in all inner pages on the header, on the right there is a title. This title is the page heading and is located in the menu item under 'Page Display Options'.

Joomla Content Component

All K2 category layouts can also be applied to the Joomla Content Component. To set up the layouts for the Category Blog - List and the Category Blog, the Leading items are used in a single column. The Category Blog however, needs the page suffix catArticleViewIsBlog. The Category Blog - Grid uses six intro items in a three column grid. This layout, like the K2 Grid layout, also needs the page suffix gridView.

Newsletter module

This template uses the TinyLetter Subscribe by JoomlaWorks extension as a newsletter mechanism. All you have to do is open a free account to TinyLetter and add the username in the module parameters.

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