Vernissage

The Quark template demo content contains few headers - this article contains a code used for creating these headers. All headers was created as the Custom HTML module instances on the header module position. For the pages with headers which contain dark, we recommend to apply the dark-bg page suffix.

Frontpage header

Based on the following code:

<img src="/food/images/demo/header_bg.jpg" alt="" class="parallax-img" />
<div class="gkPage">
     <h1 data-sr="enter bottom and move 50px">Product Landing Page theme</h1>
     <h2 data-sr="enter bottom and move 50px and wait .2s">Advanced, unique and powerful premium theme</h2>
     <a href="#" class="dark btn-border" data-sr="enter bottom and move 50px and wait .3s">Learn more</a> 
</div>
<span class="mouse-icon"><span><span></span></span></span>

Our team header

Contact page header

Created with the following code:

<img src="/food/images/demo/contact_bg.jpg" alt="" class="parallax-img" />
<div class="gkPage">
     <h1 data-sr="enter bottom and move 50px">Get in touch with us</h1>
     <h2 data-sr="enter bottom and move 50px and wait .15s">Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.</h2>
     <div class="gk-social-icons-block" data-sr="enter bottom and move 50px and wait .3s">
        <a href="#"><i class="gkicon-fb"></i></a>
        <a href="#"><i class="gkicon-twitter"></i></a>
        <a href="#"><i class="gkicon-gplus"></i></a>
     </div>
</div>
<a class="gk-map-icon"><i class="gkicon-marker"></i> View on Google Maps</a>

Uses the following HTML code:

<img src="/food/images/demo/about_bg.jpg" alt="" class="parallax-img" />
<div class="gkPage">
     <h1 data-sr="enter bottom and move 50px">We are a digital design agency based in Manhattan, NY</h1>
     <h2 data-sr="enter bottom and move 50px and wait .2s">We help the world's top companies build<br />amazing digital products.</h2>
</div>
<span class="mouse-icon"><span><span></span></span></span>

The Quark 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 Quark 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 - used for generating proper spacing on the frontpage layout
• dark-bg - used for changing the logo and menu button color to white. Automatically added on all pages with big header like single item pages, category blog pages or user pages.
• error-page - used on the custom error page - added automatically

The Quark template is delivered with a separate countdown page:

In order to use it, please move the countdown.html file and the countdown folder from the template directory to the root directory of your page. Then it will be available under the following address www.yourdomain.com/countdown.html.

The timer can be modified inside the countdown.html file in the following line:

<div id="countdown" data-date="14-08-2016" data-time="12:00" data-timezone="2" data-final="Hello!">

The data-* attributes stores the date, hour, timezone and text which will be displayed where counting will be finished.

Our demo content frontpage contains a big area with tabs - based at our Tabs GK5 module.

The Tabs GK5 module needs few adjustments to achieve that layout:

• Under module settings please set Basic -> Module suffix to transparent-tabs box-wide clear,
• Under Advanced settings please enable option Add module wrappers.

Thanks to these settings the module will get transparent tabs and proper structure. The modules used as a tabs source can use module suffixes while module wrappers are added.

The first tab (visible on the above image) uses a Custom HTML module with the following content:

<h2 class="gk-big-heading"><span>N</span><span class="gk-number-block">1</span></h2>
<p>Multi award winning ski goggles with <br />the multi lens technology</p>

The module has a background-image set in the Custom HTML module settings and uses the following suffixes: very-big-spaces clear parallax-bg.

The last tab uses a very similar code, but instead of the parallax image in the background it uses the following suffixes: very-big-spaces clear dark-bg

The second tab contains a features block description:

It uses a Custom HTML module with the following suffixes: big-spaces clear color-bg.

The content of the module is following:

<div class="gkPage">
 <div class="gk-cols gk-features" data-cols="2">
  <div>
   <img src="/food/images/demo/docs/app_features.png" alt="Features" />
  </div>
  <div>   
    <dl>
       <dt>Impact protection</dt>
       <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit. Ut varius purus lectus, a pharetra mi blandit at. </dd>
       <dt>Lens Tints</dt>
       <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit. Ut varius purus lectus.</dd>
       <dt>HD Polarized</dt>
       <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus.  Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit.</dd>
       <dt>High Definition Optics</dt>
       <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum.  Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit.</dd>
     </dl>
  </div>
 </div>
</div>

The third tab contains a price table:

Similarly as the other tabs it uses Custom HTML module with the following suffixes: gray-bg big-spaces.

The content of the module is following:

<div class="gkPage">
<div class="gk-price-table" data-cols="3">
<dl>
<dt><strong>Basic</strong><span>69<sub>€</sub></span></dt>
<dd>
<ul>
<li>Tation ancillae appetere</li>
<li>Lorem ipsum dolor</li>
<li>Stet nemore te his</li>
</ul>
</dd>
<dd><a href="#">Buy now</a></dd>
</dl>

<dl class="gk-premium">
<dt><strong>Premium</strong><span>99<sub>€</sub></span></dt>
<dd>
<ul>
<li>Tation ancillae appetere</li>
<li>Lorem ipsum dolor</li>
<li>Stet nemore te his</li>
</ul>
</dd>
<dd><a href="#">Buy now</a></dd>
</dl>

<dl>
<dt><strong>Plus</strong><span>79<sub>€</sub></span></dt>
<dd>
<ul>
<li>Tation ancillae appetere</li>
<li>Lorem ipsum dolor</li>
<li>Stet nemore te his</li>
</ul>
</dd>
<dd><a href="#">Buy now</a></dd>
</dl>
</div>
</div>

In the Quark template we have implemented a new feature - 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.

This article was created only for preparing a landing page based on modules.

In the Quark 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