Fotis

Fotis

22 10 2014

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.

 

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:

  1. You should create a new menu called something like 'Social Menu'.
  2. In the menu you must setup a new menu item as an external link with the appropriate link and title.
  3. 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.

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.

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.

  1. 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.
  2. 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.*
  3. 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.

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

  1. Install K2 Component. Go to the Extensions Manager and install the latest version of the K2 component. Download it on getk2.org.
  2. 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.
  3. 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.
  4. 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. 
  5. 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.

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.

  1. 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.
  2. 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.
      • For the Logo, read here on how to customize it.
      • The Tagline has a predifined position on each template. Read here for more.
      • The App Icons can be handled through the appropriate fields. Read here for more.
    • 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.
  3. 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.
  4. 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.

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.

  1. 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).
  2. 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.
  3. 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. 
  4. 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.
  5. 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.
  6. 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.

 

22 10 2014

Before you start with the nuContent plugin setup, go to the Downloads section and download it. The Quickstart package already includes this plugin, so if you choose to use it, there is no need downloading it.

Installing nuContent Package

  1. After logging in the backend of your site, go to the Extensions → Extensions Manager, click on Browse button, locate the .zip file and click on Upload & Install button.
  2. After the success message you can start setting up. Begin with setting up the Plugin first and move on to the Modules afterwards.

Setting up nuContent Plugin

The nuContent plugin, is located in Extensions → Plug-in Manager as Content - NuContent. It has two set of options. The Basic and the Advanced.

In Basic options you can set:

  • in which categories to render the plugin
  • the image sizes to use in your content views. The image sizes available are: XS, S, M, L, XL, like K2. You can select which size you want to render in the listing pages and in the article pages. After putting the options needed, SAVE them and then click on the Import Joomla articles button, located under Maintenance header. It is very important to enter all options for the images and SAVE first, before clicking the import button.

In the Advanced options there are also some set of options that add extra functionality such as:

  • the latest from user X articles,
  • the X number of articles that are related by tag with the one you are viewing and
  • the use of DISQUS as your comments mechanism.

Note *: It is advised to enter all or some of your content first and click on the Import Joomla articles button through the plugin afterwards. If something like that is not possible, use the Regenerate Images option under Maintenance in the plugin parameters.

Setting up nuContent Modules

Along with the nuContent plugin, a set of modules with pretty similar structure and functionality with K2 modules are provided. The available nuContent modules are: nuContent Comments, nuContent ItemsnuContent Menu, nuContent Tools and nuContent Users.

The nuContentComments module includes the following two options: Latest Comments, Top Commenters, like the K2 Comments module. The difference is that the nuContentComments module fetches its content through DISQUS.

The nuContent Items module fetches articles of all/specific categories or specific articles. It has multiple parameters which are similar to those of the K2 Content Module and can be seen through the screenshots below.

The nuContentMenu module could be used to substitute the Menu Module of Joomla.

The nuContent Tools module includes the following options: Archive, Authors List, Blog style - Calendar, Breadcrumbs, Categories List (Menu), Category Select Box, Search Box, Tag Cloud, Custom Code. Depending on which one you choose, you need to set the appropriate parameters. The available parameters are shown to the screenshots below.

The nuContent Users module shows all or specific users/authors with their details (name, avatar, e-mail) and a number of the items they have written.

Depending on the template you are using, visit the demo site, locate the module you want to use and advise the template's documentation or Visual Walkthrough for the appropriate setup.

Note **: In order for the tag cloud option in nuContent Tools module and the tags in nuContent Items to work, you will have to edit the content plugin we described above andclick the Import !Joomla Articles button. The Meta Keywords field of each article is used for the tags and tag cloud.

Note ***: For Joomla 3.1 you can either use the Meta Keywords field and render those tags through the nuContent plugin, or you can just use the Tags field and get the default Joomla functionality of the tags.

There are some steps you need to follow in order to install the template package.

  1. Login to the backend of your site.
  2. Go to Extensions → Extensions Manager, click on Browse button, locate the .zip file of the template you have downloaded and click on Upload & Install button.
  3. After the success message go to Extensions → Template Manager, locate the template you just installed and edit it. Check all parameters and fill in where needed. For more details on that, advise each template's documentation or the Quickstart package you have downloaded.
  4. Once done with that, Save your changes by clicking on the Save button.
  5. As a last step, make this template the Default one. To achive that, choose it from the list and select the Make Default button from the menu on the top of the screen.

Note: If you are using the Quickstart package always update the template package as it may contain changes.