Horme 3 FREE - Documentation

Here you can find detailed information about the installation, configuration and features of Horme 3 free VirtueMart template. Use the menu on the left side to quickly navigate to the documentation's main sections.

Template installation

To install the template :

  1. Login to Joomla administration area.

    Joomla administration login page.

  2. Go to "Extensions -> Extension Manager".

    Joomla extension manager.

  3. In the "Upload Package File" field find the template file that you downloaded from our web site and hit the "Upload & Install" button.

    Upload & install extension.

  4. Go to "Extensions -> Template Manager" and set the template as default.

    Joomla template manager.

Updating the template

FIRST BACKUP YOUR TEMPLATE FILES

The update process is simple, you just reinstall the new version over the existing and after that replace the favicon with your own. The installation will not overwrite the custom.css and custom.js files so your code changes will remain intact.

In case you had modified any template files, you will have to replace the new files with the modified or redo the modification to the new files.

In order to display the main menu find your desired menu module, set the position to "menu" and select "YES" in "Always Show Submenu Items".

The module caching must be disabled or else the mobile menu will not display.

The Joomla! menu module editing screen.

Template width

The template has two predefined template widths

  1. Box = 1170px centered
  2. Full Width = Full Screen

In order to set the width, go to template configuration page and select the desired width from the "Template Width" drop down list.

Setting the template background color

If you like to change the default body background color go to template configuration page, enter the hex value or the color name in the "Body background color" input field and save.

Use this tool to find the hex value of colors if you don't know it.

Template background image

The template has an option to set a custom background image. By deafult the background image will be centered, fixed and it will cover the full screen.

  1. Go to template configuration page and click the "Select" button at the "Background image" option.
  2. The file up-loader window will open so you can select an image from the image directory or upload a new image from your computer.
  3. After selecting or uploading the desired image, save the new settings.

It is preferred to use a background image with size 1920x1080px so the background is clear on large screens. Make sure that you compress the image at 75-80% if you use jpg file, or if it is a png file use the tinypng.com service to drastically reduce the size without losing quality.

Content area background color

If you like to change the default content background color, go to template configuration page, add the hex value or the color name in the "Content background color" input field and save.

Use this tool to find the hex value of colors if you don't know it.

Template fonts

The template is using the Google fonts for the body text and the headings. To select your preferred font family for the body or the headings go to template configuration page and select the template settings tab, in this tab you will find the following options for the fonts:

clicking the drop down a list with the available Google fonts will appear.  

Module positions

Module configuration

Here you will find information about how to configure the modules to display as the demo sites.


Categories module


Currencies module


Search module


Products module


Manufacturers module


Drop down login module

Disabling module positions on mobiles

The template has the option to disable the display of certain module positions on mobile devices (smartphones & tablets). The advanced mobile detection feature can detect if the visitor is using a mobile device and depending on your settings does not load the module positions for faster page load.

All you have to do is check and save the module positions you dont want to display ("Mobile Settings" tab on the template configuration page).

Custom css file

The template has an option that allows you to add custom css code to easily change the styling of any element of the template without modifying the core template css files.

In the css folder of the template create a file and name it custom.css . In this file you can put your css code that will override the styling of the template. After saving your custom css code in the custom.css file you must go to template configuration page, check the "Custom css file" checkbox and save the setting so the template can use the custom.css file.

The custom css file is not overwritten by the template updates.

Custom javascript file

The template has an option that allows you to add custom js code without modifying the core template files.

In the js folder of the template you will find a file named custom.js. In that file you can put your javascript code. After saving your custom js code in the custom.js file you must go to template configuration page, check the "Custom js file" checkbox and save the setting so the template can use the custom.js file.

The custom.js file is not overwritten by the template updates.

Google analytics & webmasters tools

To set up the Google analytics code first login to your Google analytics account and click the "Admin" link on the horizontal menu, in "PROPERTY" section click "Tracking Info" and then "Tracking code".

tracking code

Copy the tracking code and go to template configuration page, paste the code in the "Google Analytics" text area under "Seo Settings" and save the settings.

The template has a simple built-in option for displaying a notice about the use of cookies in you website that is mandatory in EU.

In order to enable the EU cookie law notice first create a Custom HTML module with your desired message for the visitors and publish it on position cookie.

Cookie law notice setup

Also make sure that you assigned the module to display on all pages.

Assign module on all pages

After the creation of the module go to template configuration page, check the "EU cookie law" check box and save the settings.

Fds slider

The template has a built in responsive image slider that displays only on home page. The slider can support up to 5 image banners and has settings for the height and timer of images swapping.

Fds slider settings

Product category list layout

If you like to display the products on all categories pages as a list, you have to set the option "Sublayouts for products in category" to "products_horizon", in virtuemart configuration.

Product sublayout options

To set the list layout only to specific category, you have to set the option "Sublayouts for products in category" to "products_horizon", in the menu item for this category.

List layout settings for specific category.