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