The Quickstart Package includes a full Joomla installation with K2 (both latest versions) and sample data, exactly how you see it in the demo site of each template, in a single .zip file. Every template has a Quickstart Package for the latest version of Joomla (3.x at the time of writing).
The installation is similar to that of a Joomla installation. You just need to follow these steps.
- Get the Quickstart package for the template you wish to use and upload the .zip file to your server using your prefered FTP client or throught a control panel's file manager (cPanel, Plesk and others have one).
- Unzip it. If there is no such capability through your host, you can use the Akeeba Kickstart archive extraction script, extract the Akeeba Kickstart files locally and then upload the extracted files in the same folder you uploaded the .zip file of the Quickstart package.
For a more detailed description about how to use the Akeeba Kickstart method, read here. - If you haven't already set up a MySQL database, now would be a good time to do so. Do not forget to set the database collation to UTF-8 (utf8_general_ci). Note down the database name, user and password as they will be needed during the installation process.
If your hosting is based on cPanel this tutorial will help you. - Open a web browser and navigate to http://www.mysite.com/installation/index.php OR to http://www.mysite.com/kickstart.php if you are using the Akeeba Kickstart method, substituting the www.mysite.com with your site's domain name.
- Follow all steps with caution and fill in where needed. Do not forget to substitute the database settings with your own. Also, in the last step it is recommended to click on the Remove the installation directory button as shown in the last screenshot below. If you have used the Kickstart extraction script, close the last step's window and click on the Clean up button in the window where Kickstart is still open.
- Once everything is set correctly, you should be able to see the frontend and access the backend of the site.
You can now browse through every element and start your customization.
Note: The Quickstart package requires PHP 5.3. If you have an older version installed in your server then you will have to follow the manual installation of the package.
All our templates have a set of Template Parameters that need to be taken into account. Some have specific functionality added through these parameters. That extra functionality is mentioned in more detail in each template's documetation. To edit the template parameters you need to follow the steps described below.
- On the backend of your site, go to Extensions → Template Manager. Locate the template and open it. You will notice multiple sets of parameters divided in three tabs, that need your attention.
- The Standard Tab consists of Branding, jQuery Handling, Custom CSS & JS, Google Web Fonts, Meta Tags, Credits & Copyrights, Google Analytics Integration, Webmaster Tools and Social Links.
- The Branding consists of some simple parameters used in the template, like the Logo (image or text), Tagline and App Icons.
- Through the jQuery Handling you can choose whether or not to load the library and if load it, which version of it.
- You can choose whether or not to use the Custom CSS and JS files provided through each template. These two options is advised to stay Enabled and of course used on any modification you want to apply in order not to lose any changes when you update the template. Read more about them here.
- On each template we have pre-selected the Google Web Fonts used. You can change that through this option. If you want to select more than one just Shift + Click the ones you want.
- The Meta Tags section is handling the Meta information used in the <head> section of each template.
- In the Credits & Copyrights section you can add your site's credits and copyrights. This information is used in the site's meta tags and footer.
- In the Google Analytics Integration section you can add the Google Analytics tracking code without the use of any third party extension.
- Through the Webmaster Tools section you can verify your site on the most popular search engines to enable faster content crawling. The IDs you enter are appended as special meta tags in the <head> section of each template.
- Finally, through the Social Links section you can handle all social profile URLs. You can see in which template this social information is rendered through each ones Documentation or Visual Walkthrough.
- The Code tab consists of some blocks where you can add custom HTML, CSS or JavaScript code to your template's output, without using third-party extensions either in the <header> or <body> (in the beggining or end of body tag) of each template. Each one explains the exact location it will load.
- The Template Specific tab varies per template and contains information about Highlights, Color Variations, Content Variations, Category Colors or Tabs. In each template's documentation you will find a reference with which ones are used per occasion.
For adding custom analytics code to your site click here.
All templates use the K2 Component as their basic content manager. Here are some basic quidelines of how to install and set it up correctly. For more details on each template's specific setup, please advise its documentation, Visual Walkthrough and the demo site or Quickstart package.
- Install K2 Component. Go to the Extensions Manager and install the latest version of the K2 component. Download it on getk2.org.
- Setting up K2 General parameters. After a success message, navigate to Components → K2 and from the toolbar on the top right corner, select the Parameters Button. This will open a modal window with the general K2 parameters you have to set up according to your needs. One of the parameters that needs to be set before any item addition are the Image sizes. Here are the available sizes for all K2 views and modules: XS, S, M, L, XL, category image, user image, commenter image. Advise each template's documentation located in this section or the Quickstart package for the recommended sizes.
- Setting up K2 Categories. Create your category tree in K2 Categories, which will be according to the structure of your site. Set the parameters in your categories, advise the Visual Walkthrough of each template or the Quickstart package, in order to view the resulting pages you see at the template's demo site. It is recommended to keep the parameters in one root category and set all others to inherit from that one. In most of our Quickstart packages the setup categories are marked with "DO NOT DELETE" on their name for better reference. The parameters differ between templates according to structure and features.
- Adding K2 Items. After you have set all parameters up, you are ready to add K2 Items. According to the needs of each template, several K2 Item elements are used. These elements include Image, Image Gallery, Media, Extra Fields, Attachments. On each template's documentation, Visual Walkthrough or the Demo site, there is a more detailed reference of the ones being used on each template.
- Setting up K2 menu items. Your available options are between views of: Item, Category/Categories, Latest items by tag, Latest items by user, Tags list, Author list. The item view gets its parameters from the category it belongs. The category also gets its parameters from the category, while there is the option to multiselect categories and set the list parameters for them. You can also override the ordering of the Category parameters through the menu item. The author and tag lists get their parameters from K2 general parameters. The latest from user/category views are the only menu item views that have their parameters here instead of a category or the general K2 parameters.
Please note that all the above steps should NOT be followed if the Quickstart package is used. All setup has already been made according to each template and should work as a guide for your own customization.
For more information about K2 functionality, visit getk2.org.
K2 component has its own set of modules you can use to filter your data in specific positions. These positions differ between each template and you can see them either through the demo site of each one or under each template's documentation visual walkthrough.
The available K2 modules are: K2 Content, K2 Tools, K2 Comments, K2 User and K2 Users. Below there is a brief reference to each one, in order to familiarize easily and decide which one meets your needs.
- The K2 Content module, allows a specific number of items filtered by category or specific items, to show with a specified ordering. Some of the available options for the items shown are: Title, Image, Author with author avatar and author description, Introtext with the option of limiting the text, Tags, Category, Created Date, Read...More, Extra fields, Comment counter.
- The K2 Tools module is a multi-functional module that comes with the following view options: Archive, Authors List, Blog Style Calendar, Breadcrumbs, Categories List (Menu), Category Select Box, Search Box, Tag Cloud, Custom Code. Each one of these view options is accompanied by a set of options which need to be taken into account in order to reach the desired outcome.
- The K2 Comments module is used to show the Latest Comments or Top Commenters. This module, like the K2 Tools module, has options according to the chosen view.
- The K2 User module is the equivalent of the Joomla Login module. Besides post-text, pre-text, login and logout redirections, greeting and name/username display, K2 User module also provides a text for the Greeting message, instead of a default message pre-defined, a user avatar and the option to render a Menu for the logged in users.
- The K2 Users module shows all or specific number of users/authors with their details (name, avatar, e-mail) and a number of the items they have written.
On each template we have used the ones we think are appropriate per theme, but you can select which ones you prefer according to your needs. All position names are specified through the template's name_position on the site, i.e. nuMovies_sidebar, for better reference when multiple templates are installed in your system.
Note *: All K2 modules used on each template have specific setup. You should advise either the Visual Walkthrough or the Quickstart Package in order to achieve the result shown on each one.
All templates also support the default Joomla content management system. Here are some basic quidelines of how to set it up correctly. For more details on each template's specific setup, please advise its documentation, visual walkthrough and the demo site or quickstart package.
- Setting up General parameters. Start by going to Content → Article Manager. Click on the Options button, on the top right corner, to set up the Content general parameters. One parameter you should also Enable (not required) is the 'Frontend Images and Links' on Editing Layout tab. This option provides a flexibility in the article image which could either be the same for the introtext used on lists and the fulltext on the article page or different and is required if you are using the nuContent Plugin.
- Adding Content. After setting up the general options, create the Category tree and add articles. In each article you can add meta-keywords and use them as tags either on your lists or your article pages, as well as the Article Image through the 'Images and Links' Slide located on the right of the Editor.*
- Setting up the Menu items. Unlike K2 menu items where all parameters are primarily located in the Category itself and secondarily to the menu item, the content menu items have all set of parameters for the final result page in the actual menu item. Set the menu item parameters according to each view you select. The available content menu items are: Article, Category Blog, Category List, Archived List, Featured List, List of Categories. The home page item is by default the Featured list, but you can choose to change that through the menu parameters.
Note *: For Joomla 3.1, you can either use the meta-keywords as tags which are rendered through the nuContent Plugin or you can use the Tags field and have the default Joomla functionality.
Please note that all the above steps should NOT be followed if the Quickstart package is used. All setup has already been made according to each template and should work as a guide for your own customization.
Use of responsive classes
As you already know all our templates are fully responsive. What happens if you want some modules or elements on the template to be visibile only on large resolution or only on mobile phones?
The solution actually is quite easy. All you need to do is use the following classes either as a module suffix or directly on your HTML code.
The following classes hide elements or modules on different viewports.
.hide-on-small-phones - Hides your element only on smaller viewports. Below 320 pixels.
.hide-on-phones - Hides your element on viewports smaller than 569 pixels.
.hide-on-tablet - Hides your element on viewports ranging from 569 up to 800 pixels in width
.hide-on-desktop - Hides your element on desktop viewports. 801 pixels and up.
The following classes show elements or modules on different viewports.
.show-on-small-phones, .show-on-phone, .show-on-tablet, .show-on-desktop.
Remember you can always use these classes with the .hidden class, in order to avoid writing any unnecessary CSS code.
Examples
If you want a module to be shown only on viewports below 320px you can use the .hidden and .show-on-small-phones classes as the module suffix. Please note that you have to use the show-on- class last.
The same applies if you want an element to be printed or not or even to be shown only on the printed page. You can use the .hide-on-print and .print-only classes.
Other layout classes
Most of the templates use different classes for their layouts but some classes are common for all templates.
A basic HTML/CSS knowledge is required for the use of these classes.
.alpha - This class always floats your element or module to the left with no left margin.
.right - This will float your element or module to right with no right margins.
.floatLeft and .floatRight will float your element but the will not alter any margins.
.clr you can use this class as a suffix or as a div like <div class="clr"></div> to clear any floating elements.
Editing Files
The css files that are included in each template are k2.css for the K2 Component and its modules, and template.css for everything else. Since nuModusVersus template (mid July 2013), though, we provide all styles in template.css file and the color variations in colorvariations.css file.
All template.css files contain a Table of Contents to use as a guide.
It is advised to make any modifications or additions in the custom.css file. That way you won't be losing any of your changes upon update.
Apart from the Joomla 'traditional' menus we have implemented a social menu for the templates.
Instead of using template parts which are not as versatile as modules or using custom HTML modules which are not very user fiendly, we created CSS classes for our menu items.
What to do:
- You should create a new menu called something like 'Social Menu'.
- In the menu you must setup a new menu item as an external link with the appropriate link and title.
- Now head on to Link Type options and on the Link CSS Style field type in the class linkIs + Sociallink
Example:
For a menu item linking to a facebook account you should add the class linkIsFacebook (look at the visual walkthrough of each template), for a link to a Twitter profile the class should be linkIsTwitter.
Please Note that the name of the social media network should always be capitalized.
The templates cover the majority of big networks such as linkedin, google+, flickr, youtube, etc. You may also use the linkIsRss and linkIsMail classes.
In all our templates we use the Simple Image Gallery Pro extension by JoomlaWorks as our image gallery mechanism. This component supports six different layout templates which can be overridden to the template. Additionally to that, we have implemented one more layout for each template named after the template's name. All you have to do is select it through the component's parameters. You can find the reference in each template's documentation.
For two of our templates (nuMovies and nuFashion) we provide styling for the Frontpage Slideshow component by JoomlaWorks as the homepage slideshow as well. This component is accompanied by a module which also supports template overrides. As with Simple Image Gallery Pro, we have implemented specific layout templates for each template. Each template's documentation indicates which module template you should use.
These are commercial plugins and are NOT included in the installation package.
After purchasing the commercial extension from JoomlaWorks and installing it you can choose the appropriate component or module template you want to use according to your needs.
Click here to read about free extensions.
To change the logo and tagline you need to follow the steps below.
- On the backend of your site, go to Extensions → Template Manager. Locate the template and open it.
- 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.
- 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.
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.