This template comes with two color variations, Light and Dark, plus one fully customisable by you. You can choose the one you like to use through the template parameters under the option Color Variations located in the Template Specific tab.
Frontpage and Categories
The layout in use is the Default for both Frontpage and Category blog pages. For the list layout we need three Leading items with Large image size photos in a single Column. You can also have four Primary items with the Medium size photos in two Columns as shown in the K2 Category page.
In the K2 category lists you will notice a play button on top of some images. This icon appears only for those items that have a video. The video will be visible once the image is clicked on without leaving the category's page.
The following image sizes are recommended for this template:
- XSmall 150
- Small 400
- Medium 600
- Large 900
- XLarge 1200
- Generic 400
- Category Image 400
- Avatar Size 90
- Commenter Image 60
There are two different menu modules in use, each with a different and unique look & feel. You can either use the horizontal menu (as shown in the K2 Modules page of the demo site) or the overlapping menu (as shown in all other pages). To choose the overlapping menu, just enable the menu module in the theConversationalist_Menu position. To choose the horizontal menu, enable the menu module in the theConversationalist_Horizontal_Menu position.
- .floatLeft, .left adds a float:left to a block.
- .floatRight, .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.
- .alpha removes the left padding of the block.
- .omega removes the right padding of the block.
- .noPadding removes the right and left paddings of the block.
Template Specific Module overrides
K2 Content Modules
Please Note: All the module templates are available also for the nuContent extension, for those who choose to use Joomla 's default article system.
Apart from the K2 component we offer CSS styling for the following components
- com_tags (if you are using Joomla 3.x)
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. theConversationalist.
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 900 and 600pixels and a very-small-xx for viewports below 400pixels.
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 the Related items by tag section in the K2 item page. 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 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.
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.