Fotis

Fotis

Setting up our demo

This template has two different layouts for listings.
One for the frontpage and one for the category/categories.

For the frontpage grid layout we need:

  • one Leading item with a Large image in a single column,
  • two Primary items with Medium images in two columns,
  • four Secondary items with Small images in four columns,
  • four Link items with XSmall images in two columns.

The grid layout of the frontpage inherits its parameters from the menu item.

For the category listings we use six Primary items with Medium image size in a single column.

Image sizes

The following image sizes are recommended for this template:

  • XSmall 100
  • Small 178
  • Medium 386
  • Large 594
  • XLarge 900
  • Generic 386
  • Category image 100
  • Avatar size 100
  • Commenter image 48

Module suffixes

This template uses the basic suffixes as described here.

Template specific module overrides

Apart from the Joomla Content, K2 Component and all its modules, we have one very specific K2 Content Module override, the Video gallery. You can use this if you want a video gallery like the one on the Demo site's frontpage.
Remember this is only available if you are using the K2 Component and not the default Joomla Content.

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

Visual Walkthrough

This template comes with three different color variations. The Turquoise/Red which is the default, the Purple/Blue and the Green/Orange. You can choose the one you like through the template parameters under the option Select Color Variation in the Template Specific tab. You can also create your own color variation by choosing the colors for Custom color 1 and 2.

Setting up our demo

This template has two different layouts for listings.

The first category layout in use is the Default. It is used for the Blog category listing. For this list layout we need five Leading items with a Large image size.
The next category layout in use is based on the Default layout, but has different settings in order to show as a Grid. For this layout we need eight Primary items with Medium image size photos in two Columns. Another parameter that is very essential and cannot be ignored, is to give the page suffix gridView to the menu item pointing to that Grid category.

Image Sizes

The following image sizes are recommended for this template:

  • XSmall 70
  • Small 270
  • Medium 560
  • Large 770
  • XLarge 900
  • Generic 270
  • Category Image 70
  • Avatar Size 48
  • Commenter Image 70

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.
  • .greyBox is used to show the module as a box with the #ececec background color.
  • .box is used to show the module as a box with the #f8f8f8 background color.

Template Specific Module overrides

K2 Content Modules
  • ImageOnly
  • LatestBlogPosts
  • Quotes
  • Slider
  • 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 "What client's say?".
For this category we have set up an Extra Field Group called Quotes which includes one Extra Field, the Quoter Name. For the quote itself the introText is set up to show.

Another set of Extra Fields that is used for the Clients category is the Clients Group. This group includes the following fields: Image, Link. The image type extra field is used instead of the item image itself in order to provide some kind of freedom in the image sizes used. The link extra field is used in case the image wants to point to a specific webpage. This category is used for the Slider in the demo's Home page.

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, the Leading items are used in a single column. The Grid uses eight intro items in a two column grid. This layout, like the K2 Grid layout, also needs the page suffix gridView.

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

Visual Walkthrough

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

Follow the steps below in order to install the Quickstart Package manually.

  1. Extract the .zip file to a web-accessible folder in your server (usually inside /public_html).
  2. At the folder (directory) where you previously extracted the .zip file create a file named "configuration.php" using the contents from here: https://github.com/joomla/joomla-cms/blob/staging/installation/configuration.php-dist
  3. Setting up the database:
    • In the folder installation/sql you'll find the database files of the Quickstart package. You will have to rename the ones referenced as joomla.s01, joomla.s02, etc. to joomla01.sql, joomla02.sql and so on. The files referenced as joomla.s0x could be more than one depending on the package.
    • Download the files joomla.sql and the ones you renamed (joomla01.sql, joomla02.sql, etc.) locally.
    • Open phpMyAdmin and select the database in which you will import the data.
    • Import all .sql files.
    • You will notice that the tables have #__ as prefix. Select them all and from the "With selected:" filter choose "Replace table prefix. Enter the #__ as the one in use now and the new prefix of your choice, i.e. vtwiq_, as the new one and click on Submit.
    • You will also have to change the admin password in order to have access to the site's backend. Locate _users table and Edit the Administrator user. Erase the password field and put your own. Before Saving, choose through the "Function" select the "MD5" option.
  4. Setting up the configuration
    • Open the file configuration.php you previously created.
    • Enter the correct database credentials, $user, $password, $db, $dbprefix.
    • Change the $log_path and $tmp_path to correspond to your own.
    • Take a look at the notes from the original file you copied from the Joomla repository on GitHub. Adjust/fill-in accordingly.
  5. Remove the installation folder.
  6. Visit your site and access the backend using /administrator.
22 10 2014

Every Quickstart package apart from K2 contains other free extensions that are already installed and bundled in the package.

All of our packages contain the following free extensions:

  1. Admin Tools by AkeebaBackup
  2. Akeeba Backup by AkeebaBackup
  3. AllVideos by JoomlaWorks
  4. Cache Cleaner by NoNumber

Depending on the template extensions like TinyLetter Subscribe may be included. Make sure to check each template's documentation to check if any additional extensions are included.
Click here to read about commercial extensions.

This tutorial will help you clarify the differences between installing, setting up and upgrading.

If you have followed our tutorials you will have already a fully functioning site with content. If you are familiar with HTML/CSS you have propably added your own custom styles.
But what happens when a new version of the template comes out? Do you need to backup up your work, upload the new template and start patching or FTP'ing files?

Fortunately, you don't need to do any of these tasks. When a template upgrade is published (eg. v1.0 to v1.1) you will have a quickstart package for new installations, the standalone template files and the upgrade pack.
The upgrade contains all the template files apart from index.php (to preserve changes if you have new module areas), custom.css and custom.js files.

Just download the quickstart package and you can safely upgrade to the newest version without the fear of losing any changes.

All files or folders that have changed or added in the newer versions are mentioned in detail to each template's download page under Changelog to help you keep track of the changes in case you have modified some other file besides the three mentioned above.

Note: For more information on installing Joomla templates read this tutorial.
Note: For more information on installing the Quickstart package read this tutorial.
Note: For more information on customizing your stylesheets read this tutorial.

22 10 2014
  1. The favicon is located in the root of each template folder, i.e. templates/nuFashion/favicon.ico. Just replace the the existing favicon with your own. You can generate it through various applications or online tools, such as http://www.degraeve.com/favicon/. The favicon size should be 16x16.
  2. Since version 1.0.1 of our templates, the App icons setup is located in the Template Parameters under Branding of the Standard tab. You can select or upload your App icons through the corresponding field for each of the following sizes. The images have to be in a .png format and not precomposed.
    • 57x57 - for iPhone and iPod touch
    • 72x72 - for iPad
    • 114x114 - for high-resolution iPhone and iPod touch
    • 144x144 - for high-resolution iPad

    An online app icon generator you could use is http://makeappicon.com/. For more information on iOS icons take a look here.

At this point you will have probably noticed that we use only two CSS files (or three depending on the template), one for K2 (k2.css), another one (template.css) for everything else and in some cases the colorvariations.css file.

We also use one javascript file, the behaviour.js.

But what happens when you want to make minor changes but still want to keep getting updates without breaking something?
The answer is very, very simple. In all of our templates you will find a file called custom.css under the css folder and a custom.js file under the js folder.

These files are by default empty and render after the template's stylesheets and javascript files. All you have to do is edit those file and add your custom code.
When you upgrade the template (using the upgrade package) you will notice that your custom styles have remained intact while getting the newest version of the template.

By default all of our templates have options for Google Analytics.
Go to the template's parameters (Extensions → Template Manager → Your Template) and enter your Google ID and domain (without www.) on the Google Analytics section.

If you wish to use another service, like Quantcast or comScore you need to publish a new K2 Tools module (custom code funtionality) with your code in the TEMPLATENAMEHERE_statistics position.
This position will render directly above the closing <body> tag.

22 10 2014

To change the logo and tagline you need to follow the steps below.

  1. On the backend of your site, go to Extensions → Template Manager. Locate the template and open it.
  2. Under the Standard tab there is the Branding section. There are three options for the Logo. You can either use it as text or as an image and add an alternative text when using the logo as image.
    • If you choose to use it as text, just use the 'Text as logo' field and type in. The logo will appear with the Google Font we have pre-selected on each template.
    • If you choose to use it as an image, you can use the 'Logo image' field, upload it in the images folder and select it. The image field overrides the Text field even if it is filled in.
    • On the 'Alternative text used for the logo image' field just put on the alternative text you want for the logo.
  3. To change the Tagline, just type the prefered text in the 'Your site's tagline' field. On each template's demo you can see which is the predefined position for the Tagline. If you don't want to use it at all, just leave the option blank.