Log in

The Box template uses a specific form of the error page - it is displayed like a part of the website, not a separate page - according to the Google SEO recommendations:

The content of this error page can be edited in the layouts/blocks/error_page.php file.

When the error 404 is generated the error.php file is called and it redirects to a custom error page. That's why the custom error page needs a non-existing menu item id - default it is 99999, but you can change it under the template advanced settings:

The custom error page won't display the error details - only the error code and a short note. If you want to get more details about your error, please temporary rename file error.php inside the template directory to i.e. __error.php. Then the standard error page with full informations will be displayed.

The Box template uses few page suffixes which can be configured under the template settings in the Features tab:

The most important page suffixes are following:

  • frontpage-grid - used for generating proper spacing on the frontpage layout,
  • nav-transparent - used for generating transparent menu bar (added automatically for all K2 and com_content item pages with set featured image),
  • error-page - used on the custom error page - added automatically.

The Box template fully uses LESS language for generating the CSS files of the template. Thanks to the built-in LESS parser you can forget about additional LESS compilers - if you enable the template built in compiler then after every change in the template less files you will get new css files.

The LESS language features are described in the official documentation page.

Please remember that if you decide to modify the *.css files you shouldn't enable the LESS parser - after enabling it you will lose your CSS changes - it will be overwriten by the code based on the not modified *.less files.

The LESS compiler can be enabled under the template advanced settings:

Please remember that the LESS parser should be enabled only while you are editing your LESS files - it needs relatively big amount of server resources and will cause slower page loading time. That's why please remember to disable the LESS compiler after finishing the *.less files modifications.

The LESS files are located under the less directory. Most of the files are loaded inside the main.less file which transform into the template.css file. Thanks to that we have limited amount of the CSS files request while you still have separate files like template.less, gk.stuff.less, k2.less etc.

The most important feature is fact that you can change easily the template colors and font-sizes using one file - variables.less. This file contains a variables with basic colors and font-sizes used inside the template CSS code. By changing one variable i.e. @primary_color, you can change the whole template colors.

In the Box template we have implemented JavaScript files management. Thanks to that functionality you can remove few unnecessary files and make your website loading faster.

In order to disable selected JS files, you have to go to the template settings and under the "JavaScript files settings" you can disable or enable few switchers:

Every switcher is responsible for other script or functionality.

  • MooTools core - disable it if you don't have any script which uses MooTools code.
  • MooTools more - if MooTools core is disabled then this switcher should be also disable - it won't work without MooTools core.
  • jQuery noConflict - this script is unnecessary if you are not using other frameworks or libraries like MooTools
  • bootstrap.min.js - our template doesn't use Bootstrap - if your extensions are not using it, then you can disable this script.
  • modal.js - if the lightbox functionality is not necessary for you, please disable this script. We are not using this feature in our template and the demo content.

In the Box template we have implemented the animation engine based on the scrollReveal.js script. This script creates elements scroll animations in a very simple way.

Thanks to this script you can describe an animation using a language very similar to natural.

Description of the animation is placed in the data-sr attribute:

<!-- These 2 lines are equivalent -->
<p data-sr="enter top and move 25px"> foo </p>
<p data-sr="enter from the top and then move 25px"> foo </p>

The full description of the syntax is available on the project documentation page

Ut dignissim aliquet nibh tristique hendrerit. Donec ullamcorper nulla quis metus vulputate id placerat augue eleifend. Aenean venenatis consectetur orci, sit amet ultricies magna sagittis vel. Nulla non diam nisi, ut ultrices massa. Pellentesque sed nisl metus. Praesent a mi vel ante molestie venenatis.

Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

On this page you can see basic suffixes used in this template.

01 The clear suffix is very useful to create banners or images without additional borders, margins and paddings. The clear suffix is also very useful inside the mainbody, mainbody_top and mainbody_bottom module positions.

02 For the News Show Pro GK5 and Tabs GK5 modules please always disable usage of the default CSS styles in the module settings.

03 Suffix animated-color-bg can be used to create animated circles. Please remember that you can disable animation in the template settings.

04 Some suffixes like: gray-bg, overlay, animated-circles-left, animated-circles, big-spaces, beige-bg will affect the whole module position, not only the specific module box.

The Box template contains following module positions (and few hidden module positions - for tabs: tab1-tab10)

The logo and copyrights areas contains content which can be set under the template params.

Log in or Sign up