This guide will outline the setup process and configuration of each area of this template and any extensions associated to it.
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:
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.
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.
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:
To learn how to use and configure different features such as the Info Slides, or S5 Flex Menu, please visit the following urls:
To navigate to these settings:
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:
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:
Learn how to enter custom HTML into the editor with the following tutorial:
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:
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:
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/charlestown/index.php/tutorials-menu-48/search-and-menus-setup A detailed tutorial for our S5 Flex Menu can found here:
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.