Zappy

Support Our Blog

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

 

Scope of free support

 

We can help you with:

1. Responding to questions or problems regarding the item and its features
2. Fixing any discovered item’s bugs
3. Providing updates to ensure compatibility with new software versions

This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).

If you would like to read more
about bootstrap framework click here :

Bootstrap Documentation

Grid System and Single row structure

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here

Basic grid HTML:

XHTML

<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<div class="row">     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>   </div>   <div class="row">     <div class="col-md-8">.col-md-8</div>     <div class="col-md-4">.col-md-4</div>   </div>   <div class="row">     <div class="col-md-4">.col-md-4</div>     <div class="col-md-4">.col-md-4</div>     <div class="col-md-4">.col-md-4</div>   </div>   <div class="row">     <div class="col-md-6">.col-md-6</div>     <div class="col-md-6">.col-md-6</div>   </div>

Page structure

Below you will find default page structure :

If you would like to edit the color, font, or style of any elements, just do the following:

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

I.E.

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

Colors

The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

Main Menu structure

Just change brand name, upload your logo to images/content/ folder and you’re ready to go!

In order to create mega menus read the documentation here:

Yamm 3 Documentation

Icons

We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

Appearing with Animation when element in viewport

Animation can be turn off just be remove “withAnimation” class from body.
Usage:
– add “animated” class to element and data-fx=”animation-type”. That’s it.

Available animation : http://daneden.github.io/animate.css/

• data-fx=”hinge”
• data-fx=”bounce”
• data-fx=”flash”
• data-fx=”pulse”
• data-fx=”shake”
• data-fx=”swing”
• data-fx=”tada”
• data-fx=”wobble”
• data-fx=”bounceIn”
• data-fx=”bounceInDown”
• data-fx=”bounceInLeft”
• data-fx=”bounceInRight”
• data-fx=”bounceInUp”
• data-fx=”bounceOut”
• data-fx=”bounceOutDown”
• data-fx=”bounceOutLeft”
• data-fx=”bounceOutRight”
• data-fx=”bounceOutUp”
• data-fx=”fadeIn”
• data-fx=”fadeInDown”
• data-fx=”fadeInDownBig”
• data-fx=”fadeInLeft”
• data-fx=”fadeInLeftBig”
• data-fx=”fadeInRight”
• data-fx=”fadeInRightBig”
• data-fx=”fadeInUp”
• data-fx=”fadeInUpBig”
• data-fx=”fadeOut”
• data-fx=”fadeOutDown”
• data-fx=”fadeOutDownBig”
• data-fx=”fadeOutLeft”
• data-fx=”fadeOutLeftBig”
• data-fx=”fadeOutRight”
• data-fx=”fadeOutRightBig”
• data-fx=”fadeOutUp”
• data-fx=”fadeOutUpBig”
• data-fx=”flip”
• data-fx=”flipInX”
• data-fx=”flipInY”
• data-fx=”flipOutX”
• data-fx=”flipOutY”
• data-fx=”lightSpeedIn”
• data-fx=”lightSpeedOut”
• data-fx=”rotateIn”
• data-fx=”rotateInDownLeft”
• data-fx=”rotateInDownRight”
• data-fx=”rotateInUpLeft”
• data-fx=”rotateInUpRight”
• data-fx=”rotateOut”
• data-fx=”rotateOutDownLeft”
• data-fx=”rotateOutDownRight”
• data-fx=”rotateOutUpLeft”
• data-fx=”rotateOutUpRight”
• data-fx=”slideInDown”
• data-fx=”slideInLeft”
• data-fx=”slideInRight”
• data-fx=”slideOutLeft”
• data-fx=”slideOutRight”
• data-fx=”slideOutUp”
• data-fx=”rollIn”
• data-fx=”rollOut”

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

1.IMPORTS
2.VARIABLES
3.SWITCHER
4.HEADER AND GENERAL SETTINGS
5.TESTIMONIALS
6.SERVICES
7.PRICING PLAN
8.404 AND PAGE TITLE
9.MAINTENANCE
10.ACCORDION
11.ARTICLES
12.BLOG
13.BLOG WIDE & MASONRY
14.BLOG WIDE
15.BLOG MASONRY
16.PAGINATION
17.PERSON BOX
18.SPECIAL OFFERS
19.FOOTER
20.SOCIAL ICONS
21.ICON BOX
22.SECONDARY ICONBOX
23.GALLERY
24.ADVERT
25.GOOGLE MAP
26.CONTACT DETAILS
27.SERVICE ICON
28.EXCEPTIONAL QUALITY
29.OUR HISTORY
30.POPULAR TIPS
31.CALL TO ACTION
32.SCHEDULE TABLE
33.ANIMATION
34.VIDEO
35.FEATURES
36.CHARTS

Utilities

Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used together and utilities can be used alongside component classes.

Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignment, text truncation. Relying on utilities can help to reduce repetition and provide consistend implementations.

Navigation bar can be created with the simple HTML markup:

Gallery

Create beautiful gallery of your works. Filter your pictures by Categories with Isotope.
If you want to use isotope filters – please add the following markup above your gallery container:

Than create your gallery:

If you want to assign portfolio item to a particular filter add the corresponding class to portfolio item.

Isotope filter class

You can use several variations for main gallery container:

• .ct-gallery,
• .ct-gallery–col4,
• .ct-gallery–withSpacing,

• .ct-gallery–col7 – enable to display 7 gallery items in a row.

Remember to attach the following JS files to your gallery page:

Inside your Isotope Gallery you can put as many gallery items as you want. Just use the following HTML markup for every item:

Gallery Item

You can select between several different options to change your gallery items appearance, just use combination of the following variations:

• .ct-gallery-item,
• .ct-gallery-item–masonry,
• .ct-gallery-item–default hidden,
• .ct-gallery-item–normal,
• .controls,

• .ct-gallery-itemInner,
• .ct-galleryBox,
• .ct-galleryBox–type2,
• .ct-galleryBox–primary,
• .ct-galleryBox-image,
• .ct-galleryBox-overlay,
• .ct-galleryBox-icons,
• .ct-galleryBox-overlayIcon

Remember to attach the following JS files:

Call to action

Create Call To Action box with simple HTML markup:

You can choose between the following text variations classes:

• .ct-u-hrLeft,
• .ct-u-hrMid,
• .ct-u-hrRight

Tabs

Our tabs are created on Bootstrap tabs basis. You can use them with the following HTML markup:

There are several types of available Testimonials.

Sidebar Widget

Testimonial widget

HTML markup:

IMAGE TESTIMONIAL

Image testimonial

HTML markup:

PERSON BOXES TESTIMONIAL

Testimonial with person boxes

HTML markup:

Available CSS classes:
.ct-testimonial: Indicates testimonial’s display properties.
.ct-testimonial-item: Testimonial’s element;
.ct-testimonial-item–inner: Inner content of Testimonial’s element.

.ct-testimonial-sidebar: Indicates testimonial’s display properties for sidebar.
.ct-testimonial-sidebar-item: Testimonial’s sidebar item.

.ct-personBox–testimonial: person box for testimonials.

Event article

Use the following HTML markup to insert event article:

Available CSS classes:

• .ct-articleBox : Indicates display properties for an article element.
• .ct-articleBox–default : Default display properties.
• .ct-articleBox-media : An article media like images or video.
• .ct-articleBox-description : Article’s description.

Buttons

Dozens of variations to select any button you want! Use the simple HTML markup:

And adjust button appearance with the following variations:

• .btn-primary,
• .btn-success,
• .btn-danger,
• .btn-warning,
• .btn-white,
• .btn-info,
• .btn-transparent,
• .btn-default,

• .btn-lg,
• .btn-sm,
• .btn-xs,

We prepared custom tables with simple HTML markup:

Opening Hours table

There are two main types of icon boxes:

Default

– can be created with class .ct-iconBox, used in the following markup:

Default icon boxes

Secondary

– can be created with the class .ct-iconBox–secondary, used in the following HTML markup:

Secondary icon boxes

Both types can be also adjusted with the following CSS variations:
.ct-iconBox-icon,
.ct-iconBox–default,
.ct-iconBox-title,
.ct-iconBox–mid,
.ct-iconBox-icon–verylarge,
.ct-iconBox–left,
.ct-iconBox-content,
.ct-iconBox-icon–dark,

Worksample slider

Create a slider with the simple HTML markup:

You can select between two variations:
.ct-worksample-sidebar,
.ct-worksample-slider.

Welcome Visitor

Create Welcome! section with the simple HTML markup:

Gallery slider

Use the following HTML markup to insert slider:

You can modify slider settings using the following CSS classes for variations:

.ct-gallery-slider – Type for gallery slider. It indicates general display properties for the whole type of slider.

.ct-gallery,
.ct-galleryBox-icons,
.ct-js-magnificPopupImage.ct-galleryBox-overlay,
.ct-galleryBox–primary,
.ct-galleryBox-overlayIcon,

.ct-js-owl – Idicates owl-slider.

.ct-u-displayTableCell – Element displayed as ‘table-cell’.

.ct-galleryBox–type2 – Indicates gallery item properties.

.ct-galleryBox–primary – Indicates color for ‘.ct-galleryBox’ content.

.ct-u-displayTableVertical – Indicates element that acquires height 100% and every nested element in ‘display-cell’ mode is vertically aligned to ‘middle’.

.ct-sliderbuttons-top – Indicates position of buttons in the top of a slider. Buttons are placed on the far left and right side.
.ct-sliderbuttons-middle – Indicates position of buttons in the middle of a slider. Buttons are placed on the far left and right side.
.ct-sliderbuttons-bottom – Indicates position of buttons in the bottom of a slider. Buttons are placed on the far left and right side.

.ct-sliderbuttons-top2 – Parent class. Indicates position of buttons in the top of a slider.Buttons are attached to each other.
.ct-sliderbuttons-bottom2 – Parent class. Indicates position of buttons in the bottom of a slider.Buttons are attached to each other.

.ct-sliderbuttons-top2–left – Descendant class.Buttons are placed on the top-left of a slider.
.ct-sliderbuttons-top2–middle – Descendant class. Buttons are place on the top-middle of a slider.
.ct-sliderbuttons-top2–right – Descendant class. Buttons are place on the top-right of a slider.

Chess slider

Create beautiful chess slider with the simple HTML markup:

You can easily change slider settings with the following CSS variations:
.ct-chess-slider – Type for chess slider. It indicates general display properties for the whole type of slider.

.ct-u-displayTableCell – Element displayed as ‘table-cell’.
.ct-u-displayTableRow – Element displayed as ‘table-row’.

.ct-sliderbuttons-top – Indicates position of buttons in the top of a slider. Buttons are placed on the far left and right side.
.ct-sliderbuttons-middle – Indicates position of buttons in the middle of a slider. Buttons are placed on the far left and right side.
.ct-sliderbuttons-bottom – Indicates position of buttons in the bottom of a slider. Buttons are placed on the far left and right side.

.ct-sliderbuttons-top2 – Parent class. Indicates position of buttons in the top of a slider.Buttons are attached to each other.
.ct-sliderbuttons-bottom2 – Parent class. Indicates position of buttons in the bottom of a slider.Buttons are attached to each other.

.ct-sliderbuttons-top2–left – Descendant class.Buttons are placed on the top-left of a slider.
.ct-sliderbuttons-top2–middle – Descendant class. Buttons are place on the top-middle of a slider.
.ct-sliderbuttons-top2–right – Descendant class. Buttons are place on the top-right of a slider.

All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:

• js/charts/init.js – chart display.
• js/countdown/jquery.mb-comingsoon.min.js – Date counter (e.g. ‘Under Maintenance’ page)
• js/counter/init.js,
• js/counter/jquery.countTo.js – Counter display.
• js/ct-mediaSection/init.js,
• js/ct-mediaSection/jquery.frogaloop.min.js,
• js/ct-mediaSection/jquery.stellar.min.js – Media section preformance.
• js/gmaps/init.js,
• js/gmaps/gmap3.min.js – Google maps display.
• js/magnific-popup/init.js,
• js/magnific-popup/jquery.magnific-popup.min.js – portfolio item display.
• js/owl/init.js,
• js/owl/owl.carousel.js – Owl carousel.
• js/portfolio/init.js,
• js/portfolio/imagesloaded.js,
• js/portfolio/jquery.isotope.min.js – Portfolio performance.
• js/progressbars/init.js – Progress bars display.
• js/progressicons/init.js – Progress icons performance.
• js/jquery.stellar.min.js,
• js/init.js – Parallax effect.
• js/device.min.js,
• js/snap.min.js,
• js/jquery.appear.js – Menu in mobile devices.
• bootstrap/js/bootstrap.min.js – compiled bootstrap plugin.
• js/less.min.js – less compilation.
• js/placeholder.min.js – old browsers support for placeholders.
• js/easing.1.3.js – easing animations.
• js/browser.min.js – browser identification.

Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

• data-location – address to show
• data-height – map height (if undefined height will be 220px)
• data-offset – by how many map should be repositioned from marker center point (default -30)

It uses gmap3 plugin.
Documentation: here
HTML Markup:

All javascript code can be found in js/main.js file.

jquery.appear

This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/

Charts.js

This plugin is used to make graphics.
Documentation: http://www.chartjs.org/