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.