POSTED BY GANJAPARKER

Utouch Joomla! Theme

documentation

Introduction

Firstly, I want to thank you for purchasing this theme.

This document covers the installation and use of this theme and often reveals answers
to common problems and issues - I encourage you to read this document thoroughly if
you are experiencing any difficulties.

If you have any questions that are beyond the scope of this document, feel free to post
them in the dedicated ArrowThemes' support forum at:
arrowthemes Forum.

To get access to the arrowthemes forums, create an account on this page:

Create an Account.
1. Overview
Utouch is an impressive multi-niche Joomla template designed for SME businesses
and large enterprises alike. Every aspect and aesthetic of the template has been
carefully design to meet today's world standards in redefining the web.

This template has been built on Warp framework and UIKit, using the latest web
techniques. This theme comes packed with widgets and an intuitive live customizer.

The underlying Warp framework gives the theme an immeasurable weight of flexibility
and agility, fast loading site using built in compression of files, data URIs and gzip
compression.

Theme features

• Compatible with the latest Joomla version

• Multi-niche design
• Built on Warp Framework
• Fully responsive Layout
• Quickstart included
• K2 Blog Styling included
• 3 pre-built preset styles
• 5 header styles
• Valid HTML5
• Boxed and full width options
• 50+ module positions
• Retina ready
• Sticky navigation option
• LESS integration
• Live Customizer which gives you unlimited color possibilities
• Mobile friendly off canvas menu
• RTL Language Ready
• In-built widgetkit styles
• In-built coming soon page
• Flexible columns and template widths
• Cross browser compatibility
• SEO friendly
• Light and fast loading

Built for Joomla

Utouch is built from the ground up with Joomla! 3 in mind. Joomla! introduced it’s new
conventional version 3 in mid 2013 and it’s been gradually been evolving to become
one of the best CMS to date.

Built on Warp 7 Framework

Utouch is built on a very robust framework to give you un-matched flexibility and speed
when it comes to building the template layer of your site.
Warp 7 is a class of it’s own. Underneath the framework, it uses UIkit, a lightweight and
modular front-end modular framework for developing fast and powerful web interfaces
using the latest web technologies

3 Prebuilt Styles

Utouch comes with 3 pre-built styles to help you get a glance at what variety you can
have. From light to dark styles, each color has been crafted to match each component
used in the template.

Theme Styles and live customiser

Utouch Joomla template comes with different style variations to give you flexibility and
variety. In addition to these styles, you can tweak several other style settings like colors
and fonts right from the live customizer. Combining the different style options allows
you to create your own unique theme design.
2. Getting Started

When you purchase the Utouch template, you'll then be taken to the Downloads page.
Click on the 'Download' button and unzip it. You’ll find the following files/folders within:

• utouch-documentation.pdf - the template’s documentation

• utouch.zip - the stand-alone Joomla! template

• utouch_quickstart.zip - a quick-launch Joomla installation package that contains all

the sample data, placeholder images and most extensions to replicate the live demo.

• utouch_extensions.zip - includes a set of components, plug-ins and modules that

have been used in Joomla! quick-start package.You need to unzip it first, then
download the respective extensions from the respective sites.

3. Folder Structure
Utouch Joomla! template comprises of Less, CSS, Javascript and PHP files that power
the robust underlying Warp framework. In this section, we are going to cover the css,
less, js and php files to help you understand the theme’s structure.

css folder

This folder contains css files which render the front-end look and feel of the site. It
contains four files:

• bootstrap.css - this file contains the css for bootstrap

• editor.css - this file loads the theme.css for the Joomla backend
• theme.css - this file contains the css for the theme. It is compiled from less/
theme.less
• uikit3.css - this file is used for the coming soon page to load the counter
• uikit3-rtl.css - this file is uikit3 file for RTL languages

Important

You should never edit theme.css or bootstrap.css directly as they are automatically
generated when you compile the less files.

html folder

This folder contains the overrides for components and modules.

images folder

This folder contains the image files that have been used in the theme.
js folder

This folder contains the javascript files used in the theme.

layouts folder

This folder contains the core files that render the front-end look of the theme. The most
important file in this folder is theme.php. To understand more about this file, please
read this article: Layouts Folder.

less folder

This folder contains the less files which in turn, generate the css output files that are
located in the css folder.

• less/theme.less - is the key file that combines uikit less files (located in the uikit sub
folder).

• bootstrap.less - you can use this file to add overrides for bootstrap.

• style.less - this file defines the unique less code for each style.

• customizer.json - this file defines the customiser parameters that will be displayed in
the live customizer.

licensing folder

This folder contains the licence files which govern the use of this theme.
styles folder

This folder contains the various preset styles that come with the theme. To add your
own style, please see this article: Custom Styles.

warp folder

This is the Warp framework folder which contains the core files that underly the
framework.

widgetkit folder

This is folder contains all custom widgets for the Widgetkit component

4. Installation

This section covers how to install the theme. There are two ways in which you can
install the theme:

• Quickstart – a quick-launch Joomla installation package that contains all the data
and extensions to replicate the Live Demo. (recommended).

• Single theme – install the theme in an existing Joomla installation.

Quickstart method

The quickstart package helps you to re-create a replica of the Live Demo that we have
on our site. It is the recommended way for newbies or if you don’t want to go through
the individual setup of each component, module or plug-in. The steps to follow are as
follows:

I. Upload the utouch_quickstart.zip to your server using your preferred FTP software
and unpack the contents to your server. A good FTP that we use is Filezilla. In most
cases you will unpack it under the public_html folder, www root folder (windows
hosting) or the root folder of your server.

II. Access your site on the browser e.g https://www.mysite.com and this should direct
you to the installation prompt of your Joomla installation.

III. Follow the Joomla installation prompts as you would a normal Joomla installation.
In this step, I assume that you have some very basic Joomla experience.

IV. Once the installation is complete, delete the installation folder and your site should
look exactly like the demo version.

Important
We do not provide a 'Click to install dummy data' demo package but rather a Joomla!
installation that includes the demo data and placeholder images. That means, you can
install the quickstart on an existing Joomla! installation since it already contains a
Joomla! installation package.
Single theme method - for existing Joomla installation

If you have an existing Joomla installation, these are the steps to follow:

You can further customize the look and feel of the template by selecting the template
link to access the admin panel of the template.

I. Log in to your Joomla backend e.g. https://www.mysite.com/administrator and

navigate to the extension manager.

II. On the install section, click on ‘browse’ on the Package File field and locate your
utouch.zip template package file. Click on ‘Upload & Install‘. Once the theme has
installed successfully you will get a success notification.

III. Navigate to Extensions > Template Manager and you should see the installed
template on the list. To activate your template, click on the default column of the
template (second column) to make it the default site template.

IV. You can further customize the look and feel of the template by selecting the
template link to access the admin panel of the template.
Installing the components, modules and plug-ins

Important

This is only necessary when you have an existing Joomla installation. For the quickstart
option, all the components, modules and plug-ins are included and installed.

To install the components, modules and plugin, do the following:

I. Extract the utouch_extensions.zip package to a local folder.

II. Download all the relevant extensions as provided in the /folders
III. Login to your Joomla backend e.g. https://www.mysite.com/administrator and
navigate to the extension manager.
IV. On the install tab, click on choose file on the Package File field and locate your
unzipped extensions file and select one. Click on the ‘Upload & Install‘ button. Once
the extensions have installed successfully, you will get a success notification.
V. Repeat step IV for all the other extensions.
6. Customization

There are to major ways of customization, these are:

• Live Customizer - enables you to change most aspects of the theme without having
to write any line of CSS.

• Advanced Customization - To learn more about advanced customization and adding

overrides, please see this article: Advanced Customisation.

Live Customizer

To use the Customizer,

1. Login to the site’s administrator backend, go to Extensions > Template Manager.

2. Click the template to edit, then click on Options tab
3. On the Settings vertical tab click on the Customizer button > the live customizer will
appear with the options on the left and the site on the right
4. To see more advanced options, check the Advanced Mode checkbox > you will see
more options appearing; On some of the headings, you’ll notice a ‘more’ link that
lets you expand the options further.
5. Once you are done, click on save.
6. If you messed up the settings and you’d like to revert to the original, you can click
on reset.

7. Module Positions
This theme comes with a sophisticated layout system to create any kind of sidebar or
widget layout, thanks to Warp 7 framework. You can easily manage the sidebar's
positions and widths in the theme administration.

Widgets can have different styles and be placed in any position offered by this theme.
Each position has its own layout.
You can align widgets side-by-side, stack them or choose your own grid layout. Show or
hide widgets on mobile devices, while the grid adapts perfectly to your layout.

To add a new module position, please see Add a New Module Position.

8. Credits

This theme uses the following images, javascript libraries, icons, plugins, modules,
components, or other files as listed below. All the content relating to products, services
and events are fictional and are designed to showcase a live site. All images, icons, and
photos are copyrighted to their respective owners.

I. Warp Framework by YOOtheme

II. Stock images from Pexels