ireview 2.1 Manual Template for Joomla 2.5 & 3.x

Transcription

1 ireview 2.1 Manual Template for Joomla 2.5 & 3.x

2 Contents 1. Template Overview Main Features Template Installation Installation Steps Upgrading From ireview 1.x Upgrading From ireview 2.x Template Parameters Layout Styles General settings Scripts Social Media Module Positions Splitting Module Positions Into Multiple Columns Module Styles Menu Styles Horizontal Menus Vertical Menus Mobile Menus Menu Item Icons Additional Menu Classes Modules inside menus Template Customizations... 22

3 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 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 1

4 2. Template Installation 2.1. Installation Steps 1. Download the template installation file (ireview_2.1.zip) from the Client Area: 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 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. 2

5 3. Template Parameters 3.1. Layout 3

6 3.2. Styles 4

7 3.3. General settings 5

8 3.4. Scripts 6

9 3.5. Social Media 7

10 4. Module Positions 8

11 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: 9

12 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. 10

13 11

14 12

15 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. 13

16 14

17 15

18 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: 16

19 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: 17

20 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: 18

21 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: 19

22 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): 20

23 Next, go to the Module Manager and assign one of your modules to that module position (you must typein 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. 21

24 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. 22