iReview 3 Joomla Template - User Guide

Last update: February 14th, 2017

Copyright © 2010-2017 ClickFWD LLC

Chapter 1 iReview 3 overview

iReview is a very light and fast responsive template for Joomla 3.x, 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, ...).

iReview 3 comes with powerful layout options and improved responsive grid system which adapts to various resolutions of different devices (desktops, tablets, smartphones). There are more than 40 module positions and every position can be split into multiple columns to be able to display modules side by side. Two sidebars are available, each can be placed left or right of the main content and they can use either grid based dimensions or any custom fixed dimension that you specify in parameters.

For better usability on mobile devices, iReview 3 comes with a new off-canvas slideout menu. The menu is activated by tapping the menu icon in the new topbar. The mobile menu supports unlimitted levels of menu items, the same as regular menus. For better performance on smartphones, iReview 3 allows you to prevent specific modules from loading on smartphones via the Mobile Detect feature.

iReview 3 replaces Joomla's Bootstrap 2 with much better Bootstrap 3. It uses Bootstrap's mobile first responsive grid system and also makes it easier to use some of the Bootstrap components like tabs and accordions. All other Bootstrap 3 components can be used when customizing both the template and themes of 3rd party Joomla extensions.

The template comes with 32 color styles and makes it easier to use multiple color styles at once for different page wrappers and modules, with an option to override specific color styles using color pickers. It allows you to assign modules to custom module positions as menu dropdown and for every dropdown menu you can choose if it will be activated by mouseover or a click. iReview 3 is also much easier to customize and even allows you to add custom css styles directly in template parameters and include custom scripts in either head or body part of the template. There are many additional small improvements like more contoll over the offline page, preselected quality fonts from Google CDN, scroll to top button and more options for social media.

1.1 Main features

Joomla 3.x compatible

Replaces Joomla's Bootstrap 2 with much better Bootstrap 3

Very light and very fast

Clean, minimalistic design

Uses HTML5 and CSS3

Responsive layout

Two sidebars, both can have any custom width

Easy to customize, add custom styles and scripts via template parameters

Multilevel menu navigation, both horizontal and vertical

Slideout menu for mobile devices

Mobile detection to prevent specific modules from loading on smartphones

Google Web Fonts (preselected best fonts from Google's font service)

Scroll to top option

32 color styles available in different variations

41 module positions which can be split into multiple columns

Chapter 2 Installation & upgrade

2.1 Installation steps

Download the template installation file (iReview_3.x.x.zip) from the Client Area: https://www.jreviews.com/client-area

In the administration area of your Joomla 3.x site, go to Extensions -> Manage -> Install

Under the Upload Package File tab click Choose File and select the downloaded iReview_3.x.x.zip file, then click Upload & Install:

Go to Extensions -> Templates, select iReview 3 template and click on Make Default:

2.2 Upgrading from iReview 3.x

If you already use an early iReview 3.x release and you want to upgrade to a newer iReview 3 release, follow the installation steps 1-4 to install the new version. You don't need to uninstall the old version (uninstall would delete saved template parameters).

If you modified any template files, make sure you backup those files before the upgrade (copy them to a safe location and bring them back after the upgrade).

2.3 Upgrading from iReview 2.x

iReview 3 is a completely new template and its installation will not overwrite old iReview 2. You will be able to switch between iReview 2 and iReview 3 at any time.

If you made any code customizations in iReview 2 files, those customizations can't be transferred to iReview 3 because it uses completely different code. To start customizing iReview 3, read the Template Customizations chapter.

Chapter 3 Customizing template settings

Template settings can be customized by going to Extensions -> Templates -> Styles, then click on iReview3 - Default to adjust the default styles of iReview template.

Template settings are split into 5 tabs:

General settings - Logo, favicons, copyright, 3rd party scripts, etc.

Layout - Responsive layout, mobile menu, sidebars

Syles - Styles of individual page wrappers

Social Media - Links to your site's social media pages

Customizations - CSS & javascript settings

3.1 General settings

3.1.1 Logo

By default, iReview will display the name of your site as the logo until you upload a custom logo image. Select a default site logo image and optionally a mobile logo image (which will replace the default logo on small screen devices).

You can publish the logo to the Header area or the Topbar area. Choose the topbar only if your logo is small because topbar height is 40px and if the selected logo is larger, it will be scaled down.

If you choose to show the logo in the header area, select how many grid columns you want to reserve for the logo. The remainder will be used by the 'Right of logo' widget position. For example, if you select 6/12, both the logo and the 'Right of logo' widget position will take 50% of the available screen size.

If you show the logo in the topbar area or if you disable the logo, 'Right of logo' widget position will display in the whole header row.

3.1.2 Favicons

The favicon is an image used by browsers to represent a web page. It is typically 16x16 pixels, but these days larger sizes are required due to browsers using them in a number of ways, especially as touch icons for mobile devices.

Instead of having to create 7-8 different favicon images manually, we recommend using a Favicon Generator. You need to prepare a single image file (preferably with square dimensions, at least 260x260 pixels), upload it to the generator and it will give you differently sized images for all platforms and the favicon code. Upload the images to the root folder of your site and paste the code to the Favicon code setting.

3.1.3 Copyright

iReview provides a simple way to add copyright text to the footer of your website. You can use any custom text and {current_year} tag which will be automatically replaced with the current year and {site_name} tag which will be automatically replaced with the site name (as defined in Joomla configuration).

Select how many grid columns will be reserved for copyright text and the rest of the available space will be left for the position-15 module position. For example, if you select 6/12, both the copyright text and the module position will use 50% of the screen size. If you select 12/12 for the copyright text, the position-15 module position will be disabled.

If you need some special content as the copyright text, set Show copyright text setting to No and instead publish a custom module to the position-15 module position.

3.1.4 Web Fonts

iReview by default uses the Helvetica and Arial fonts, but you can choose a different font from a selected number of Google Fonts. The template has a separate font setting for the body text, headings and logo.

If your site isn't in English, select an appropriate Character Set.

3.1.5 3rd Party Scripts

3rd Party Scripts settings allow you to choose which scripts will be loaded and how. Examples of using 3rd party scripts are available in chapter 8.

3.1.6 Cookie Consent (EU Law Compliance)

If your site is EU based and you want to show the Cookie Consent message, you can enable it here. Once new site visitors click the "I agree!" button, they will no longer see the message. This is how the message looks like by default:

3.1.7 Google Analytics

If you want to use Google Analytics, you don't need to add the whole block of code generated by Google, it is already included in iReview and you only need to paste the UA code of your site from your Google Analytics account. The format of the UA code is usually UA-XXXXXX-X.

3.1.8 Other

The Display Login Form on the Offline page setting allows you to choose how to display the frontend login form when the site is offline. Available options are:

Never - the login box will not be displayed

Always - the login box will always be displayed

Appear after pressing the L key on keyboard - the login box will fade in after pressing the L key on keyboard. Useful if you don't want regular users to try to login when the site is offline.

3.2 Layout

3.2.1 Responsive Layout

The layout of the iReview template is responsive by default and main content is centered on the site with 1200px maximum width. If you want to reduce maximum width, enter the number of pixels to the Maximum width setting.

If you want the content to take 100% of the browser width on all devices, enable Content 100% width setting for individual page wrappers in the Styles tab.

3.2.2 Slideout Menu

The main horizontal navigation menu of your site can be transformed to a Slideout menu on mobile devices. The template allows you to choose at which breakpoint to convert the menu.

Use the Name of the menu(s) to convert (lowercase, no spaces) setting to specify which menus will be converted to the slideout menu. To find out the names of your menus, go to Joomla Menus -> Manage and check what is specified as Menu Type:

There are two types of slideout menus:

OffCanvas - when the visitor clicks the menu icon, the slideout menu will appear and push the rest of the page outside the visible screen

Overlay - when the visitor clicks the menu icon, the slideout menu will appear as overlay above the rest of the page

The template allows you to automatically move Topbar modules or Topbar social media icons to the Slideout menu on small screens.

3.2.3 Sidebars

iReview provides two sidebars (primary and secondary) and both can be displayed on either left or right side of the main content.

The sidebars will appear only if you publish modules to one of the sidebar module positions (position-5, position-6, position-7 for primary sidebar and position-5a, position-6a, position-7a for secondary sidebar). For more info on module positions check chapter 5.

For sidebar dimensions you can choose between:

Grid columns - the sidebars will use percentage width and its size will be narrower on smaller devices.

Fixed width - the sidebars will have the same width on all devices - recommended if you plan to have fixed size banners in the sidebar.

3.3 Styles

In the Styles tab you can set a default link color and styles for different page wrappers.

Header, Content and Footer wrappers are displayed by default and other wrappers will appear only if you publish modules to their module positions.

For each wrappear you can choose a different background color and make its content take 100% page width.

To Topbar Wrappear can be optionaly made Always on top.

iReview provides 32 different color styles, but you can also choose a custom background color using a color picker. Even if you choose a custom background color using the color picker, also select the most similar default background color to make sure the correct font colors will be applied.

Examples of all 32 predefined color styles can be seen in chapter 4.

Besides choosing a custom background color, you can also upload a background image for any. You should use a large background image beause it will fill all available space of the individual wrapper. The image will be centered horinzontally and you can choose the vertical alignment (top, center, bottom). A scrolling mode setting is also available where you can choose the "fixed" scrolling mode where the background image won't scroll down with the rest of the page (parallax effect).

Example of a background image in a header wrapper:

3.4 Social Media

iReview provides an easy way to add buttons that link to your site's social media profiles. Enable individual social buttons, paste links to your site's profile pages and adjust the link titles. You can also choose where to show the social media buttons (topbar or footer).

Example of social media buttons in the topbar:

3.5 Customizations

3.5.1 CSS

There are two ways to add custom css code to the template:

Enable Load custom.css file and add your code to the /templates/ireview3/css/custom.css file. Use the Version override for custom.css setting to add a custom version number every time you update the custom.css on a live site for returning visitors to see new updates without clearing browser cache.

Paste the custom css code to the textarea in template parameters - useful for small css customizations.

3.5.2 Javascript

Load custom head scripts from textarea below - any code that you add to below textarea will be included in the <head> part of the template, useful for scripts that need to be loaded from the head element like fonts from CDNs.

Load custom footer scripts from textarea below - any code that you add to below textarea will be included before the closing </body> tag, useful for custom scripts that don't need to be loaded from the template <head>. If you are using some other service for stats besides Google Analytics, the script can go here.

Chapter 4 Color styles

iReview 3 comes with 32 different color styles:

Any of these color styles can be selected as background of page wrappers in the Styles template parameters.

Besides using those colors as wrapper backgrounds, you can also use them as backgrounds for specific modules. To do that, enter color class name (i.e. bg-dark-green2) into the Module Class Suffix module parameter (more info about this in the next chapter).

Chapter 5 Module positions

iReview template has a large number of module positions as shown on the above image, which you can use as a reference before publishing modules.

Any of the iReview module positions can be selected when creating an editing an existing module in Joomla Module Manager:

Positions component-top-tabs, component-bottom-tabs, sidebar-accordion and sidebarb-accordion are special positions and modules that you publish to them will be automatically converted to Bootstrap tabs and accordions:

5.0.1 Slideout module positions

There are 2 additional module positions for mobile devices that are used only when the slideout menu is activated:

5.0.2 Publishing multiple modules to the same module position

Whenever you publish more than one module to the same module position, they will be displayed one below the other.

If you want to display modules side by side within a single module position, you can use the Bootstrap grid setting.

For example, if you want two modules to display side by side, select 6 in the Bootstrap Size parameter for both modules.

Any combination is grid columns is possible, the important part is that the overall number of columns in a single row (module position) is equal to 12.

Chapter 6 Module & menu styles

6.1 Module styles

By default, every module looks like this:

Using the Module Class Suffix module parameter, you can apply any of the available 32 color styles, for example:

The list of all background classes is available in chapter 4.

There are additional classes that can help you further adjust the module appearance. If you want the module to appear rounded, use one of these classes:

rounded-xs - extra small border radius

rounded-sm - small border radius

rounded-md - medium border radius

rounded-lg - large border radius

Additional classes that you add to the Module Class Suffix parameter should be separated by a space.

For example:

If you want the module to have a visible border (slightly darker than the chosen backround color), you can add an extra bordered class name, for example:

There are helper classes for extra margin or padding:

padding-5 - adds 5px padding

padding-10 - adds 10px padding

padding-15 - adds 15px padding

padding-20 - adds 20px padding

margin-5 - adds 5px margin

margin-10 - adds 10px margin

margin-15 - adds 15px margin

margin-20 - adds 20px margin

For example, to add an extra 10px padding to the module content, use the padding-10 class:

6.1.1 Module title styles

Besides the styles for module content, there are classes for module headers as well:

titlebar

titlebar-outside

You can enter either of those class names into the Header Class module parameter, for example:

Module header supports the same background styles and helper classes as the module itself, for example:

6.2 Vertical menu styles

To display a menu as vertical, enter "menu-vertical" in the Menu Class Suffix parameter of the menu module:

The vertical menu will look like this by default:

It also supports the same color styles as regular modules, for example:

6.3 Horizontal menu styles

To display a menu as horizontal, enter "menu-horizontal" in the Menu Class Suffix parameter of the menu module:

The horizontal menu will look like this by default:

It also supports the same color styles as regular modules, for example:

6.4 Utility classes

6.4.1 Hiding modules on phones or tablets

If you want to hide a module on phones or tables, you can use Bootstrap's utility clases:

For example, to hide the module on very small devices (phones), enter "hidden-xs" to the Module Class Suffix parameter like this:

6.4.2 Mobile detection

iReview 3 also has support for Mobile Detection. If you add an extra "hidden-phone" class name and the template detects a smartphone, it will prevent this module from loading for improved performance on smartphones. A "hidden-tablet" class name is supported as well, but it's not recommended to use it because most tablets can display large site layout.

6.5 Modules inside menus

iReview 3 allows you to create custom module positions inside menus, for example:

The first step is to create a Text Separator menu item in one of your horizontal menus under which you want to display a module as a dropdown:

Next, in the Note parameter of that new text separator menu item, enter a custom name for the module position. It is important that the name begins with menu-position (i.e. menu-position-1):

Now that you created a custom module position, you can go to the Module Manager and assign one of your modules to that position:

Important: If your custom module position isn't listed in the Position select list, you can click on the select list, type in the name of your custom module position and press enter.

You can assign up to 3 modules to the same menu position. To define how many columns each module will take, use the Bootstrap Size parameter, the same as with regular modules. Read Module Positions chapter for more info.

6.6 Triggering menu dropdowns by a click

By default, a dropdown will appear when you mouseover the parent menu item. If you want, you can have the dropdown appear only when someone clicks on a menu item. In this case, a down arrow will appear text to the menu item to indicate that it can be clicked:

To enable this, go to the parameters of the menu module in the Module Manager and enter dropdown-click as an extra class name:

This is recommended for menus that contain modules, but you can do it for any horizontal menu that you want.

Chapter 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/ireview3/css/custom.css file. The styles that you put there will override default styles. Keep in mind that loading custom.css file should be enabled in the Customization tab of iReview parameters.

Always backup your customizations to avoid losing them when upgrading the template.

Chapter 8 Using 3rd Party Libraries

8.1 Using Bootstrap Tooltips

iReview template will automatically initialize Bootstrap tooltips when you add i-tooltip class name to an element.

For example, if you add a "i-tooltip" class name to a link element, the tooltip will display the text that you add to the "title" attribute:

<a href="#" class="i-tooltip" title="Some tooltip text!">Hover over me</a>

The title attribute is required for the tooltip to appear.

If you want to specify the placement of the tooltip, use the "data-placement" attribute with one of the 5 available values: auto, left, top, bottom, right, for example:

<a href="#" class="i-tooltip" title="Tooltip on right" data-placement="right">Hover over me</a>

8.2 Using Bootstrap Popovers

iReview template will automatically initialize Bootstrap popovers when you add i-popover class name to an element.

For example, if you add a "i-popover" class name to a button element, the popover will display the title from the "title" attribute and content from the "data-content" attribute:

<button type="button" class="btn btn-default i-popover" title="Popover title"
data-content="Content for the popover">Click to toggle popover</button>

If you want to specify the placement of the popover, use the "data-placement" attribute with one of the 5 available values: auto, left, top, bottom, right, for example:

<button type="button" class="btn btn-default i-popover" title="Popover title"
data-content="Content for the popover" data-placement="top">Click to toggle popover</button>

If you want to automatically hide the popover when visitors click anywhere, add data-trigger="focus" attribute:

<button type="button" class="btn btn-default i-popover" title="Popover title"
data-content="Content for the popover" data-placement="top"
data-trigger="focus">Click to toggle popover</button>

8.3 Using Bootstrap Tabs

To use bootstrap tabs, add this code to the template where you want the tabs to appear:

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
  <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="tab1">Content of Tab 1</div>
  <div class="tab-pane" id="tab2">Content of Tab 2</div>
  <div class="tab-pane" id="tab3">Content of Tab 3</div>
</div>

The tabs will look like this by default:

The same code can be used in template files of extensions like JReviews.

8.4 Using Animate.css library for animations

In iReview General settings you can enable loading animate.css library to be able to easily apply CSS3 animations to elements using class names.

Examples of all available animation class names can be found on this page:

https://daneden.github.io/animate.css

To add a specific animation to a Joomla module, add the name of the animation (i.e. "fadeInLeft") to the "Module Class Suffix" parameter and an extra "animated" class name which starts the animation:

This module animation will start as soon as the page is loaded.

Example of this animation can be seen on the JReviews demo site (sidebar modules):

https://demo.jreviews.com

8.4.1 Delay animations until the element becomes visible

If you want to add animations to modules that are outside the viewport on first page load, you can enable loading wow.js library in iReview General settings. This library allows you to start the animation when the visitor scrolls down and the module appears.

To start the animation when the module appears, use the "wow" class name instead of "animated":

Example of this animation can be seen on the JReviews demo site (scroll down to see the footer menu):

https://demo.jreviews.com

8.4.2 Apply animations to Joomla extensions

Animations are not limited to modules, you can add them to the content of any Joomla extension if you customize its theme files.

For example, to animate the listing title on the JReviews listing detail page, edit its theme file (listings/detail.thtml), find the h1 heading code that contains the title:

<h1 class="contentheading">

and add animation classes:

<h1 class="contentheading bounceInRight animated">

8.4.3 Changing animation parameters

Default animation duration is set to 0.5s. If you want to change the duration, you can override it via the custom.css file, for example:

.animated {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
}

This will change the duration of all animations. If you want to change the duration of a specific animation, include its name in the css selector, for example:

.animated.fadeInLeft {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
}

You can also adjust the delay:

.animated.fadeInLeft {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

or make the animation repeat infinitely:

.animated.pulse {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}