Search Our Knowledgebase

  • Joomla
  • Video
  • WordPress
Or ask a question in our official product support forum boards

Emma and Mason Guide

This guide will outline the setup process and configuration of each area of this template and any extensions associated to it.

Installation

Depending on your needs you'll need to select one of the following methods for setup. Site Shapers will save you a lot time configuring your site to run look like our demo. You can simply remove and edit content instead of creating and setting up extensions, content, layouts, etc. If possible, we highly recommend using a Site Shaper, but we know it may not be a viable solution in every situation. If a Site Shaper is not an option we still recommend installing it a sub folder for reference.

OPTION 1 - SITE SHAPER - What is a Site Shaper? A Site Shaper is a full Joomla install including the template, all extensions, and content used on the demo; excluding any stock photography. Once you install it your site will look just like our demo. You would choose this method if you don't have an existing site that you want to build off.

NOTE: This method includes Joomla so you can't install this into the backend of an existing Joomla website. You will be creating a site from scratch that will only have what you see on the demo. You can't use any previous website content you may have with this method; it would be overridden. Please refer to the following video and article tutorial on how to install a Site Shaper:
http://www.shape5.com/documentation/Joomla/Getting-Started/How-to-Install-a-Joomla-Site-Shaper

OPTION 2 - MANUAL INSTALLATION - This method will be a bit more time consuming than the Site Shaper. We recommend this method if you already have a website up and running that just needs an update with a new theme. This method will not install any demo content, all content and extensions must be setup manually. Settings of content of extensions will need to be manually copied from a Site Shaper installation; which we recommend installing in a sub directory for reference of the demo settings.

  1. Install the template package in the backend of Joomla, and set it as the default template. If you are unfamiliar with this process please visit the following url for a detailed tutorial on how to install and configure a template:
    http://www.shape5.com/documentation/Joomla/Getting-Started/How-To-Install-A-Joomla-Template
  2. Download and install the S5 Flex Menu Plugin. This plugin adds additional functionality to the menu system such as multiple columns, sub text, and more. The plugin is required to be installed in order for the template to function properly. Please visit the following url for a detailed tutorial on how to install this plugin:
    http://www.shape5.com/documentation/Vertex-Framework/Joomla-Specific/Joomla-Flex-menu
  3. Install and configure any extensions used; details for these are found in the "Extensions Used" section of this guide. Be sure to review the "Custom HTML Code" section as well, often times we use custom HTML in our extensions.
  4. Last you will need to configure the template settings, upload your logo, adjust your footer text, setup any frontpage articles, or make any other desired configuration changes. The remaining sections in this guide outline each of these areas and provide tutorials and further information.

Extensions Used

Below is a list of all the extensions used with this template, along with a link to its associated tutorial for setup. Be sure to review the "Custom HTML Code" section of this guide, many of these extensions very often use the custom HTML documented on the Custom HTML page. We highly recommend installing the site shaper in a sub directory for reference of the demo settings. Simply install the Site Shaper to a sub folder, by following the tutorial outlined in the "Installation" section of this guide. With the site shaper installed you will be able to view each extension listed below, and their exact settings used on the demo, and be able to replicate them.

  1. S5 Accordion Menu - This extension puts any Joomla menu into an accordion menu for easy navigation.
    http://www.shape5.com/documentation/Joomla/Extensions/S5-Accordion-Menu
  2. S5 Box - This extension is typically used for the Login and Register modules. The Login and Register text is controlled under the General tab in the template configuration, save this text blank to disable them.
    http://www.shape5.com/documentation/Joomla/Extensions/S5-Box---Login-and-Register-Setup
  3. S5 Tab Show - This extension will display modules within sliding tabs.
    http://www.shape5.com/documentation/Joomla/Extensions/S5-Tab-Show
  4. S5 Flex Menu - This is an extension of the default Joomla menu manager.
    http://www.shape5.com/documentation/Vertex-Framework/Joomla-Specific/Joomla-Flex-menu
  5. S5 Live Search - This extension adds instant search capability for your site.
    http://www.shape5.com/documentation/Joomla/Extensions/S5-Live-Search
  6. S5 Disqus Comments - This extension adds Disqus comments to articles.
    http://www.shape5.com/documentation/Joomla/Extensions/S5-Disqus-Comments
  7. S5 Quick Contact - This extension adds a quick and easy contact form for your site visitors to get in contact with you.
    http://www.shape5.com/documentation/Joomla/Extensions/S5-Quick-Contact

Configuring the Template Settings

This template comes loaded with options that you can use to customize your site exactly how you want it through the easy to use Vertex admin.

Some features in the template configuration area are specific to a particular template, and those settings are found under the Theme Settings tab of the configuration. All other settings in the same configuration area are Vertex framework features that all Vertex templates have, and are found under the other tabs of the configuration. Vertex is our own template framework that our products are built on, and is one of the most flexible and powerful frameworks available. The Vertex framework is a set of functionality that creates the core logic and structure of a template, while adding many great features such as: S5 Flex Menu, Column Widths, Page Width, Multibox Popups, Tooltips, Info Slides, Google Fonts, File Compression, Responsive Options, Mobile Navigation, Color Pickers, and so much more!

Vertex is built directly into each template and does not require an additional installation, and can be patched for free with the latest framework files at any time.

To read more about Vertex and all of its great features please visit the following url:
http://www.shape5.com/joomla/framework/vertex_framework.html

To learn how to use and configure different features such as the Info Slides, or S5 Flex Menu, please visit the following urls:
http://www.shape5.com/documentation/Vertex-Framework/Core-Features
http://www.shape5.com/documentation/Vertex-Framework/Joomla-Specific

To navigate to these settings:

  1. In the backend of Joomla use the top menu to navigate to Extensions / Templates, which will bring you to the Template Styles Manager:

  2. Once you are on the Styles Manager page, click on the Style Name of the template you just installed to enter its configuration.
  3. This will bring you to the template configuration screen where you can edit the template's settings.
Note - Be sure to read the tooltips for each setting in the configuration, they full document how each setting works.

Most of the major settings of Vertex, including: row sizes, body width, responsive options, logo settings, etc. are found under the "Main" tab in the Vertex admin:

Custom HTML Code

We often need to use custom HTML to obtain the layouts shown on our demos. This code is generally entered into custom HTML modules, content items, or our own S5 extensions. It is best to enter this code directly into the HTML editor rather than use its graphical interface. Any custom HTML used for this design can be found on the url below:
http://www.shape5.com/demo/emma_and_mason/index.php/tutorials-menu-48/joomla-tutorials/custom-code-for-this-design

Some designs come with pre-built "Pages" to let you setup a specific type of page very quickly. The custom HTML for these pages is found directly on the demo page itself. For example, the code for setting up a "Price Table Page" can be found here:
http://www.shape5.com/demo/emma_and_mason/index.php/pages/pricing-table

Learn how to enter custom HTML into the editor with the following tutorial:
http://www.shape5.com/documentation/Joomla/Getting-Started/How-To-Enter-Custom-HTML-Into-The-Editor

Logo Setup

Setting up a logo is simple. The easiest way to upload your own logo is to over-write the file called s5_logo.png in the template's "images" folder with your own. The following tutorial will guide you through this process as well other options, such as uploading your own custom file or using a module:
http://www.shape5.com/documentation/Joomla/Getting-Started/How-To-Change-The-Logo-in-Joomla

Positions and Module Styles

Each Vertex template has dozens of module positions available, usually 100 or more. For a complete list of all module styles, and to see a layout of the available module positions please visit the following url:
http://www.shape5.com/demo/emma_and_mason/index.php/tutorials-menu-48/setting-up-module-styles

Search and Menus

Setting up the search and menus is fairly easy. Please visit the following url to learn how to set them up:
http://www.shape5.com/demo/emma_and_mason/index.php/tutorials-menu-48/search-and-menus-setup A detailed tutorial for our S5 Flex Menu can found here:
http://www.shape5.com/documentation/Vertex-Framework/Joomla-Specific/Joomla-Flex-menu

Footer Text

Changing the footer text can be done by either over-writing the footer.php file in the template's "vertex" folder with your own modified version or by publishing a module to the "footer" position. Keeping any reference to shape5.com in the footer is not required. The following tutorial will guide you through this process.
http://www.shape5.com/documentation/Joomla/Getting-Started/How-To-Change-The-Footer-Text

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.