iReview 2.1 Manual Template for Joomla 2.5 & 3.x
iReview 2.1 Manual Template for Joomla 2.5 & 3.x
Contents
1. Template Overview ........................................................................................................................................................... 1
1.1. Main Features ............................................................................................................................................................ 1
2. Template Installation........................................................................................................................................................ 2
2.1. Installation Steps ....................................................................................................................................................... 2
2.2. Upgrading From iReview 1.x ................................................................................................................................... 2
2.3. Upgrading From iReview 2.x ................................................................................................................................... 2
3. Template Parameters ...................................................................................................................................................... 3
3.1. Layout .......................................................................................................................................................................... 3
3.2. Styles ............................................................................................................................................................................ 4
3.3. General settings ........................................................................................................................................................ 5
3.4. Scripts .......................................................................................................................................................................... 6
3.5. Social Media................................................................................................................................................................ 7
4. Module Positions .............................................................................................................................................................. 8
4.1. Splitting Module Positions Into Multiple Columns ............................................................................................ 9
5. Module Styles ................................................................................................................................................................. 10
6. Menu Styles ..................................................................................................................................................................... 13
6.1. Horizontal Menus ................................................................................................................................................... 13
6.2. Vertical Menus ........................................................................................................................................................ 16
6.3. Mobile Menus ......................................................................................................................................................... 17
6.4. Menu Item Icons ..................................................................................................................................................... 18
6.5. Additional Menu Classes ...................................................................................................................................... 19
6.6. Modules inside menus .......................................................................................................................................... 20
7. Template Customizations ............................................................................................................................................ 22
1
1. Template Overview
iReview is a very light and fast responsive template for Joomla 2.5 and 3.0, built using the latest css
techniques. It features a clean, minimalistic design and is a perfect template for review sites built with
JReviews (i. e. City Guide, Products Catalog, Movie Database, Classifieds, Events, ...). The template matches
the styles of JReviews themes for overall site design consistency and has guaranted compatibility for all
JReviews features.
iReview 2 brings many new features like responsive grid system designed to adapt to various resolutions
of different devices (desktops, tablets, smartphones). The layout now supports two sidebars, each can be
placed left or right of the main content and they can use either grid based dimensions or fixed custom
dimensions. There are 38 module positions, and 8 of those can be split into any number of columns.
Modules and Menus can be displayed using 18 different styles. Any type of menu can be published in any
module position and any menu can be converted to a vertical dropdown for mobile devices. The template
includes 17 selected quality fonts from Google Web Fonts service that can be chosen for body text,
headings or logo. For site's header, showcase and footer it is possible to set the background to be
transparent, light gray, dark or colored using one of the available 10 color styles.
1.1. Main Features
Joomla 2.5 & Joomla 3.0 compatible
Responsive layout
Very light and very fast
Clean, minimalistic design
Uses HTML5 and CSS3
Easy to customize
Multilevel menu navigation, both horizontal and vertical
Modules can be added to menu item dropdowns
Dropdown navigation for mobile devices
Google Web Fonts (preselected best fonts from Google's font service)
10 color styles available in different variations
38 module positions
6 module styles available in 12 different colors
7 menu styles available in 12 different colors
2
2. Template Installation
2.1. Installation Steps
1. Download the template installation file (iReview_2.1.zip) from the Client Area:
http://www.reviewsforjoomla.com/orders/client_area.php 2. In the administration area of your Joomla 2.5 site, go to Extensions -> Extensions Manager. 3. Under the Upload Package File click Browse button and select the downloaded iReview_2.1.zip file. 4. Click Upload & Install. 5. Go to Extensions -> Template Manager, select iReview template and click on Make Default:
2.2. Upgrading From iReview 1.x
iReview 2.x will not overwrite old iReview 1.x template. iReview 2 is a completely new template which
needs to be installed following the steps in the above installation instructions.
If you made any customizations in iReview 1.x, those customizations are no longer compatible with
iReview 2.
2.3. Upgrading From iReview 2.x
If you are upgrading the template from an earlier 2.x relese, just follow installation steps 1-4 to install new
version. You don't need to uninstall old version, otherwise you would lose saved template parameters.
If you modified some of the template files, make sure you backup the files before the upgrade.
3
3. Template Parameters
3.1. Layout
4
3.2. Styles
5
3.3. General settings
6
3.4. Scripts
7
3.5. Social Media
8
4. Module Positions
9
4.1. Splitting Module Positions Into Multiple Columns
8 module positions can be split into any number of columns:
header-top
header-bottom
showcase-top
showcase-bottom
content-top
content-bottom
footer-top
footer-bottom
The maximum number of columns per row is 12.
To assign a specific number of columns to a module, enter colX in the Module Class Suffix parameter,
where X = number of columns.
For example, to show 4 modules in 4 equal columns, enter col3 suffix to all 4 modules:
10
5. Module Styles
The template comes with 6 different module styles which can be enabled by adding their class names in
the Module Class Suffix parameter:
The available module styles are:
box
box-light
box-dark
box-rounded
box-rounded-light
box-rounded-dark
titlebar
titlebar-light
titlebar-dark
titlebar-rounded
titlebar-rounded -light
titlebar-rounded -dark
titlebar-outside
titlebar-outside -light
titlebar-outside -dark
titlebar-rounded-outside
titlebar-rounded-outside -light
titlebar-rounded-outside -dark
Classes without –light and –dark suffixes will use the main theme color selected in template parameters.
Examples of all module styles can be seen on the next two pages.
11
12
13
6. Menu Styles
6.1. Horizontal Menus
The template comes with 7 different menu styles which can be enabled by adding their class names in the
Menu Class Suffix parameter:
The available menu styles are:
menu-horiz-simple
menu-horiz-simple-light
menu-horiz-simple-dark
menu-horiz-buttons
menu-horiz-buttons-light
menu-horiz-buttons-dark
menu-horiz-buttons-rounded
menu-horiz-buttons-rounded-light
menu-horiz-buttons-rounded-dark
menu-horiz-bar
menu-horiz-bar-light
menu-horiz-bar-dark
menu-horiz-gradientbar
menu-horiz-gradientbar-light
menu-horiz-gradientbar-dark
menu-horiz-tworow
menu-horiz-tworow-light
menu-horiz-tworow-dark
menu-vertical
menu-vertical-light
menu-vertical-dark
Classes without –light and –dark suffixes will use the main theme color selected in template parameters.
All menu types can be published to any module position. All of them support unlimited number of
submenus except for „tworow“ menu type.
Examples of all module styles can be seen on the next three pages.
14
15
16
6.2. Vertical Menus
For vertical menus use „menu-vertical“ class name in the Menu Class Suffix parameter.
Vertical menu can be used with any of the 6 module styles and any color theme.
Example of vertical menus using „box-rounded“ module styles:
17
6.3. Mobile Menus
Any type of menu can be converted to a „Mobile Menu“ if enabled in template parameters. If you use
responsive layout, it is recommended to enable the mobile menu for your main top menu.
The menu that you choose in template parameters will automatically convert to vertical dropdown menu
on browser resolutions smaller then 480px (the width when to convert is also configurable in template
parameters).
The mobile menu will respect the chosen color styles of the non-mobile menu.
Example of how the mobile menu looks collapsed:
After the mobile visitor taps the menu header, it will expand like this:
18
6.4. Menu Item Icons
All menu types have support for icons. To add an icon to a specific menu item, edit that menu item in
Joomla Menu Manager, click on the Link Type Options panel and chose an image for Link Image
parameter:
Example of an menu item with icon assigned:
19
6.5. Additional Menu Classes
If you want to make first level menu items uppercase, you can add additional uppercase class name to the
Module Class Suffix parameter (separated by a space).
To make all levels of menu items uppercase, use uppercase-all class name instead.
Example:
20
6.6. Modules inside menus
New feature in iReview 2.1 is the ability to add modules to menu items. For example:
First step is to create a Text Separator menu item in one of your horizontal menus and in the Note
parameter enter a custom name for a module position (i.e. menu-position-1):
21
Next, go to the Module Manager and assign one of your modules to that module position (you must type-
in the name of the module position, it is not possible to select it):
And then the module will be outputted as dropdown of a menu item where you created that module
position.
You can assign up to 3 modules to the same menu position and each will be outputted in a separate
column.
22
7. Template Customizations
If something isn't possible to do via template parameters, the only solution is to customize the code of the
template.
It is recommended to do customizations using css and avoid changing other files if possible.
All css modifications should be added into /templates/ireview2/css/custom.css file. The styles that you put
there will override default styles.
Always backup your customizations to avoid losing them when upgrading the template.