• Facebook
  • Twitter

Estato – Responsive HTML5 Template


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

HTML Structure


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:

Page structure

Below you will find default page structure :


CSS Files and 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:

Icons

We’ve included 360+ font icons.

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

HTML markup:

CSS Files & Structure

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

Table of contents:

1. Mixins
2. Animate.css
3. Select2
4. Slider
5. Datepicker
6. Yamm
7. Menu
8. Typography
9. Forms
10. Buttons
11. Utilities
12. Owl Corusel
13. Media Sections
14. Portfolio
15. Magnific Popup
16. Font Awesome
17. Wrapper
18. Headroom
19. Socials
20. Slider
21. Header
22. Sections
23. Submission Steps
24. Icon Box
25. Synchronized slider(Single Product Page)
26. Person Box
27. Pricing Box
28. Product Single
29. Testimonials Tabs
30. Footer
31. Product Items
32. Sorting Bars
33. Google Map (Infobox and Navigation)
34. Custom Animation (Maintenance Page)
35. Blog (Sidebar)
36. Media Queries

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.

Estato uses utilities for the following categories:

Typography

Display Types
Paddings
Margins
Letter Spacing
Line height
Colors
Borders
Position

Topbar


There are two available types of topbar:

  • .ct-topBar
  • .ct-topBar–darkStyle

To use any of them, first use the following HTML markup:


Navigation menu


You can change navigation menu bar by adding the following classes to body tag:

  • .ct-headroom–scrollUpMenu – navigation menu is hidden with delay,
  • .ct-headroom–scrollUpTopBar – top bar is hidden with delay,
  • .ct-headroom–scrollUpBoth – both top bar and navigation menu is hidden with delay
  • .ct-headroom–fixedTopBar – top bar is always visible at the top of the screen.
  • .ct-headroom–fixedMenu – menu is always visible at the top of the screen
    Fixed Menu

    Fixed Menu

  • .ct-headroom–fixedBoth – both top bar and navigation menu are always visible,
  • .ct-headroom–hideMenu – top bar is always visible on the top of the screen, navigation menu is hidden after scroll
    Hide Menu

    Hide Menu

HTML markup:


Footer


Footer

Footer

You can use the following variations of footer:

  • .ct-footer–light (add it for change style to to change styles to light version)
  • .ct-footer–extended
  • .ct-postFooter

HTML markup:


Sidebar


You can use the following Sidebar widgets:

Blog widgets

Blog widgets

Blog widgets

Blog widgets

Calculator

Calculator

Categories widget

Categories widget

Recently reduced widget

Recently reduced widget

Contact form in sidebar

Contact form in sidebar

Use the following HTML markup to create your sidebar widgets:

and javascript:


Forms


Estato comes several variations of form, available with the following CSS classes:

Classes:

  • .ct-formSearch–extended
  • .ct-searchFormMobile
  • .ct-formRegister
  • .ct-formContact–map
  • .ct-contactForm–small
  • .ct-form–label–type1
  • .ct-form–label–type2
  • .ct-popupForm
Contact Form

Contact Form

Search Form

Search Form

Login form

Login form

Register form

Register form

Wide search form

Wide search form

To use form you need to configure your mail data in form/config.php file and use the following HTML markup:

 

You can also use PopUp form:
Below you will find also javascript required to use Popup form:

Javascript


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

  • 1. Media Sections
    2. Datepicker – I use this for calendar widget in blog sidebar.
    3. Gmaps
    4. Headroom – Plugin for navbar options, same is in Diana.
    5. Magnific Popup.
    6. Pagescroller – Onepager navigation.
    7. Owl Corusel – slider
    8. Isotope – gallery categories sorting.
    9. Select2 – overwrite a standard select.
    10. Slider Bootstrap – amount slider.
    11. Device.js – check what device we use.
    12. Appear.js – check a status of element(is in viewport or not)
    13. browser.js – check what browser we use
    14. snap.js – snap event on mobile device

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/


Google Map


Available parameters:

  • .ct-js-googleMap
  • .ct-js-googleMap–single

data:

  • data-location
  • data-zoom
  • data-icon
  • data-offset
  • .ct-js-googleMap–group

data:

  • data-display-desc (yes/no infowindow)
Google map with search form

Google map with search form

For markers we use JSon array:

HTML markup:

Javascript: