iReview 3 Manual
iReview 3 Manual
Last update: August 2nd, 2014
Copyright © 2010-2014 ClickFWD LLC
Table of contents
Chapter 1 iReview 3 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.1 Main features. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Chapter 2 Installation & Upgrade . . . . . . . . . . . . . . . . . . . . . . . 7
2.1 Installation Steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Upgrading from iReview 2.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3 Upgrading from iReview 3.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Chapter 3 Template Parameters . . . . . . . . . . . . . . . . . . . . . . . . 9
3.1 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2 Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3 General settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.4 Social Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.5 Customizations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Chapter 4 Module Positions . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Chapter 5 Color styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Chapter 6 Module & menu styles . . . . . . . . . . . . . . . . . . . . . . . 25
6.1 Module styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
6.2 Vertical menu styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.3 Horizontal menu styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
6.4 Utility classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
6.5 Modules inside menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
6.6 Triggering menu dropdowns by a click . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Chapter 7 Template Customizations . . . . . . . . . . . . . . . . . . . . 42
Chapter 8 Using Bootstrap Components . . . . . . . . . . . . . . . . 43
8.1 Using Bootstrap Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
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, ClassiKeds, Events, ...).
iReview 3 comes with powerful layout options and improved responsive grid system which
adapts to various resolutions of diMerent 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 Kxed dimension that you specify in parameters.
For better usability on mobile devices, iReview 3 comes with a new oM-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 speciKc modules from loading on smartphones via the
Mobile Detect feature.
Copyright © 2010-2014 ClickFWD LLC
4
iReview 3 Manual
Chapter 1 iReview 3 Overview
iReview 3 replaces Joomla's Bootstrap 2 with much better Bootstrap 3. It uses Bootstrap's mobile Krst 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 diMerent page wrappers and modules, with an option to override speciKc 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 oMline page,
preselected quality fonts from Google CDN, scroll to top button and more options for social
media.
Copyright © 2010-2014 ClickFWD LLC
5
iReview 3 Manual
Chapter 1 iReview 3 Overview
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 speciKc 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 diMerent variations
• 41 module positions which can be split into multiple columns
Copyright © 2010-2014 ClickFWD LLC
6
Chapter 2
Installation & Upgrade
2.1 Installation Steps
1. Download the template installation Kle (iReview_3.x.zip) from the Client Area:
http://www.reviewsforjoomla.com/orders/client_area.php
2. In the administration area of your Joomla 3.x site, go to Extensions -> Extensions
Manager.
3. Under the Upload Package File click Browse button and select the downloaded
iReview_3.x.zip Kle.
4. Click Upload & Install.
5. Go to Extensions -> Template Manager, select iReview 3 template and click on Make
Default:
2.2 Upgrading from iReview 2.x
iReview 3.x will not overwrite old iReview 2.x template. iReview 3 is a completely new template
and needs to be installed following the steps in the above installation instructions.
You will be able to switch between iReview 2 and iReview 3 at any time.
Copyright © 2010-2014 ClickFWD LLC
7
iReview 3 Manual
Chapter 2 Installation & Upgrade
If you made any code customizations in iReview 2 Kles, those customizations can't be transferred to iReview 3 because it uses completely diMerent code. To start customizing iReview 3,
read the Template Customizations chapter.
2.3 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, otherwise you would lose saved template parameters.
If you modiKed any template Kles, make sure you backup those Kles before the upgrade (copy
them to a safe location and bring them back after the upgrade).
Copyright © 2010-2014 ClickFWD LLC
8
Chapter 3
Template Parameters
3.1 Layout
Maximum width - here you can reduce the overall container width for content.
Convert horizontal navigation to a slideout menu on mobile devices - if you enable this,
the menu chosen below will be converted to a mobile menu that will display as a slideout when
visitors click the menu icon.
Name of the menu to convert - enter a menu name (type) that will be used as the mobile
menu. You can enter multiple menu names separated by commas.
Title of the menu toggle button - enter a title that will be displayed next to the menu icon
(optional).
Slideout Menu Position - choose the position of the Slideout Menu (which is activated after
pressing the menu trigger in the topbar).
Move Topbar modules to Slideout Menu on mobile devices - if enabled, topbar modules will
be hidden on mobile devices and their copies will be displayed in the slideout menu.
Copyright © 2010-2014 ClickFWD LLC
9
iReview 3 Manual
Chapter 3 Template Parameters
Move Topbar social media icons to Slideout Menu on mobile devices - if enabled, topbar
social media icons will be hidden on mobile devices and their copies will be displayed in the
slideout menu.
Sidebar dimensions - if you choose Grid columns, the sidebars will use percentage width and
its size will be narrower on smaller devices. If you choose Fixed width, the sidebars will have the
same width on all devices.
Primary sidebar position - (left|right)
Primary sidebar columns - if you chose Grid columns in the Sidebar dimensions parameter,
select how many columns the primary sidebar will take (the rest of the 12 columns will be reserved for the main site content).
Primary sidebar Bxed width - if you chose Fixed width in the Sidebar dimensions parameter,
enter the number of pixels (without 'px') that the primary sidebar will take. The rest of the available pixels will be reserved for the main site content.
Primary sidebar on tablets (768px to 992px) - choose what will happen with the primary sidebar on medium size devices (tablets). You can show it in the same position as for large devices,
show it below the main content or hide it.
Primary sidebar on smartphones (less than 768px) - choose what will happen with the primary sidebar on small devices (phones). You can show it below the main content or hide it.
Copyright © 2010-2014 ClickFWD LLC
10
iReview 3 Manual
Chapter 3 Template Parameters
Secondary sidebar position - (left|right)
Secondary sidebar columns - if you chose Grid columns in the Sidebar dimensions parameter,
select how many columns the secondary sidebar will take (the rest of the 12 columns will be
reserved for the component area).
Secondary sidebar Bxed width - if you chose Fixed width in the Sidebar dimensions parameter,
enter the number of pixels (without 'px') that the secondary sidebar will take. The rest of the
available pixels will be reserved for the component area.
Secondary sidebar on tablets (768px to 992px) - choose what will happen with the secondary
sidebar on medium size devices (tablets). You can show it in the same position as for large devices, show it below the main content or hide it.
Secondary sidebar on smartphones (less than 768px) - choose what will happen with the
secondary sidebar on small devices (phones). You can show it below the main content or hide
it.
3.2 Styles
Default link color - select the default link color. On some backgrounds the link color will automatically convert to white or black to make sure the links are visible regardless of the background.
Custom link color - choose any custom link color if the default ones aren't good for your site.
Copyright © 2010-2014 ClickFWD LLC
11
iReview 3 Manual
Chapter 3 Template Parameters
Background - select one of the available 34 background styles. A screenshot of all color styles
is available in the Color Styles chapter.
Use custom background color below - if enabled, a custom background color selected in the
below setting will be used.
Custom background color - use the color picker to choose a custom background color. Also
select the most similar background in the Background parameter to make sure the text on
that backround will be visible.
Always on top - if enabled, the Topbar will be Kxed on top of the page when scrolling down.
Content 100% width - if enabled, the content of the topbar will take full browser width.
Background - select one of the available 34 background styles. A screenshot of all color styles
is available in the Color Styles chapter.
Use custom background color below - if enabled, a custom background color selected in the
below setting will be used.
Custom background color - use the color picker to choose a custom background color. Also
select the most similar background in the Background parameter to make sure the text on
that backround will be visible.
Copyright © 2010-2014 ClickFWD LLC
12
iReview 3 Manual
Chapter 3 Template Parameters
Background - select one of the available 34 background styles. A screenshot of all color styles
is available in the Color Styles chapter.
Use custom background color below - if enabled, a custom background color selected in the
below setting will be used.
Custom background color - use the color picker to choose a custom background color. Also
select the most similar background in the Background parameter to make sure the text on
that backround will be visible.
Content 100% width - if enabled, the content of the header wrapper will take full browser
width.
Background - select one of the available 34 background styles. A screenshot of all color styles
is available in the Color Styles chapter.
Use custom background color below - if enabled, a custom background color selected in the
below setting will be used.
Custom background color - use the color picker to choose a custom background color. Also
select the most similar background in the Background parameter to make sure the text on
that backround will be visible.
Content 100% width - if enabled, the content of the top showcase wrapper will take full browser width.
Copyright © 2010-2014 ClickFWD LLC
13
iReview 3 Manual
Chapter 3 Template Parameters
Background - select one of the available 34 background styles. A screenshot of all color styles
is available in the Color Styles chapter.
Use custom background color below - if enabled, a custom background color selected in the
below setting will be used.
Custom background color - use the color picker to choose a custom background color. Also
select the most similar background in the Background parameter to make sure the text on
that backround will be visible.
Inner Content Background - select the background of the inner content area.
Content 100% width - if enabled, the content of the content wrapper will take full browser
width.
Background - select one of the available 34 background styles. A screenshot of all color styles
is available in the Color Styles chapter.
Use custom background color below - if enabled, a custom background color selected in the
below setting will be used.
Copyright © 2010-2014 ClickFWD LLC
14
iReview 3 Manual
Chapter 3 Template Parameters
Custom background color - use the color picker to choose a custom background color. Also
select the most similar background in the Background parameter to make sure the text on
that backround will be visible.
Content 100% width - if enabled, the content of the bottom showcase wrapper will take full
browser width.
Background - select one of the available 34 background styles. A screenshot of all color styles
is available in the Color Styles chapter.
Use custom background color below - if enabled, a custom background color selected in the
below setting will be used.
Custom background color - use the color picker to choose a custom background color. Also
select the most similar background in the Background parameter to make sure the text on
that backround will be visible.
Content 100% width - if enabled, the content of the footer wrapper will take full browser
width.
3.3 General settings
Copyright © 2010-2014 ClickFWD LLC
15
iReview 3 Manual
Chapter 3 Template Parameters
Show logo - if you disable this, the position-0 module position will take the full row.
Choose logo image - select a logo image from the root/images directory. If you don't select a
logo image, the template will display site name as the logo.
Choose mobile logo image - this image will replace the main logo on mobile devices.
Logo Position - choose where the logo will be displayed:
• Header
• Topbar
• Main logo in header / Mobile logo in topbar
How many grid columns will be reserved for logo - the rest of the available space will be
left for the position-0 module position. If you select 12/12 columns for the logo, the position-0
module position will be disabled.
Show copyright text - if you disable copyright, the position-15 module position will take the
full row.
How many grid columns will be reserved for copyright text - the rest of the available space
will be left for the position-15 module position. If you select 12/12 columns for the copyright
text, the position-15 module position will be disabled.
Copyright Text - enter the copyright text. You can use {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 deKned in Joomla conKguration).
Copyright © 2010-2014 ClickFWD LLC
16
iReview 3 Manual
Chapter 3 Template Parameters
Use Google Fonts - if you disable Google Fonts, the site will use Helvetica as the default font.
Body text font - select the default font for body text.
Headings font - select the default font for heading text.
Logo font - select the default font for the logo text (used only if you haven't chosen the logo
image).
Enable Google Analytics - enable this only if you created an account on www.google.com/analytics/ and entered the UA code in the below parameter. The template will automatically use
the latest Universal Analytics code.
Analytics UA code (format: UA-XXXXXX-X) - you can Knd this code in your Google Analytics
account.
Display 'Scroll to Top' button - if enabled, a small 'Scroll to Top' button will be displayed in
the bottom right corner.
Display Login Form on the ODine page - when you put your site oLine in the Joomla conKguration, you have 3 options for displaying the login box for admins:
Copyright © 2010-2014 ClickFWD LLC
17
iReview 3 Manual
Chapter 3 Template Parameters
• 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
oLine.
3.4 Social Media
Position - choose where to show the social media buttons (topbar or footer).
Open links in new tab/window - enable if you want the social media links to open in a new
tab.
3.5 Customizations
Copyright © 2010-2014 ClickFWD LLC
18
iReview 3 Manual
Chapter 3 Template Parameters
Load miniBed and compressed template css Bles - if enabled, the template will load miniKed
and compressed css Kles (i.e. template.min.css instead of template.css).
Load custom.css Ble - enable this if you want to use /templates/ireview3/css/custom.css Kle
for custom css styles.
Load custom CSS from textarea below - useful for small css customizations. For large
amounts of custom css, use the custom.css Kle instead.
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.
Copyright © 2010-2014 ClickFWD LLC
19
Chapter 4
Module Positions
Copyright © 2010-2014 ClickFWD LLC
20
iReview 3 Manual
Chapter 4 Module Positions
Positions component-top-tabs, component-bottom-tabs, sidebar-accordion and sidebarb-accordion are special positions and modules that you published to them will be automatically
converted to Bootstrap tabs and accordions:
There are 2 additional module positions for mobile devices when the slideout menu is activated:
Copyright © 2010-2014 ClickFWD LLC
21
iReview 3 Manual
Chapter 4 Module Positions
Whenever you publish more than one module to the same module position, it is required to
set the number of Bootstrap grid columns in the module parameters:
For example, if you publish 2 modules to the same module position and you want them to display below each other, select 12 in the Bootstrap Size parameter for both modules.
If you want those 2 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 is equal to 12.
Copyright © 2010-2014 ClickFWD LLC
22
Chapter 5
Color styles
iReview 3 comes with 32 diMerent color styles:
Copyright © 2010-2014 ClickFWD LLC
23
iReview 3 Manual
Chapter 5 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 SufBx module parameter (more info about this in the next chapter).
Copyright © 2010-2014 ClickFWD LLC
24
Chapter 6
Module & menu styles
6.1 Module styles
By default, every module looks like this:
Using the Module Class SuCx module parameter, you can apply any of the available 32 color
styles, for example:
Copyright © 2010-2014 ClickFWD LLC
25
iReview 3 Manual
Chapter 6 Module & menu styles
The list of all background classes is available in the previous chapter (Color Styles).
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
Copyright © 2010-2014 ClickFWD LLC
26
iReview 3 Manual
Chapter 6 Module & menu styles
Additional classes that you add to the Module Class SuCx 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:
Copyright © 2010-2014 ClickFWD LLC
27
iReview 3 Manual
Chapter 6 Module & menu styles
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:
Copyright © 2010-2014 ClickFWD LLC
28
iReview 3 Manual
Chapter 6 Module & menu 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:
Copyright © 2010-2014 ClickFWD LLC
29
iReview 3 Manual
Chapter 6 Module & menu styles
Module header supports the same background styles and helper classes as the module itself,
for example:
Copyright © 2010-2014 ClickFWD LLC
30
iReview 3 Manual
Chapter 6 Module & menu styles
6.2 Vertical menu styles
To display a menu as vertical, enter "menu-vertical" in the Menu Class SuCx parameter of the
menu module:
Copyright © 2010-2014 ClickFWD LLC
31
iReview 3 Manual
Chapter 6 Module & menu styles
The vertical menu will look like this by default:
Copyright © 2010-2014 ClickFWD LLC
32
iReview 3 Manual
Chapter 6 Module & menu styles
It also supports the same color styles as regular modules, for example:
Copyright © 2010-2014 ClickFWD LLC
33
iReview 3 Manual
Copyright © 2010-2014 ClickFWD LLC
Chapter 6 Module & menu styles
34
iReview 3 Manual
Chapter 6 Module & menu styles
6.3 Horizontal menu styles
To display a menu as horizontal, enter "menu-horizontal" in the Menu Class SuCx parameter
of the menu module:
Copyright © 2010-2014 ClickFWD LLC
35
iReview 3 Manual
Chapter 6 Module & menu styles
The horizontal menu will look like this by default:
It also supports the same color styles as regular modules, for example:
Copyright © 2010-2014 ClickFWD LLC
36
iReview 3 Manual
Chapter 6 Module & menu styles
6.4 Utility classes
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 SuCx parameter like this:
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-tablets" 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:
Copyright © 2010-2014 ClickFWD LLC
37
iReview 3 Manual
Chapter 6 Module & menu styles
The Krst 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:
Copyright © 2010-2014 ClickFWD LLC
38
iReview 3 Manual
Chapter 6 Module & menu styles
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:
Copyright © 2010-2014 ClickFWD LLC
39
iReview 3 Manual
Chapter 6 Module & menu styles
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 deKne 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:
Copyright © 2010-2014 ClickFWD LLC
40
iReview 3 Manual
Chapter 6 Module & menu styles
This is recommended for menus that contain modules, but you can do it for any horizontal
menu that you want.
Copyright © 2010-2014 ClickFWD LLC
41
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 Kles if possible.
All css modiKcations should be added into /templates/ireview3/css/custom.css Kle. The styles
that you put there will override default styles.
Always backup your customizations to avoid losing them when upgrading the template.
Copyright © 2010-2014 ClickFWD LLC
42
Chapter 8
Using Bootstrap Components
8.1 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 Kles of extensions like JReviews.
Copyright © 2010-2014 ClickFWD LLC
43