Takai

Setting up our Demo

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

It also offers two different K2 templates, one used for the front page and one for the inner pages.

For the home page (where we have a three column layout) we use the front-page K2 template for the item listings.

The Front-page

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

For the front-page we use one column for our leading items and the Large image, two columns and two primary items which use the small image, and two secondary items in a single column layout which also use the small sized images. Finally we have a plain list of four link items in a single column with no images.

The main difference in the K2 templates you will receive lies into the category_item.php files. As you can see from the demo we are using different elements in our leading items and we choose to hide the Item rating, times read, tags, time created and extra fields in the rest of our items. To achieve this we created a different and distinct instance of category_item.php for the leading items called category_item_leading.php. The default category_item.php (used for the rest of the items) does not include the aforementioned elements (Item rating, times read etc). If you choose to override these settings you have plenty of available options.

  • Use the default K2 template
  • Use only leading items
  • Use the category_item_leading in all item groups ( a simple edit in category.php is needed for this )
  • Blog Layout

For the blog layout (blog category not user blog) we simply use eight leading items in a single column and the XL images.

Magazine Layout

For this view we are using the settings found in the Default Item Listings category. We are using the same layout as the index page one column for the leading and the secondary items and two for the primary items. The only significant change is that we are using larger image sizes. (XLarge for leading, Medium for Primary and Small for the secondary items ).

Catalog Layout - Parent Category

This view inherits its settings from the Default Catalog Parent category. It is ideal for a catalog/e-commerce site where you need to list all of your subcategories and not your items.
This view has (0) zero items for all of its groups and has the Sub-category blocks visible.

Catalog Layout - Children Categories

The catalog listing view used in our demo uses a two columned layout for each of the item groups and no (0) links. The ideal image size for this layout is the medium one.
The settings can be found Default Catalog Listing category in the quick start package.
Please note that this layout requires the catalog mode to be enabled in order to function properly.

Menus

From the demo site you can see this template offers vertical menus. This template also offers horizontal menus.
All you need to do is use the horizontal-menu as your module suffix.
Please note that you have to enter one module suffix in your menu module instances.

Image Sizes

The following image sizes are recommended for this template:

  • XSmall 100
  • Small 210
  • Medium 320
  • Large 480
  • XLarge 670
  • Generic 310
  • Category Image 194
  • Avatar Size 200
  • Commenter Image 48

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.
  • .sideModule Use this module class to any new modules in your sidebar

Visibility Classes

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.

Template Specific Module Overrides

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

Clean - to be used for a cleaner layout
Lists - to be used for item listings e.g. the Popular Blog Posts module located in the sidebar.

Extra Fields

For demonstration purposes we are using some extra fields displayed in regular K2 items.
You can see them here demo.getk2.org/item.

For catalog items we are using the variations extra fields group which contains the color. size and price variations.

Both groups are displayed using the same template and use the default loop in our item.php.

Color Variations

This template comes with nine (9) preset colour variations and the option to use your own custom colours.

Setting up the tabs

In the sidebar (right bar) you will notice in the demo the presence of a tabbed module.
These tabs are hardcoded in our template. All you need to do in order to get them working is to assign a module to these positions getK2-Tab1,2 and 3 and then naming the tabs.

After assigning the modules to those positions you will notice that the tab headers have not been changed. Due to the limited space and wanting to preserve a somehow logical module naming, the tab headers are NOT the module titles.
To name the tabs go to Extensions → Tempate Manager, locate your template, click on it, and name the tabs through the appropriate fields on the template parameters.

Block Grid

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

Icon Fonts

We have included the Entypo family from fontello in this template. The stylesheet is embedded with the main template.css file.

Additional Components

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

  • com_contact (form only)
  • com_users ( all views )
  • 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. takai.

Visual Walkthough