# NIXX

## NIXX – Minimal & Clean Fashion HTML Template

Follow Us

- created: 17/10/2018
- latest update:
- by: EngoTheme
- www.engotheme.com
- email: engotheme@gmail.com

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!

### Extract the zip file

After extract the main zip file, you'll see these folders and files:

- SkyLine - Main theme folder
  - CSS - css file folder
  - JS - js files folder
  - SASS - sass file folder
  - img - UI images and product folder

- Documentation - help file

We provide 41 HTML:

- home1.html - Homepage
- home2.html - Homepage
- home3.html - Homepage
- home4.html - Homepage
- cat_fullwidth.html - Category page
- cat_left_sidebar.html - Category page
- cat_right_sidebar.html.html - Category page
- shop_full.html - Shop Full
- shopgrid_v1.html - Shop Grid
- shopgrid_v2.html - Shop Grid
- shoplist.html - Shop List
- shopleft_sidebar.html - Shop Sidebar
- shopright_sidebar.html - Shop Sidebar
- bundle.html - Detail page
- pin_product.html - Detail page
- 360degree.html - Detail page
- feature_video.html - Detail page
- simple.html - Detail page
- variable.html - Detail page
- affilate.html - Detail page
- grouped.html - Detail page
- outofstock.html - Detail page
- onsale.html - Detail page
- product_extended.html - Detail page
- product_sidebar.html - Detail page
- product_right_sidebar.html - Detail page
- outofstock.html - Detail page
- cart.html - Cart page
- wishlist.html - Wishlist page
- wishlist_empty.html - Wishlist page
- checkout.html - Checkout page
- track.html - Order page
- myaccount.html - Account page
- blog_grid.html - Blog grid
- blog-single-post.html - Blog Detail
- blog-standar.html - Blog Standard
- contactus.html - Contact page
- aboutus.html - About page
- faq.html - FAQ page
- 404.html - 404 page
- commingsoon.html - Commingsoon page

### HTML Structure

## Introduction

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 -->
    <section class="tp-banner-container">
        ...
    </section>
    <!-- End tp-banner-Container -->
    <section class="main-content">
        ...
    </section>
    <!-- End Main-Content -->
    <footer id="footer">
        ...
    </footer>
    <!-- End footer -->

###

### Sidebar

Open a html file with editor, you'll find sidebar in site (*)-sidebar.html:

    <div id="secondary" class="sidebar ...">
       <aside class="widget">
             <h3 class="widget-title">...</h3>
             ...
       </aside>
       <aside class="widget">
             <h3 class="widget-title">...</h3>
             ...
       </aside>
       ...
    </div>

### Logo:

Change your logo text and link under sidebar section:

    <div class="logo v2">
        <a href="#" title=""> ...</a>
    </div>

The Image logo size is limited max with 100% in line 217 file _nav.scss

             .navbar-header,.navbar-brand img {
                 -webkit-backface-visibility: hidden;
                 backface-visibility: hidden;
                 max-width: 100%;
                 height: auto;
             }

##

### Menu:

Edit menu here:

    <!--Menu-->
    <header id="header">
       <!-- header  content -->
       ...
       <nav class="navbar">
       <ul class="nav navbar-nav">>
              <li class=" dropdown">
                 <a href="#">...</a>
                 <ul class=" dropdown-menu">
                <li class="submenu-hover1">
                    <a class="event_page_1.html"><a>
                    ...
                <li>
                </ul>
              </li>
              ...
           </ul>
        </nav>
    </header>

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

    <li class="dropdown"><a href="index.html" title="Home">Home </a></li>

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

    <li class=" dropdown">
        <a href="#" title="Colection">Colection</a>
        <ul class="dropdown-menu">
            <li">
            <a href="#">lookbook ver 2</a></li>
                ...
        </ul>
    </li>

### Footer

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

    <footer id="footer">
        ...
          <div class="container">
                <div class="footer-top">
                    <div class="logo-footer">
                    </div>
                    <div class="menu-footer">
                    </div>
                    <div class="social">
                    </div>
                </div>
          </div>
    </footer>

###

The search need backend program.

###

### Social icons

Find the code:

    <div id="header">
        ...
        <div class="social">
            <a href="#" title="twitter" ><i class="fa fa-twitter"></i></a>
            <a href="#" title="youtube" ><i class="fa fa-youtube"></i></a>
            <a href="#" title="facebook" ><i class="fa fa-facebook"></i></a>
            <a href="#" title="google plus" ><i class="fa fa-google-plus"></i></a>
        </div>
    </div>

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

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

###

### Breadscrubmb

Find the code:

    <ul class="breadcrumb">
        <li><a href="#"></a>Home</li>
        <li><a href="#" class="active" >Shop</a></li>
    </ul>

### Main Home

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

                   <div class="main-content" >
                       ...
                   </div>

###

### Header

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

Product structure is displayed Grid.you can modify this structure.

    <div class="item-inner">
        <div class="product">
            <a class="product-images" href="#" title="">
                <img class="primary_image" src="assets/images/Hermes-product1.jpg" alt=""/>
                <img class="secondary_image" src="assets/images/Hermes-product1-hover.jpg" alt=""/>
                <div class="action">
                    <a class="chart" href="#" title="Compare" ><i class="icon icon-bar-chart"></i></a>
                    <a class="zoom" href="#" title="Quick view" ><i class="icon icon-magnifier-add"></i></a>
                    <a class="wish" href="#" title="Wishlist" ><i class="icon icon-heart"></i></a>
                    <a class="add-cart" href="#" title="Add to cart" ><i class="icon-bag"></i></a>
                </div>
            </a>
            <p class="product-title">Bouble Fabric Blazer</p>
            <p class="description">Lorem Ipsum is...</p>
            <div class="product-price">
                <p class="content-star">
                    <i class="fa fa-star active"></i>
                    <i class="fa fa-star active"></i>
                    <i class="fa fa-star active"></i>
                    <i class="fa fa-star active"></i>
                    <i class="fa fa-star"></i>
                </p>
                <span class="price">$ 650.99</span>
                <span class="price-old">$ 670.99</span>
            </div>
            <!-- End Action -->
        </div>
        <!-- End product -->
    </div>
    <!-- End Item-Product -->

### Quick View

Quick View Display

    <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 product-details-content">
                <div class="product-images">
                   <div class="main-image images"><img id="images-select" alt="" src="..."></div>
                   <div class="quick-thumbnails">
                      <ul class="thumb-content">
                          <li class="thumb"><a href="..." title="thumb product view1" onclick="swap1(this);return false;"><img src="..." alt="thumb product1"/></a></li>
                          ...
                      </ul>
                   </div>
                </div>
                <div class="product-info box-detalis-v2">
                    <div class="product-name">
                        <h1>Bonded Unit Rumper</h1>
                   </div>
                   <div class="rating">
                        <div class="overflow-h">
                            <div class="icon-rating">
                                <input type="radio" checked="" name="star-horizontal-rating" id="star-horizontal-rating-1">
                                <label for="star-horizontal-rating-1"><i class="fa fa-star"></i></label>
                                ...
                            </div>
                            <span>3 Rating(s)</span>
                        </div>
                    </div>
                   <div class="wrap-price">
                      <p class="price">$200.00
                      </p>
                   </div>
                   <div class="options padding-0">
                       <p>Lorem ipsum dolor sit amet isse potenti. Vesquam ante aliquet lacusemper elit. neque nulla, convallis non commodo et, euismod nonsese. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
                       <div class="action">
                            <form enctype="multipart/form-data">
                                <div class="product-signle-options product_15 clearfix">
                                    <div class="selector-wrapper size">
                                        <div class="quantity"><span class="minus"><i class="fa fa-minus"></i></span>
                                            <input type="text" size="4" class="qty" title="Qty" value="1" data-step="1">
                                        <span class="plus"><i class="fa fa-plus"></i></span></div>
                                    </div>
                                </div>
                            </form>
                            <a href="#" title="Add to cart" class="link-ver1"><i class="icon-bag"></i><span>Add to cart</span></a>
                            <a href="#" title="Wishlist" class="link-ver1"><i class="icon icon-heart"></i></a>
                            <a href="#" title="Compare" class="link-ver1"><i class="icon icon-bar-chart"></i></a>
                        </div>
                        <div class="infomation">
                            <p class="sku"><span>SKU: </span>671272</p>
                            <p class="category"><span>Category: </span> Swteaters</p>
                            <p class="tags"><span>Tags: </span>Sweaters, Turtleneck, Wool</p>
                        </div>
                   </div>
                </div>
                <!-- End product-info -->
             </div>
             <!-- End product -->
          </div>
          <!-- End quick view -->
       </div>
       <!-- End quick modal -->
    </div>
    <!-- End quickview-wrapper -->

### 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.

### Templates

### 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: contact-us.html. If you want to insert the modules in the template, please make sure the wrap is like:

    <body>
        <header id="header" class="header-v1...">
            <div id="topbar">
                ...
            </div>
            <!-- End top bar -->
            ...
        </header>
        <!-- End header -->
        <section class="main-content page-blog ...">
            ...
        </section>
        <!-- End Main-Content -->
        <footer id="footer" class="footer-v1...">
            ...
        </footer>
        <!-- End footer -->
    </body>

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:

### Fullwidth

If you want put the content fill to fullwidth of main-wrap, use the fullwidth as the home-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="time" data-countdown="countdown" data-date="08-20-2018-10-20-30"></div>

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

### Css

### Css files

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.

- style.css - Theme common styles
- bootstrap.min.css - bootstrap styles
- bootstrap-slider.css - bootstrap slider styles
- ionicons.min.css - Font Ionicons stylesheet
- owl.carousel.min.css - Slider OWL style
- owl.theme.default.min.css - Slider OWL style
- slick.css - Slider slick style
- slick-theme.css - Slider slick style
- fonts Folder

### Scss files

You can edit all files scss file then compile into style.css.

- bootstrap Folder
- components Folder
- style.scss

### Javascript

This theme imports 8 Javascript files. All located in the "js" folder.

1. jquery-1.12.4.min.js - jQuery -1.11
2. bootstrap.min.js - bootstrap
3. bootstrap.js - bootstrap
4. main.js - main custom jQuery
5. bootstrap-slider.min.js - select
6. countdown.js- Timer countdown
7. owl.carousel.min.js - owl carouel
8. slick.min.js - Slick carousel

### Help & Support

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