Exico

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, you would 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.

01. Imports

a) Variables
b) font awesome
c) Typography
d) Mediasection
e) Portfolio
f) Buttons
g) Hover
h) Mixins
i) Animate
j) Utilities
k) Menu
l) Gallery
m) Accordion
n) Widget
o) Toggables
p) Form
q) Datepicker
r) Magnific popup
s) Slick slider
02 .Wrapper and Snap.js
03. Media section
04. Checkout
05. Thumbnails
06. ImageBoxes
07. PersonBoxes
08. Pricing Box
09. Icon box
10. Socials
11. Google map
12. Header
13. footer
14. Last Works
15. Article Boxes
16. Image wrappers
17. Shop
18. Raiting
19. Text box
20. Comment Box
21. Lists
22. Video
23. Preloader
24. Scrollbar
25. Animation

Utilities

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

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

Exico uses utilities for the following categories:

• Font size:
  • .ct-u-size13{
    font-size: 13px;
    }
  • .ct-u-size13{
    font-size: 13px;
    }
• Paddings – the following values of padding can be added to any element you want: 10px, 20px, 30px. 40px, 50px, 60px, 70px, 80px, 90px, 100px, 110px, 120px, 130px, 140px, 150px – each value can be added to bottom, top or both top and bottom paddings, according to the following CSS class naming scheme:
  • .ct-u-paddingBoth10
  • .ct-u-paddingTop10
  • .ct-u-paddingBottom10
  • .ct-u-paddingBoth20
  • .ct-u-paddingTop20
  • .ct-u-paddingBottom20
  • .ct-u-paddingBoth30
  • .ct-u-paddingBoth30
  • .ct-u-paddingBottom30

  Just add class with padding value to any HTML element.

• Margins – the following values of margins can be added to any element you want: 10px, 20px, 30px. 40px, 50px, 60px, 70px, 80px, 90px, 100px, 110px, 120px, 130px, 140px, 150px – each value can be added as bottom, top or both top and bottom margin, according to the following CSS class naming scheme:
  • .ct-u-marginBoth10
  • .ct-u-marginTop10
  • .ct-u-marginBottom10
  • .ct-u-marginBoth20
  • .ct-u-marginTop20
  • .ct-u-marginBottom20
  • .ct-u-marginBoth150
  • .ct-u-marginBoth150
  • .ct-u-marginBottom150
• Colors
  • .ct-u-colorWhite
  • .ct-u-colorFaint{
    .ct-m-opacity(0.4);
    }
  • .ct-u-colorBlack{
    color: #000000;
    }
  • .ct-u-colorInfo{ color: @alert-info-text;
    }
  • .ct-u-colorSuccess{ color: @alert-success-text;
    }
  • .ct-u-colorWarning{ color: @alert-warning-text;
    }
  • .ct-u-colorDanger{ color: @alert-danger-text;
    }
  • .ct-u-colorBody{ color: @body-color;
    }
• Fonts
  • .ct-u-fontType-1{
    font-family: “PT Sans”,sans-serif;
    }
  • .ct-u-fontType-2{
    font-family: “Roboto Slab”, sans-serif;
    }
  • .ct-u-fontType-3{
    font-family: “Montserrat”, sans-serif;
    }
• Background Colors
  • .ct-u-backgroundWhite{
    background-color: #ffffff;
    }
  • .ct-u-backgroundGray{
    background-color: #cacaca;
    }
  • .ct-u-backgroundBody{
    background-color: @body-color;
    }
  • .ct-u-backgroundSuccess{
    background-color: @alert-success-bg;
    h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
    color: @alert-success-bg;
    }
    }
  • .ct-u-backgroundWarning{
    background-color: @alert-warning-bg;
    h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
    color: @alert-warning-bg;
    }
    }
  • .ct-u-backgroundDanger{
    background-color: @alert-danger-bg;
    h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
    color: @alert-danger-bg;
    }
    }
  • .ct-u-backgroundInfo{
    background-color: @alert-info-bg;
    h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
    color: @alert-info-bg;
    }
    }
  • .ct-u-backgroundBlack{
    background-color: #000000;
    h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
    color: #ffffff;
    }
    .ct-raiting{
    color: #ffffff;
    } 

    .lead{
    .fa-star.ct-u-colorBlack{
    color: #ffffff;
    }
    }
    }

• Overflow
  • .ct-u-overflow-show{
    overflow: visible;
    }
  • .ct-u-overflow-hide{
    overflow: hidden;
    }
• Display types
  • .ct-u-displayTable, .ct-u-displayTableVertical, .ct-u-displayTableBottom , .ct-u-displayTableTop{
    display: table;
    width: 100%;
    }
  • .ct-u-displayTableVertical, .ct-u-displayTableBottom, .ct-u-displayTableTop{
    height: 100%;
    }
  • .ct-u-displayTableTop{
    .ct-u-displayTableCell{
    vertical-align: top;
    }
    }
  • .ct-u-displayTableVertical{
    .ct-u-displayTableCell{
    vertical-align: middle;
    }
    }
  • .ct-u-displayTableBottom{
    .ct-u-displayTableCell{
    vertical-align: bottom;
    }
    }
  • .ct-u-displayTableRow{
    display: table-row;
    }
  • .ct-u-displayTableCell{
    display: table-cell;
    }
• Borders
  • .ct-u-colorWhite{
    .ct-u-borderAll{
    border-color: #ffffff
    }
    }
  • .ct-u-borderAll{
    border: 1px solid;
    .ct-u-colorWhite{
    border-color: #ffffff;
    }
    }

Article – type 1

HTML markup:

Article – type 2

CSS classes:

ct-articleBox: Base class for article.
ct-articleBox-media: Images,videos or other media that can be used in article.
ct-articleBox-description: Description of an article.

ct-link: number of comments displayed in bubble speech.
ct-tag: Tag for announcments, like “brand new”.

ct-u-paddingTop20: adds 20px padding on top.
ct-u-paddingTop30: adds 30px padding on top.

media, media-left, media-heading, media-object ,media-body – Bootstrap classes for creating media.

ct-articleBox-info: article info box wrapper that contain such information like date,price or is simply a button.
info-1: ‘ct-articleBox-info‘ subclass.
info-2: ‘ct-articleBox-info‘ subclass.

An article may be a part of a gallery:

ct-galleryBox: wrapper for gallery media.
ct-galleryBox-image: wrapper for gallery image.
ct-js-magnificPopupImage: Indicates that light box is in use. (Magnific pop-up)

btn: button class.
btn-link: button link style.
ct-btn–transparent: adds transparency to button.

Blockquotes

HTML Markup:

Standard bootstrap markup

Style 1 for class “ct-blockquote-1”

Style 2 for class “ct-blockquote-2”

Button groups

Button wrapper

Buttons

HTML Markup:

Single buttons:

Description:

btn – this is a base class that is obligatory for every button.
ct-btn–transparent – adds transparency to button leaving only borders.
btn-xs,.btn-sm… etc. these classes gives size to a button.
ct-btn-rounded – this class makes button rounded.
‘btn-primary‘ and ‘btn-default‘ – types of buttons, which change color to: black and white .

Notice:
if class ‘ct-u-colorWhite‘ is a wrapping class e.g.

It changes properties of this button to white.

Some buttons may keep the properties of a link. It’s strongly adviced to create them by using
‘ <a> ‘ attribute.

Button groups

Button wrapper

CSS Classes:

ct-btn-rounded: Gives border radius to button.
ct-u-colorWhite: changes button’s color properties to white.

ct-btn–transparent, btn-primary, btn-default, btn-link: button types.
btn-link–white: Gives white color properties to a link.

ct-btn-wrapper: Wraps buttons if they are dsplayed on image.

Group buttons :
ct-btn-group–rounded: Gives border radius to a button group.
btn-group–equal: Buttons in button group are equal.

Button sizes:
btn-xs,.btn-sm,.btn-lg,.btn-lg-2: button size.

ct-btn–full: full width button.

Button types:
btn-default, btn-primary, btn-link: Button types.
btn-link–white: variation to change ‘btn-link’ properties to white.

Call to action

CSS Classes:

ct-u-paddingBoth120: adds 120px padding both to top and buttom.
ct-u-paddingBoth20: adds 20px padding both to top and bottom.
ct-u-colorFaint: changes the opacity.
ct-u-colorWhite: gives white color to component.

ct-mediaSection, ct-mediaSection-inner: are common throughout all our templates.

You can edit section parameters with the following data-attributes:

data-type: indicates the parralax effect for section.
data-stellar-background-ratio: how fast will background image change its position with parallax effect.
data-bg-image-mobile: define image, which should be displayed on mobile devices.

Google Map

HTML Markup:

You can change map location with:
data-location=" " attribute – just add here your current location.

Make sure to include the following scripts in map page:

HTML Markup :

Icon box 1

Icon Box

Icon box 2 – animated counter

Icon box 3

CSS Classes

ct-iconBox-1, .ct-iconBox-2, .ct-iconBox-3: Icon boxes type.
ct-icon: Sets size for image or icon.
ct-img-wrapper-2: Sets position relative.

ct-img-wrapper-2: returns position relative.

ct-fw-700: font weight 700.

animated, activate, pulse, infinite: Add animation to the icon, requires using ‘cssAnimate‘ class in body HTML attribute.
Class ‘pulse‘ can be replaced with other class like ‘wobble‘ or ‘shake‘ to receive different animation

ct-content: some description, text, etc.
ct-u-colorWhite: gives white color to a component.

Icon boxes may be used as counters, therefore js classes are required.
To create a counter, remember to attach “ct-js-counter” class to counter component like below:

You can edit counter settings with the following data attributes:
data-ct-to: Max value for counter to count.
data-ct-speed: Counter speed.

Remember to attach the following script to your HTML page, when you want to use a counter:

Person box:

Person Box

Widget person box:

Person box – widget

Portfolio

Change sliders navigation position by adding one of the following CSS classes to HTML markup:

• ct-slick-arrow-1,
• ct-slick-arrow-1–above,
• ct-slick-arrow-2,
• ct-slick-arrow-3,
• ct-slick-arrow-3–leftTop
• ct-slick-arrow-3–leftBottom,
• ct-slick-arrow-3–rightTop
• ct-slick-arrow-3–rightBottom,
• ct-slick-arrow-3–under

Pricing table 1

Pricing table 2

Background image can be change with data attribute:

data-bg-image – just define url to your image,

Pricing table 3 – inverse

Pricing table 4 – Counter

Script required for Pricing table 4 – Counter:

Shop slider

HTML markup:

.ct-articleBox: Base class for article.
.ct-articleBox-media: Images,Videos for article.
.ct-js-slick: class for slick slider.

.ct-articleBox-info : article info box wrapper.
.info-1 : ‘.ct-articleBox-info’ subclass.
.info-2 : ‘.ct-articleBox-info’ subclass.

NAVIGATION PLACEMENT – change where sliders navigation should be displayed by adding one of the following CSS classes to HTML markup:

• .ct-slick-arrow-1,
• .ct-slick-arrow-1–above,
• .ct-slick-arrow-2,
• .ct-slick-arrow-3,
• .ct-slick-arrow-3–leftTop,
• .ct-slick-arrow-3–leftBottom,
• .ct-slick-arrow-3–rightTop,
• .ct-slick-arrow-3–rightBottom,
• .ct-slick-arrow-3–under

HTML markup:

Shop product

Cart menu

CSS Classes:

ct-cart-tag: Base class for cart window.
ct-cart-window: It displays cart window.
ct-cart-product: Wrapper for product image.
ct-cart-details: Wrapper for Cart’s product content.
ct-cart-total: Total price for all products.
ct-cart-total–price: style for price.

ct-u-colorWhite: gives white color to component.
ct-u-colorFaint: Lowers component opacity.

fa, fa-star: font awesome classes used to display stars in ratings.