This template comes with six bundled colour variations, plus one fully customisable by you. You can choose the one you like to use through the template parameters under the option Colour Variations located in the Template Specific tab.

Setting up our demo

As you can see from the demo site, the frontpage consists of K2 modules. For the component view there are two available views you can choose. One is the blog view and the other the portfolio gridded view.

The Front-page

There are numerous options and module positions to use for your frontpage. You can advise the Visual Walktrough in order to check and identify all available module positions for each of the elements you see in the demo's frontpage. 

Using the Homepage settings

Through these settings you can enable or disable two specific blocks to show or not in your frontpage only. These blocks contain the Moto and Tagline (you have to enter them under the Standard tab in the Template parameters) and a dynamically generated scrolling menu according your published modules in this page.

Slideshow Settings

For the Slideshow module we have also setup some extra parameters in order to provide you more flexibility.

You can control the slideshow’s animation speed, the time interval, as well as the image ratio through the Slideshow Settings section under the Template Specific tab in the Template parameters.

An example: Let’s say you have 640x480 sized images and you want the slide to remain visible for five seconds while the animation lasts for one second.

In this case you need to select the 4/3 image ratio, 5000 as the interval time and 1000 as the animation speed. All time settings should be in milliseconds. 

Portfolio Settings - Module Parameters Limit

Through the template’s parameters you can also control the limit of the the items that are initially loaded in the "Our Work" and "Case studies" modules. The default limit is 6. 

Portfolio Settings - Image ratio

One important setting is the image's dimension ratio. You can globally control both your module's and component’s image dimension ratio. This means that you can have images with equal heights for your portfolio and case study modules, as well as, your portfolio K2 category.

Using the highlight section

In the demo site you might have noticed the "Services" section. This section, which appears in the frontpage only, can be enabled and edited through the Highlight section of the Template’s parameters.
In this section you can enter or edit each block’s title, description, link, and icon or image.

Note that for all icons, both in this section and throughout the template, we are using icon fonts so your site will be both lightweight and retina ready

Custom headers

Gor the Highlights section "Services", described above, and the Footer three block section, "Contact", the titles can be applied/changed through the Custom Headers section in the Template's parameters.

Custom modules

The Contact Information module - http://extensions.joomla.org/extensions/contacts-and-feedback/contact-details/1681 has been used for creating the module in the footer.

Menu Modules

This template uses two different menu modules. The default one, which is the one you see in the demo site and the one that is enabled in the quick start package, and the horizontal. You can use the horizontal menu by simply publishing your module at the archetype_Menu2 position. You can use both menus for your site's main navigation, although not at the same time. 

K2 General Settings

For this template's layout we have used only the Leading items. You can use the primary or secondary items, as well, if you want to further separate the grid. All item views use the Large image size.

Blog Layout

The blog layout uses it's own K2 category settings. For the demo site, we have used four Leading items with Large sized image in a single column. 

Portfolio Layout

For the portfolio layout we have used fifteen Leading items with Medium sized images in three columns.

Extra Fields

This template offers several extra field groups. One group, called "User Details" in the quickstart package, is for personal info and links towards social profiles. You can see these fields in "Our team" module. Another one, used in the Blog K2 category of the quickstart package, called "Article", is used to provide a subtitle in the K2 items and finally, the other two groups, cover your portfolio's needs. The noteworthy field is the "Additional Information" field. You can use this to add additional images or additional galleries in your portfolio items. 

Using the contact form in your template like the demo site.

In our demo site you might have noticed that we have included a contact form in the footer. To embed a similar contact form you need to follow these simple steps.

Setup a menu with a contact menu item (like the quickstart package).
In the module parameters you need to specify a menu ID. This id will trigger the functionality and open the contact form. You need the "actionMenu" id.
Now you need one final setting which is equally important and should not be skipped.
In the single contact parameters you need to specify and manually enter the Contact Redirect setting. Normally this would be the menu item’s link with &tmpl=component at the end.

Example Link: index.php?option=com_contact&view=contact&id=1&tmpl=component

Image Sizes

The following image sizes are recommended for this template:

• XSmall 100
• Small 200
• Medium 600
• Large 900
• XLarge 900
• Generic 900
• Category Image 100
• Avatar Size 100
• Commenter Image 100

Module Positions

• Archetype_Menu
• Archetype_Menu2
• Archetype_Sidebar
• Archetype_Slideshow
• Archetype_Component
• Archetype_Under_Component
• Archetype_Content_1
• Archetype_Content_2
• Archetype_Content_3
• Archetype_Content_4
• Archetype_Over_Footer
• Archetype_Footer_1
• Archetype_Footer_2
• Archetype_Footer_3
• Archetype_Footer_Full

Module Suffixes

• .left adds a float:left to a block.
• .right adds a float:right to a block.
• .text-center adds a center alignment to a block.
• .text-left adds a left alignment to a block.
• .text-right adds a right alignment to a block.
• .text-justify adds a full alignment to a block.
• .colourHeader adds a yellow color to the module's header.
• .inlineTitle places the module's title inline with the module's content.

Template Specific Module overrides

K2 Content Modules

• 3BlockGrid
• BlogList
• CaseStudy
• Clientelle
• Portfolio
• Slideshow
• Testimonials

Additional Components

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

• com_users
• com_search
• com_weblinks
• com_newsfeeds
• com_tags (if you are using Joomla 3.x)

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

The Grid - for developers and enthusiasts

We are using ZURB's foundation grid for this template. You can find out more about foundation here: http://foundation.zurb.com/

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

Module Grid - for developers and enthusiasts

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.

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 below 767px
• .show-for-small Shows the module in viewports below 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 below 1279px
• .show-for-large Shows the module in viewports above 1280px and below 1440px
• .show-for-large-up Shows the module in viewports above 1280px
• .hide-for-large Hides the module in viewports above 1280px and below 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.

SASS Support

In the template's /css folder you will find a /src subfolder. There you will find all out .sass files.
We have also used Bourbon which is a simple and lightweight mixin library for Sass.
What is SASS: http://sass-lang.com/

What is Bourbon: http://bourbon.io/

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.

Visual Walkthrough