Documentation

LightBox

Introduction

LightBox is a well-designed, responsive and multipurpose Joomla! 3.6+ template for consulting company, consultants financial and law companies, and individual tax/finance advisors and all kinds of small businesses. Professional template is important part of company branding and marketing efforts. It is an ideal choice to easily create corporate websites.

Our template framework (Helix 3) is integrated with this template. Its QuickStart package includes helpful and time-saving template demo. Prebuilt page layouts can be tweaked and personalized. Easily edit the real content and compose the page layout with drag & drop SP Page Builder 2.x Pro (included in the package) which means greater visual customization, increasing your site’s unique appeal. Custom article formats are some of the most powerful parts of the template since they help you add pages for audio, video, galleries, and more.

Template code is free of security issues. This template features both full width and boxed settings.  LightBox is fully responsive and retina ready, so you can be sure that every client will have an optimum experience of your content and services, on any device. Translation ready and all content can be translated very easily. Template supports languages written in a Right-To-Left direction (RTL Support). Just download QS, install and add custom text and photos, and start branching out!

 

Technical requirements

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! Supports for PHP 5.3 and 5.4 ended long time ago.
Our SP PB component requires at least PHP 5.6 or later. We strongly recommend using 7.0.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

These below settings of PHP are strongly recommended for Joomla! in order to ensure full compatibility and website security with latest version of Joomla!:

In most cases those values can be changed in php.ini or .htaccess file. Please contact your web hosting service provider to be sure that your server complies with the requirements or to ask them where/how to change above PHP settings.
About recommended browser we suggest to use the latest version of Firefox, Safari, Chrome or Internet Explorer 10+. Please remember that Internet Explorer versions 8 and older are NOT supported anymore by Microsoft company.

 

Template vs Quickstart differences

The Quickstart package is a complete demo website. It's basically a fully functional and the entire Joomla! 3 package containing the CMS itself, components, modules, chosen template, Helix3 framework plugin with all the configurations and data that we used on the demo site. You can use it to recreate/restore demo site appearance. You don't have to use demo content to build your own website, demo-dummy content is only for showing the features of current template and included components. After all you can remove it.
Standalone 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. Also subpages created via SP Page Builder should be restored or created from scratch. So if you are not advanced user please install the template Quickstart on your testing ground/environment, just to get more insights on sample content and advanced usage. You will be able to check each setting or used demo content.

In most cases JoomShaper Template packages include overridden of several components views, for example: AcyMailing and SP Page Builder.

Note! We recommend that you download Joomla and/or Quickstart only from the official websites. If you download the installation package from other than the official one, there is a risk of malicious code in the setup files. We do not support illegal, mostly infected, copies.

Note! Inside QuickStart there is a full version of SP Page Builder Pro installed already. But during purchase of template membership you didn't get a update possibility of this component from Joomla! back-end. To get standalone PRO version with all current updates you have to purchase it from that page: https://www.joomshaper.com/page-builder

How to install Quickstart

  1. Unfortunately, it is not possible to install the Quickstart package inside an existing Joomla installation via the Extension Manager.

    Why? 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. Download from our site package : TemplateName_quickstart_j3.zip.
  4. Unzip Quickstart package to get separate folders and files before sending them to server.
  5. Upload the extracted files and folders to your web server - for that task please use SFTP/FTP tool - in most cases it will be public_html folder.
  6. Create a MySQL database and assign a user to it with full permissions. In most cases we suggest to use a new/fresh database (MySQL) for all QS installations.
  7. Open your browser and navigate to your main domain (i.e. http://mydomain.com), or to the appropriate subdomain (i.e http://mydomain.com/new), depending on where you have uploaded the Joomla installation package.
  8. You will be taken to the first screen of the Joomla Web Installer.
  9. Please do not use "admin" as a your default Super Admin Username (!). Use something more unique during installation process (security reasons!).
  10. Default Demo sample data will be automatically installed on your server.
  11. After successful installation you should see green successful message.
  12. Remove index.html file from root folder - if you have it.
  13. Login to admin area www.domain.com/administrator
  14. Update components and Joomla if necessary

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 requests good PHP settings. Please check above mentioned 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.

 

No images from demo?

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 contains mostly only image placeholders (Grey background blocks with JoomShaper logo inside).
Unfortunately 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 the real website purposes. First online impression is the most important, so please use high quality and legal photos.

 

Template Update

Before you go ahead with the update please check template changelog on product page. It is the best practice to backup both your files and database regularly and especially before making some serious updates. We recommend you to use free backup component for Joomla! like Akeeba Backup. Typical template update process is easy. You can manually reinstall new template using a new package. Second option can be done from Extensions: Update but request from you filling two fields License Key and email in template "Update settings" tab.

 

Typography

In template demo we used Google Font named: Titillium Web and Arvo.
Check template Typography tab inside template settings, of course you can set your own font-family. More information about Typography you can find >> here <<. Remember that not all Google Fonts support multiple scripts (like Latin, Cyrillic, and Greek for example). Use them if you need to use diacritical marks/chars, for native language letters.

Layout - Module Positions

The following screen-shots highlights the 3 different 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 in the grid. 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.

Default  Layout

Module Positions

These are the all available in template module positions which you can use (unique one's are featured):

  • title
  • top1
  • top2
  • top3
  • logo
  • menu
  • search
  • blog-top
  • blog-bottom
  • slide
  • user1
  • user2
  • user3
  • user4
  • left
  • right
  • feature
  • slider
  • position1
  • position2
  • position3
  • position4
  • position5
  • position6
  • position7
  • position8
  • bottom1
  • bottom2
  • bottom3
  • bottom4
  • bottom5
  • breadcrumb
  • footer1
  • footer2
  • comingsoon
  • offcanvas
  • pagebuilder
  • 404
  • debug

It means that you can use all on them on layout grid.But first you have to add new block and choose those position names. If you need more or more unique names, you have to add new name inside: templates\shaper_lightbox\templateDetails.xml

 

Social SideBar

LightBox version of Helix3 template gives you the ability to add various types of floating social media links on the side of your site. All in one handy navigation menu. Set your bar on the left or right side of the page. Don't worry they are mobile friendly. Floating Sidebar allow you to add following social icons in your website: Facebook, Twitter, Google Plus , Pinterest, Linkedin ,Dribbble, Behance, YouTube, Flickr, Skype, VK (ВКонта́кте)  and Custom.

List of used extensions

In JoomShaper Quickstart (Demo content) we used both Joomla! core and additional extensions. Here is a full list of them:

  • SP Page Builder 2.x Pro - Pro version is built-in in QuickStart only (JoomShaper.com)
  • AcyMailing Starter (component + module from Acyba.com)
  • Articles - Latest (Joomla core module)
  • Articles - Categories (Joomla core module)
  • Breadcrumbs (Joomla core module)
  • Custom HTML (Joomla core module)
  • Search (Joomla core module)
  • Menu (Joomla core module)

Of course you can install additional modules or components. But listen main rule: less is more, also in security area.

 

Menu Settings

In current template in "Main Menu" section we used:

  • Main Menu (MegaMenu from template)
  • Mobile [=]  Off Canvas   Menu - is visible also in tablet and mobile view, if you have menu module published on "offcanvas" position.

 

Homepage Design

Default homepage like all variants in demo of template were created using SP Page Builder Pro 2.x component. The following screenshot shows the layout of "Home" page (Default variant) with list of the addons used in the demo content configuration.

 

Background color

1) Section background color:

Two(2) types of Section background color used in this template.
We used it as a class name into main "row setting" from sp page builder (Anyone can change it).

These are class name for Section background color:
-> .primary-section-bgcolor
-> .secondary-section-bgcolor

These are variables name for Section background color:
-> @primary_section_bgcolor
-> @secondary_section_bgcolor



2) Curve Border:

Four(4) types of curve border used in this template. So, we manage it with 4 types of classes.
We added this classes in "row setting" from sp page builder (Anyone can change it).
Notes: "primary curve border" for "primary seciton bgcolor"
      "secondary curve border" for "secondary seciton bgcolor"

i)   .section-curve-border-left-primary
ii)  .section-curve-border-right-primary
iii) .section-curve-border-left-secondary  
iv)  .section-curve-border-right-secondary



3) responsive margin & padding :
Decrease Section margin & padding, when windows size less than 992px & 768px.

These are for less than 992px:
.sm-sppb-res-m-b{ margin-bottom: 50px;}
.sm-sppb-res-m-t{ margin-top: 50px;}


These are for less than 768px:
.sppb-res-m-0{ margin: 0;}
.sppb-res-m{ margin: 50px 0;}
.sppb-res-m-t{ margin-top: 50px;}
.sppb-res-m-b{ margin-bottom: 50px;}
.sppb-res-p-0{ padding: 0}
.sppb-res-p{ padding: 50px 0}
.sppb-res-p-t{ padding-top: 50px}
.sppb-res-p-b{ padding-bottom: 50px}
.sppb-res-p-b100{ padding-bottom: 100px}
.sppb-res-mixed-p{ padding: 50px 0 100px}

Newsletter