Documentation

Macro

MACRO multi-purpose template (and QuickStart package) for Joomla 3.6+. It's a clean and very creative template suitable for different kind of projects: Small Business, Product Page and Creative Portfolio site. It includes special pre-designed pages for coming soon, preload and error 404. Full of features and flexible design can be used to create any other website. Theme has many options to customize the final look of your website.

demo macro home

DOWNLOAD | TEMPLATE DEMO

 

Technical requirements

First, thank you and we are happy that you are one of our customers and we assure you won't be disappointed as well. Spending several minutes reading the manual may save lot's of your time and avoid questions with obvious answers. It is strongly recommended that you always use the latest stable version of Joomla to ensure all known bugs and security issues are fixed. Template will only function properly on Joomla 3.6 and newer versions.

To prevent problems with used components and installation freezes (never ending) use following settings:

  • PHP 5.6 or PHP 7.x
  • MySQLi 5.5+
  • PostgreSQL 9+

Note! Support for PHP 5.3 is discontinued. It's end of life since August 2014. PHP 5.5 security support ended July 10th 2016, PHP5.6 active support ends Dec 31st 2016.
Our components requires at least PHP 5.4 or later and is fully compatible with PHP 5.5, 5.6 and 7.x. We strongly recommend using PHP 5.6 or 7.x.

To use QuickStart please use these php settings :

  • memory_limit --> at least 64M (128 MB)
  • max_execution_time --> at least 240 (by default is set to 30 seconds only.)
  • Magic Quotes GPC off

To use this template you must be running on Joomla 3.6+ or higher, PHP 5.5 or higher. Please contact your web hosting service provider to be sure your server complies with the requirements.

 

Template Demo Appearance

Following guide contains the basic configuration settings for the Joomla 3 template. Using these information you will be able to configure your template when you cannot use the Quickstart package. This template has been based on Helix3 Framework  (more).

You may ask: "How to make my site look like the Demo" and the answer is quite simple. There are two ways to make your own site to look exactly like our Demo product:

  1. The Quickstart installation is the best solution if you are building a brand new website and you want to achieve the same look as the one in the template demo. Download from our site package (macro_quickstart_j3.zip) which includes: Joomla 3+, template, modules, components, plugins and sample data. The Quickstart package is a complete website. Install the quickstart package like any other Joomla installation and  then change our demo texts and images.
    Please also read our article -> I’ve installed Quickstart, So what’s next?
  2. The Manual installation is preferred if you just want to install the template to an existing website which already has some content. However, keep in mind that when you install the template to an existing website, you will also have to reconfigure your modules because the new template has different module positions. If you have a site with your own content, that already exists, you have to install the template and all related extensions.

demo img smThe images shown in the live preview are for demonstration purposes only and are not included in the download package. Due to license QuickStart package contain mostly only image placeholders (Pictures with JoomShaper logo inside). Unfortunately but we cannot include in Quickstart package all photos from original Template Demo. We assume that our customers have (or should have) their own photos, which better fit to real website purposes. First online impression is the most important, so please use high quality and legal photos.

Note! Template package (~2 MB) doesn't include any modules/components nor demo content. If you manually installed the template on your existing setup, you will have to manually create each article and install & set all modules to suit your needs using our example settings. So if you are not advanced user please install the template Quickstart (~30 MB) on your testing ground/environment, just to get more insights on sample content and advanced usage. You don't have to use demo content to build your own website, demo-dummy content is only for showing a features of current template and included components.

 

How to install Quickstart

  1. Unfortunately, it is not possible to install the Quickstart package inside an existing Joomla installation via the Extension Manager, because the Quickstart also includes the Joomla! CMS itself. This package is strictly for use with a new Joomla! installation to provide you with a duplicate of our demo for that particular template.
  2. You can install Quickstart just like a typical Joomla 3.x installation process (step by step).
  3. Unzip Quickstart package to get separate folders and files before sending to server.
  4. Please do not use "admin" as a your default Super Admin Username (!). Use something more unique during installation process (security reasons!).
  5. In most cases we suggest to use a new/fresh database (MySQL 5+) for all QS installations.

Please also read our article -> I’ve installed Quickstart, So what’s next?

The Manual template installation is preferred if you just want to install the template to an existing website which already has some content. However, keep in mind that when you install the template to an existing website, you will also have to reconfigure used modules because the new template has different module positions. But we always suggest to install QuickStart on temporary location, like sub-domain, to check all settings and demo content.

The Quickstart installation problems

Because QS includes many extensions and their settings it request good PHP settings. Check mentioned above technical requirements.

If during QuickStart installation on localhost you have never ending installation, please check your PHP settings (suggested values above) and if those settings will not help please make small customization:

  • Open in your text editor the following files: installation\sql\mysql\joomla.sql and installation\sql\mysql\sample_data.sql
  • Find all instances of ENGINE=InnoDB and change/replace to ENGINE=MyIsam
  • Now return in your installation procedure one step back and try again.
  • Use MySQL in choose field not MySQLi if you still have problems with database step.

 

Template Demo Settings

If you installed only template (not QS) you can import template demo settings. Helix3 template allows you to Export-Import its settings from "Advanced" tab. It means that you have to download or open: shaper_macro_settings.txt - file in text editor, then select whole text, copy and paste inside Import field of your template. It includes all basic settings of Template only !. If you're using Quickstart you doesn't have to do this, default settings are already there. Those are template settings, but doesn't include demo content.

import export

 

Preloader Screen

preloaderpreloaderIn Macro template there is a new feature a simple library to show your users a splash page with animated boxes while your application loads content. The preloader works smoothly and without any issues also on small screens. It was based on CSS animations.

This option can be enabled and disabled, switcher Preloader: Yes/No - you will find in Basic tab at the top area.

 

 

Go to Top

topCreating a good user experience (UX) on your website is very important to keep people on the page. When a user scrolls past a certain point on the website, this helpful "Go to Top" button appears (right bottom position), enabling users to easily return to the top of a page. It's a little detail which enhances navigation experience on website with long pages. It’s works smooth also on mobile devices with smaller screens. We think that having a back-to-top button is pretty useful.

 

Typography

In template demo we used Google Font named: Raleway for main and menu typography and Arvo for headers only. Check template Typography tab inside Macro template settings, of course you can set your own font-family. More information about it you can find >> here <<. This font have wide range of font subset / character sets. Remember only some of the fonts in the Google Font Directory support multiple scripts (like Latin, Cyrillic, and Greek for example). Use them if you need to use diacritical marks/chars, native languge letters.

fonts

Blog settings

Here are default blog settings from demo template.

blog settings

 

Macro Module Positions

The following screen-shot highlights the default layout module positions that we used in current template. By using Layout builder in Helix3 users will be able to move positions or change their size. Our in-build layout builder from template settings provide the opportunity to add new positions, columns, rows wherever you need as much as moving elements.

layout

Homepage Layout

The following screenshot shows the detail of Macro template settings of "Home" page with list of the addons used in the demo content configuration. Please note, Home page was built using SP Page Builder (PRO) component. Here is default "Home" layout from demo site created in SP Page Builder Pro tool provided by JoomShaper team.

home made by page builder

Used Extensions

In our DEMO version of template we used core and additional extensions, here is a full list of them:

  • SP Page Builder (Pro) - Pro version is built-in in QuickStart only (JoomShaper.com)
  • SP Simple Portfolio (component + module from JoomShaper.com)
  • SP Flickr Gallery (JoomShaper.com module)
  • AcyMailing Starter (component + module from Acyba.com)
  • Articles - Latest (Joomla core module)
  • Articles - Categories (Joomla core module)
  • Banners (Joomla core module)
  • Breadcrumbs (Joomla core module)
  • Custom HTML (Joomla core module)
  • Search (Joomla core module)
  • Tags - Popular (Joomla core module)
  • Menu (Joomla core module)

Module Manager View - with list of all used and published modules

modules

 

Search module next to menu

 

search next to menu

In desktop version of template there is a search icon (')  next to menu. It's normal search module but with addcional Class Suffix name: macro-top-search, and chosen layout "topsearch".
Search module must be published on "menu" module position as well.

search 2

 

Mobile Menu

mobile menuThis template was based on Helix3 framework it means that allows you to use Off Canvas Menu [=] - look at the image on the left side). It doesn't have to be Main Menu, it means that you can easily use different menu for desktop and  separate menu for Mobile & tablet devices.

To create such a menu Add/Edit a Menu module and change its position to "offcanvas", select Menu from the list and assign module to all pages. Offcanvas menu can be also used together with classic desktop menu in one row. Like you might seen on demo page. Just check Menu tab in template settings to customize it. 
menu desktop mobile

To add search or other module inside offcanvas menu window, you have to publish those additional module(s) in "offcanvas" position and then choose their order relative to each other.

Translation

Both Helix3 and SP Page Builder can be translated, because their language layer is based on .ini files. You can also check here: https://www.transifex.com/joomshaper/public/

Guide how to translate phrases from SP Page Builder you will find here: https://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder#documentation-14

 

Menu colors

Using custom CSS you can change color of menu bar and menu items from default colors.

For example to change menu bar after scroll down, from transparent black to transparent white with black menu items, please use following code inside custom.css file (more):

.has-sub-image #sp-header.menu-fixed, 
.has-slideshow #sp-header.menu-fixed,
#sp-header.menu-fixed {
    background-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}

header.menu-fixed .sp-megamenu-parent > li > a { color: black !important;}
header.menu-fixed .macro-top-search .icon-top-wrapper { color: black; }

 

 

Coming soon page

During time of building new site, for example process of adding new content, you can hide construction stages.

coming soon

All settings are "hidden" inside template settings in Basic tab, just scroll down.

coming soon2

Background color is taken from Preset Major color - check "Presets" tab.

If you need newsletter or any  other module there please choose/publish on "comingsoon" position. Module Assignment: On all pages.

newsletter module

Newsletter