Sportwear

HTML Theme Documentation


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 25 HTML:

 

Introduction

All of the information within the main content area is nested within a div with an id of "wrap". 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.

 

<div class="page-wrapper">
    <!--header-->
    <header class="page-header">
          <!-- header topbar -->
          <div class="header-topbar">...</div>
          <!-- header content -->
           <div class="header-content">...</div>     
    </header>
    <!--slider-->
    <div class="wide_layout relative w_xs_auto">...</div>
    <!-- banner-->
    <div class="banner">...</div>
  <!--boxed layout-->
  <main class="page-wapper"> 
      <!-- main home -->
      <section class="main-home">
          <!-- main-home-right -->
           <div class="main-home-page-right-content">...</div>
           <div class="main-home-left-sidebar">       
          <!—banner -->
          <div class="freeshipping">...</div>
          <!— new products -->
         <div class="newproduct-content ">...</div>
          <!--sale product-->
         <div class="saleproducts">...</div>
      </section>
  </main>
  <!--footer -->
  <footer class="footer-wapper">...</footer>
</div>

 

 

Sidebar

Open a html file with editor, you'll find the code:

<div class="nav-left-sidebar">
   <div class="nav-left-sidebar-inner " >
      <div class="left-megamenu-title">
         <h2>Categories</h2>
      </div>
      <div class="left-megamenu-content">
         <ul class="list-unstyled nav_vmegamenu">
            <li class="level0 parent">
               <a href="" title="">Running</a>
               <ul class="list-unstyled level0">
                  <li class="nav-1-1">
                     <a href="">Basketball</a>
                     <ul class="list-unstyled lever2">
                        <li class="last"><a href="">Hyperdrunk</a></li>
                        <li class="last"><a href="">LeBron</a></li>
                        <li class="last"><a href="">Kobe</a></li>
                     </ul>
                  </li>
                  <li class="nav-1-1">
                     <a href="">Training</a>
                     <ul class="list-unstyled lever2">
                        <li class="last"><a href="">Hyperdrunk</a></li>
                        <li class="last"><a href="">LeBron</a></li>
                        <li class="last"><a href="">Kobe</a></li>
                     </ul>
                  </li>
                  <li><a href="">Football</a></li>
                  <li><a href="">Basketball</a></li>
               </ul>
            </li>
            <li class="level0 parent">
               <a href="" title="">Basketball</a>
               <ul class="list-unstyled level0">
                  <li class="nav-1-1">
                     <a href="">Basketball</a>
                     <ul class="list-unstyled lever2">
                        <li class="last"><a href="">Hyperdrunk</a></li>
                        <li class="last"><a href="">LeBron</a></li>
                        <li class="last"><a href="">Kobe</a></li>
                     </ul>
                  </li>
                  <li><a href="">Training</a></li>
                  <li><a href="">Football</a></li>
                  <li><a href="">Basketball</a></li>
               </ul>
            </li>
            <li class="level0 parent"><a href="" title="">Training</a></li>
            <li class="level0"><a href="" title="">Football</a></li>
            <li class="level0"><a href="" title="">Gold</a></li>
            <li class="level0"><a href="" title="">Baseball</a></li>
            <li class="level0"><a href="" title="">Tennis</a></li>
         </ul>
      </div>
   </div>
</div>

 

Logo:

Change your logo text and link under sidebar section:

<div class="header-logo">
    <a href=""><img src="images/logo.png" class="img-responsive" alt="logo"></a>
</div>

                           

  
The Image logo size is limited max with 100% in line 3556 file styles.css

  
           .header-logo{
                  img{
                       max-width: 100%;
                       height:auto;
                   }
             }

 

Menu:

Edit menu here:

<!--Menu-->
<div class="header">
   <!-- header  content -->
   <div id='cssmenu'>
   </div>
   <div>
      <nav class="navbar ">
         <div class="">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 ">
               <ul class="nav navbar-nav">
                  <li>
                     <a class="active" href="">
                     <span class="icon-home1"></span>
                     </a>
                  </li>
                  <li class="">
                     <a href="#">Men </a>
                  </li>
                  <li><a href="">Women</a>
                  </li>
                  <li><a href="">New Arrival</a>      
                  </li>
                  <li><a href="">Back in Stock</a></li>
                  <li><a href="">Blog</a></li>
                  <li><a href="">About Us</a></li>
                  <li><a href="">Contact Us</a></li>
               </ul>
            </div>
            <!-- /.navbar-collapse -->
         </div>
         <!-- /.container-fluid -->
      </nav>
   </div>
</div>

 

Each <li> tag with class 'cssmenu' is a menu item, you could edit the text and link.

<li><a href="#" title="">Men</a></li>

 

If you want to add submenu in Menu item, just insert code in <li>... Men... </li> like this:

<li>
   <a href="#" title="">Men</a>
   <div class="sub-menu megamenu" >
   <div class="row">
      <div class="col-md-2">
         <div class="sub-megamenu">
            <div class="item-menu">
               <h4 class="menu-title"><a href="" title="">Basketball</a></h4>
               <ul>
                  <li><a href="">Hyperdrunk</a></li>
                  <li><a href="">LeBron</a></li>
                  <li><a href="">Kobe</a></li>
               </ul>
               <div class="about-menu">
                  <a href="" title="">All Basketball </a>
               </div>
            </div>
         </div>
      </div>
      <div class="col-md-2">
         ...
      </div>
      <div class="col-md-2">
         ...
      </div>
      <div class="col-md-2">
         ...
      </div>
      <div class="col-md-2">
         ...
      </div>
      <div class="col-md-2">
         ...
      </div>
   </div>
</li>

Footer

Open index.html with editor, footer code is here:

<footer class="footer-wapper">
   <div class="contact-newsletter-footer">
   </div>
   <div class="footer-detail ">
      <div class="footer-info">
         ...
      </div>
      <div class="footer-copyright ">
         ....
      </div>
   </div>
</footer>

 

Contact-newletter-footer

<!-- Contact-newletter-footer  -->
<div class="container">
   <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6 contact-footer-left ">
         . . .
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 newsletter-footer-right ">
         <h2>Newsletter</h2>
         <form  method="post" id="newsletter-validate-detail">
            <div class="subcribe-info">
               <input class="input-mail input-text required-entry validate-email" type="text" name="email" id="newsletter" title="Sign up for our newsletter" placeholder="Enter Your Mail...">
               <button type="submit" title="Subscribe" class="button"><span><span>Subscribe</span></span></button>
            </div>
         </form>
         <p>Receive email-only deals, special offers &amp; product exclusives</p>
      </div>
   </div>
</div>
 

The search need backend program.

 

Social icons

Find the code:

<div class="social">
    <ul>
       <li>
          <div class="link1"><a href="#"><i class="fa fa-facebook"></i></a></div>
       </li>
       <li>
          <div class="link1"><a href="#"><i class="fa fa-twitter"></i></a></div>
       </li>
       <li>
          <div class="link1"><a href="#"><i class="fa fa-google-plus"></i></a></div>
       </li>
       <li>
           <div class="link1"><a href="#"><i class="fa fa-behance"></i></a></div>
       </li>
       <li>
           <div class="link1"><a href="#"><i class="fa fa-pinterest"></i></a></div>
       </li>
     </ul>
</div>

You could edit the icon and link, check the fontawesome and replce the blue tag:

             <i class="fa fa-facebook"></i>

 

Main Home

You should put the main content things to the main-content .

               <section class="main-home">
                   ...
               </section>

 

Header

The header is shown on mobile layout only. You coudl set the logo for mobile layout in this wrap.

               <header class="header">
                   ...
               </hearder>

 

Responsive

The theme is default to show the responsive layout when screen width is less 320px. You could remove the class "responsive-ux" in BODY tag to forbid it.

Classic Page

It is a basic layout. You could make the about page, contact page, portfolio/blog list page by the page template, please refer: index_layout_01.html, page-abot-us.html. If you want to insert the modules in the template, please make sure the wrap is like:                                            

<body class="page-wapper">
   <!--header-->
   <div class="container">
      <div class="row">
         <div class="col-md-6 col-xs-12">
            ...
         </div>
         <div class="col-md-6 col-xs-12">
            ...
         </div>
      </div>
   </div>
   <!-- nav-header-->
   <div class="container">
      <div class="row">
         <div class="col-md-12"> 
            ...
         </div>
      </div>
   </div>
   <!-- slider -->
   <div class="wide_layout relative w_xs_auto">...</div>
   <!-- banner -->
   <div class="banner-wapper"></div>
   <!-- main content -->
   <section class="main-home">
      <div class="container">
         <div class="row">
            <!-- main-home-right-content -->
            <div class="col-sm-9">
               ...
            </div>
            <!-- main-home-left-sidebar-->    
               <div class="col-md-3">
                  ... 
               </div>
               </div>
               <div class= "row">
                <!--banner-content-->
            <div class="col-md-12">
               ...
            </div>
         </div>
         <div class="row">
            <!-- newproduct -->
            <div class="col-md-2">
               ...
            </div>
            <div class="col-md-6">
               ...
            </div>
            <div class="col-md-4">
               ...
            </div>
         </div>
         <div class="row">
            <!--sale product-->
            <div class="col-md-6 col-sm-6">
               ...
            </div>
         </div>
      </div>
   </section>
   <!-- footer-->
   <div class="container">
      <!-- contact-newsletter-footer -->
      <div class="contact-newsletter-footer">
         <div class="row">
            <div class="col-md-6">
               ...
            </div>
            <div class= "col-md-6">
               ...
            </div>
         </div>
      </div>
      <!-- footer-info -->
      <div class="container">
         <div class="row">
            <div class="col-md-6">
               ...
            </div>
            <div class="col-md-6">
               ...
            </div>
         </div>
      </div>
   </div>
</body>

span12 means width, the template is based on bootstrap 2.3. It obeys the bootstrap grid system :
span3 = 1/4 column
sanp4 = 1/3 column
span6 = 1/2 column
span12 = 1/1 column
(check more)

You could use the fullwidth wrap or Boxed Wrap:

Fullwidth

If you want put the content fill to fullwidth of main-wrap, use the fullwidth as the Index_layout_01.html

Heading

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

Count down

please refer index_layout_01.html  the woocommerce.js is necessary,

please set the date/time value in the wrap:

<div class="box-timer">
     <div class="data-times" data-countdown="countdown"datadate="06-15-2016-018-20-45"></div>
</div>

The data-dateformat="dHMS" means: displaying day-hour-minutes-seconds, the year/mouth value is: "y" / "o"

Css files

There are 9 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 20 Javascript files. All located in the "js" folder.

  1. bootstrap.min.js – main custom javascript
  2. functions.js - main custom jQuery
  3. jquery-1.11.min.js  - jQuery -1.11
  4. jquery-ui.min.js - jQuery
  5. detail-product.js - jQuery
  6. jquery.elevatezoom.js - jquery.elevatezoom
  7. jquery.themepunch.plugins.min.js - revolution slider
  8. jquery.themepunch.revolution.min.js - revolution slider
  9. menumobile.js - menu responsive custom jQuery
  10. jquery.themepunch.plugins.min.js - revolution slider
  11. jquery.themepunch.revolution.min.js -revolution slider
  12. navAccordion.min.js - main custom jQuery
  13. script-revolution.js - revolution slider
  14. swiper.min.js - swiper slider
  15. woocommerce.js - countdown jQuery
  16. wow.min,js - wow jQuery

 

 

If you have any questions, please do not hesitate to contact us at engotheme@gmail.com. We are happy to help!