Copyright EngoTheme 2016
made with the Documenter v2.0
made with the Documenter v2.0
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
After extract the main zip file, you'll see these folders and files:
We provide 19 HTML:
All of the information within the main content area is nested within a div with an id of "wrapper". Here is the general structure.
All style.css are put in head tag, put all js files(In addition to jquery.js) before </body>tag.
<header id="header" class="header-v1 header-v2..."> <div id="topbar"> ... </div> <!-- End top bar --> ... </header> <!-- /header --> <div id="main"> <section> ... </section> ... </div> <!-- End Main-Content --> <footer class="footer"> ... </footer> <!-- End footer -->
Open a html file with editor, you'll find sidebar in site (*)-gird.html:
<div id="shop-widgets-filters" class="shop-widgets-filters">
<div id="widget-area" class="widget-area">
<div class="widget">
<h3 class="widget-title"></h3>
...Content...
</div>
...
</div>
</div>
Change your logo text and link under sidebar section:
<div class="logo">
<a href="#" title="Logo"> ...</a>
</div>
The Image logo size is limited max with 100% in line 3556 file styles.css
.logo img,.nav-logo img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
max-width: 100%;
height: auto;
}
Edit menu here:
<ul class="awemenu">
<li class="awemenu-item">
<a href="#" title="...">...</a>
<ul class="awemenu-submenu">
<li class="awemenu-megamenu-item">
<div class="container-fluid">
<div class="awemenu-megamenu-wrapper">
<h2 class="upper">...</h2>
<ul class="super">
<li><a href="#" title="...">...</a></li>
...
</ul>
...
</div>
</div>
</li>
...
</ul>
</li>
...
</ul>
Each <li> tag with class 'cssmenu' is a menu item, you could edit the text and link.
<li class="awemenu-item"><a href="catalog-fullwidth.html" title="Shop">Shop</a></li>
If you want to add submenu in Menu item, just insert code in <li>... Shop... </li> like this:
<ul class="awemenu-submenu">
<li class="awemenu-megamenu-item">
<div class="container-fluid">
<div class="awemenu-megamenu-wrapper">
<h2 class="upper">...</h2>
<ul class="super">
<li><a href="#" title="...">...</a></li>
...
</ul>
...
</div>
</div>
</li>
...
</ul>
Open index.html with editor, footer code is here:
<div class="footer">
<div class="footer-wrapper">
<div class="footer-widgets">
<div class="container">
...
<div class="widget">
<h3 class="widget-title">...</h3>
</div>
...
</div>
</div>
<!-- End footer-widget -->
<div class="container">
<div class="footer-copyright">
<div class="copyright">
...
</div>
<div class="footer-nav">
<nav>
<ul>
<li>...</li>
...
</ul>
</nav>
</div>
</div>
<!-- End footer copyright -->
</div>
</div>
</div>
The search need backend program.
Find the code:
<ul class="list-socials"> <li><a href="#" title="..."><i class="icon fa fa-twitter"></i></a></li> <li><a href="#" title="..."><i class="icon fa fa-facebook"></i></a></li> <li><a href="#" title="..."><i class="icon fa fa-dribbble"></i></a></li> <li><a href="#" title="..."><i class="icon fa fa-instagram"></i></a></li> <li><a href="#" title="..."><i class="icon fa fa-behance"></i></a></li> </ul>
You could edit the icon and link, check the fontawesome and replce the blue tag:
<i class="fa fa-facebook"></i>
Find the code:
<ol class="breadcrumb"> <li><a href="#" title="...">...</a></li> ... <li class="active"><span>...</span></li> </ol>
You should put the main content things to the main-content .
<div id="main" > ... </div>
The header is shown on mobile layout only. You coudl set the logo for mobile layout in this wrap.
<header id="header" class="header-v2 ..."> ... <header>
Product structure is displayed Grid.you can modify this structure.
<div class="product product-grid">
<div class="product-media">
<div class="product-thumbnail">
<a href="#" title="..."><img src="..." alt="..."></a>
</div>
<!-- End product thumbnail -->
<div class="product-hover">
<div class="product-actions">
<a class="awe-button product-add-cart" href="#" title="..."><i class="icon icon-shopping-bag"></i></a>
<a class="awe-button product-quick-wishlist" href="#" title="..."><i class="icon icon-star"></i></a>
<a class="awe-button product-quick-view" href="#" title="..."><i class="icon icon-eye"></i></a>
</div>
</div>
<div class="product-label hot ...">
<span>hot ...</span>
</div>
</div>
<!-- End product media -->
<div class="product-body">
<h2 class="product-name">...</h2>
<div class="rating small">
<span class="star"></span>
...
</div>
<div class="product-price">
<span class="amount">...</span>
</div>
</div>
</div>
Newsletter Display
<div class="popup-content">
<div class="popup-content-wrapper">
<div class="popup-container">
<div class="col-md-7 col-sm-6 images">
<img class="img-responsive" src="img/newsletter1.jpg" alt="newsletter">
</div>
<div class="col-md-5 col-sm-6 text">
<div class="popup-content-text">
<a href="#" class="close-popup"><i class="fa">x</i></a>
<h3>Get Newletter</h3>
<p>Subscribe newsletter for exclusive content and all of the behind the scenes details.</p>
</div>
<div class="newletter-form">
<div class="widget_wysija_cont shortcode_wysija">
<div class="wysija-msg ajax" id="msg-form-wysija-shortcode57bd06004b338-1"></div>
<form class="widget_wysija shortcode_wysija" action="#wysija" method="post">
<p class="wysija-paragraph">
<input type="text" value="" name="name" placeholder="Your name" title="Your name">
<input type="text" value="" name="adress" placeholder="Your Email Address">
</p>
<button type="submit" value="Subscribe!" class="wysija-submit wysija-submit-field button button1 hover-white">Subscribe<i class="link-icon-white"></i></button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End popup -->
The theme is default to show quickview product.
<div class="quickview-wrapper open">
<div onclick="hideQuickView()" class="overlay-bg"></div>
<div class="quick-modal show">
<span class="qvloading"></span><span class="closeqv"><i class="fa fa-times"></i></span>
<div id="quickview-content">
<div class="woocommerce product">
<div class="product-images">
<div class="main-image images"><img id="images-select" alt="" src="img/samples/products/lookbook/1.jpg"></div>
<div class="quick-thumbnails">
<ul class="thumb-content">
<li class="thumb"><a href="img/samples/products/lookbook/1.jpg" title="thumb product view1" onclick="swap(this);return false;"><img src="img/samples/products/lookbook/1.jpg" alt="thumb product1"/></a></li>
...
</ul>
</div>
</div>
<script>
function swap(image) {
document.getElementById("images-select").src = image.href;
};
</script>
<div class="product-info">
<h2 class="product-name">
<a href="#" title=" Gin Lane Greenport Cotton Shirt"> Gin Lane Greenport Cotton Shirt</a>
</h2>
<!-- /.product-name -->
<div class="product-status">
<span>In Stock</span>
<span>-</span>
<span>SKU: 12345678</span>
</div>
<!-- /.product-status -->
<div class="product-price">
<span class="amount">$60</span>
</div>
<!-- /.product-price -->
<div class="product-description">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div class="product-list-actions-wrapper">
<form action="product-quick-view.html" method="POST">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="p_color">Color</label>
<select name="p_color" id="p_color" class="form-control">
<option value="">Blue</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="p_size">Size</label>
<select name="p_size" id="p_size" class="form-control">
<option value="">XL</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="p_qty">Qty</label>
<select name="p_qty" id="p_qty" class="form-control">
<option value="">1</option>
...
</select>
</div>
</div>
</div>
</form>
<!-- /.form -->
<div class="product-list-actions">
<button class="btn btn-lg btn-primary" >Add to cart</button>
<button class="wishlist" >Add to wishlist</button>
</div>
<!-- /.product-actions -->
</div>
<div class="product-meta">
<span class="product-category">
<span>Category:</span>
<a href="#" title="">Outerwear</a>
</span>
<span>-</span>
<span class="product-tags">
<span>Tags:</span>
<a href="#" title="">Jacket</a>
</span>
</div>
</div>
<!-- End product-info -->
</div>
<!-- End product -->
</div>
<!-- End quick view -->
</div>
<!-- End quick modal -->
</div>
<!-- End quickview-wrapper -->
It is a basic layout. You could make the about page, contact page, portfolio/blog list page by the page template, please refer: contact-us.html. If you want to insert the modules in the template, please make sure the wrap is like:
<header id="header" class="header-v1 header-v2..."> <div id="topbar"> ... </div> <!-- End top bar --> ... </header> <!-- /header --> <div id="main"> <section> ... </section> ... </div> <!-- End Main-Content --> <footer class="footer"> ... </footer> <!-- End footer -->
col-md-12 means width, the template is based on bootstrap 3.x.x. It obeys the bootstrap grid system :
col-md-3 = 1/4 column
col-md-4 = 1/3 column
col-md-6 = 1/2 column
col-md-12 = 1/1 column
(check more)
You could use the fullwidth wrap or Boxed Wrap:
If you want put the content fill to fullwidth of main-wrap, use the fullwidth as the home-01.html
The elements included: H1-H6 font, Capital first letter, Text with icon list and typography with background color
Data-view options are: map, satellite, map_terrain. option value "t" present true and "f" present false
please refer index_layout_01.html the woocommerce.js is necessary,
please set the date/time value in the wrap:
<div class="time" data-countdown="countdown" data-date="08-20-2016-10-20-30"></div>
The data-dateformat="dHMS" means: displaying day-hour-minutes-seconds, the year/mouth value is: "y" / "o"
There are 8 main CSS files in this theme.
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
Open the styles folder, you'll find all css files.
This theme imports 13 Javascript files. All located in the "js" folder.
If you have any questions, please do not hesitate to contact us at engotheme@gmail.com or forum http://support.engotheme.com. We are happy to help!