Theme Features

Search in the topbar

If you’ve enabled “Search from” option from Template Options -> Featured tab, the search icon will appear in the topbar:

After clicking this icon, the search widget will appear over the menu bar:

Login popup

The login popup is connected with menu item which has a CSS class gk-login – the class can be specified in the Appearance -> Menus parameters. Popup displays the following login form:

Banners

Banners with images use the following structure (may be used as a text widget or page source):

<ul class="gk-banners" data-cols="3">
<li data-scroll-reveal="enter bottom and move 50px over 0.55s after 0.3s"><div><img src="/templates/2014_4/images/demo/product1_bg.jpg" alt="Product I"> <strong>100% Satisfaction<sub>Guaranteed</sub></strong></div></li>
<li data-scroll-reveal="enter bottom and move 50px over 0.55s after 0.5s"><div><img src="/templates/2014_4/images/demo/product2_bg.jpg" alt="Product II"> <strong>100% Satisfaction<sub>Guaranteed</sub></strong></div></li>
<li data-scroll-reveal="enter bottom and move 50px over 0.55s after 0.7s" ><div><img src="/templates/2014_4/images/demo/product3_bg.jpg" alt="Product III"> <strong>100% Satisfaction<sub>Guaranteed</sub></strong></div></li>
</ul>

The data-cols attribute specifies how many columns will be displayed.

The above code uses also the scrollReveal.js attributes for animation on scroll.

Overlay in GK NSP

Every News Show Pro widget with the overlay CSS class will display the overlay for images on hover:

Features list

The above features list uses the following structure(may be used as a text widget or page source):

<ul class="gk-features" data-cols="4">
<li data-scroll-reveal="enter bottom and move 50px over 0.4s after"><strong>100% Satisfaction<sub>Guaranteed</sub></strong></li>
<li data-scroll-reveal="enter bottom and move 50px over 0.4s after 0.2s><strong>Free Delivery<sub>Anywhere worldwide</sub></strong></li>
<li data-scroll-reveal="enter bottom and move 50px over 0.4s after 0.4s"><strong>Students get 10% Off<sub>Lorem ipsum dolor sit amet</sub></strong></li>
<li data-scroll-reveal="enter bottom and move 50px over 0.4s after 0.6s" class="highlighted" ><strong>Call us anytime<sub>+055 5555 555 555</sub></strong></li>
</ul>

Specific item can be highlighted with adding to it the highlighted CSS class.

The data-cols attribute specifies how many columns will be displayed.

The above code uses also the scrollReveal.js attributes for animation on scroll.

Newsletter and social icons

StoreFront Theme has a Wysija plugin integrated. Full documentation of this plugin can be found here.

Newsletter widget from the plugin is located on the Bottom text  widget area.

Use the following code to create social incons:

<ul class="gk-social-icons">
<li><a href="https://plus.google.com/+gavickpro/posts" class="icon-gplus">Google+</a></li>
<li><a href="https://twitter.com/gavickpro" class="icon-twitter">Twitter</a></li>
<li><a href="https://www.facebook.com/gavickpro" class="icon-fb">Facebook</a></li>
<li><a href="http://www.pinterest.com/robertgavick/" class="icon-pinterest">Pinterest</a></li>
<li><a href="#" class="icon-youtube">YouTube</a></li>
<li><a href="http://www.gavick.com/magazine/?format=feed&type=rss" class="icon-rss">RSS</a></li>
</ul>