Noren

Multi Store Responsive HTML Template

• created: 03/10/2016
• latest update: 03/12/2016
• by: EngoTheme
• 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!

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

• Noren - Main theme folder
  • styles - css file folder
  • js - js files folder
  • img - UI images and product folder

• Documentation - help file

        We provide 38 HTML:

• index1.html 
• index1-header2.html
• index2.html 
• index2-header2.html
• index3.html
• index3-header2.html 
• about.html  
• 404.html
• accordion.html
• banner.html
• blog-full-width.html
• blog-left-sidebar.html
• blog-right-sidebar.html
• blog-post-slide.html
• blog-single-post.html
• checkout.html
• contact1.html
• contact2.html
• faq.html
• gallery.html
• googlemap.html
• iconboxes.html
• myaccount.html
• ordertracking.html
• piechart.html
• product-simple.html
• progress.html
• quickview.html
• shop-catalog-grid.html
• shop-catalog-masonry.html
• shop-categories.html
• shop-categories-width-icon.html
• shop-sidebar.html
• shopping-cart.html
• slider.html
• typography-separators.html
• wishlist.html
• noren-coming-son

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.

<header id="header" class="header header-v1" >
   <div class="main-header">
      <div class="main-header">
      </div>
   </div>
   <!-- /.main-header -->
   <div class="toggle-header">
      <div id="nr-account" class="nr-account fullheight not-logged-in">
      </div>
      <!-- /.content-inner -->
      <div id="nr-search-head" class="nr-search-head fullheight just-hidden" >
      </div>
      <div id="nr-mainmenu" class="nr-mainmenu fullheight" >
         <div class="ts-mainmenu-inner">
            <nav class="navigation-north">
            </nav>
            <div class="ts-newsletter">
            </div>
            <div class="ts-social-header">
            </div>
         </div>
         <!-- /.ts-mainmenu-inner -->
      </div>
      <!-- /nr-mainmenu -->
   </div>
   <!-- /.toggle-header -->
</header>
<section id="main-container" class="main-container">
   <div class="ts-categories-grid grid-masonry" data-layoutmode="packery">
   </div>
   <div class="section-service">
      <div class="row">
         <div class="col-md-3 col-sm-6">
            <div class="ts-service bg1"></div>
         </div>
         <div class="col-md-3 col-sm-6">
            <div class="ts-service bg2"></div>
         </div>
         <div class="col-md-3 col-sm-6">
            <div class="ts-service bg3"></div>
         </div>
         <div class="col-md-3 col-sm-6">
            <div class="ts-service bg2"></div>
         </div>
      </div>
   </div>
   <div class="products products-grid-no-margin"></div>
   <div class="section-feature-2"></div>
   <div class="section-newsletter"></div>
</section>
<footer>
   <div class="left-footer">
   </div>
   <div class="right-footer">
   </div>
   <a href="#" class="backtotop">
   <span class="text-totop">Top</span>
   <span class="icon icon-arrows-slim-right"></span>
   </a>
</footer>

Sidebar

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

<div class="widget shop-widget widget_product_categories">
   <h5 class="sidebar-title">Product categories</h5>
   <ul class="product-categories">
      <li class="cat-item cat-parent">
         <a href="#">Clothings</a>
         <ul class="children">
            <li class="cat-item"><a href="#">Dresses</a></li>
            <li class="cat-item"><a href="#">Men</a></li>
            <li class="cat-item"><a href="#">Petite</a></li>
            <li class="cat-item"><a href="#">Shirts &amp; Blouses</a></li>
         </ul>
      </li>
      <li class="cat-item"><a href="#">Decoration</a></li>
      <li class="cat-item"><a href="#">Bags &amp; Backpacks</a></li>
      <li class="cat-item"><a href="#">Furniture</a></li>
      <li class="cat-item"><a href="#">Accessory</a></li>
   </ul>
</div>

Logo:

Change your logo text and link under sidebar section:

<div class="logo"><a href="#"><img src="images/noren.png" alt="logo" /></a></div>

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

  
           .logo{
                  margin:41px 0;
                  float:left;

             }

Menu:

Edit menu here:

<!--Menu-->

<nav class="navigation-north-2">
   <ul>
      <li class="menu-item-has-children">
         <a href="" title="">Home</a>
         <ul class="sub-menu">
            <li><a href="index1.html" title="">Home 1</a></li>
            <li><a href="index2.html" title="">Home 2</a></li>
            <li><a href="header2.html" title="">Heder II</a></li>
         </ul>
      </li>
      <li >
         <a href="#">Shop</a>
         <div class="sub-menu-lever megamenu" >
            <div class="row">
               <div class="col-md-6 col-sm-6">
                  <div class="sub-megamenu">
                     <div class="item-menu">
                        <h6 class="menu-title">Shop pages</h6>
                        <ul>
                           <li><a href="shop-catalog-grid.html">Shop-catelog-grid</a></li>
                           <li><a href="shop-catalog-masonry.html">Shop-catalog-masonry</a></li>
                           <li><a href="shop-categories.html">Shop-categories</a></li>
                           <li><a href="shop-categories-width-icon.html">Shop-categories-width-icon</a></li>
                           <li><a href="shop-sidebar.html">Shop-categories-sidebar</a></li>
                           <li><a href="shopping-cart.html">Shop-categories-cart</a></li>
                        </ul>
                     </div>
                  </div>
               </div>
               <div class="col-md-6 col-sm-6">
                  <div class="sub-megamenu">
                     <div class="item-menu">
                        <h6 class="menu-title">Product demo</h6>
                        <ul>
                           <li><a href="product-simple.html">Product-simple</a></li>
                           <li><a href="quickview.html">Quick view</a></li>
                           <li><a href="checkout.html">Checkout</a></li>
                           <li><a href="wishlist.html">Wishlist</a></li>
                           <li><a href="odertracking.html">Odertracking</a></li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </li>
      <li class="menu-item-has-children">
         <a href="#">Pages</a>
         <ul class="sub-menu">
            <li><a href="about.html">About us</a></li>
            <li><a href="faq.html">Faq</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="myaccount.html">My account</a></li>
            <li><a href="googlemap.html">Google maps</a></li>
            <li><a href="404.html">404</a></li>
         </ul>
      </li>
      <li class="menu-item-has-children">
         <a href="#">Elements</a>
         <ul class="sub-menu">
            <li><a href="accordion.html">Accordion</a></li>
            <li><a href="banner.html">Banner</a></li>
            <li><a href="iconboxes.html">Iconboxes</a></li>
            <li><a href="piechart.html">Piechart</a></li>
            <li><a href="progress.html">Progress</a></li>
            <li><a href="slider.html">Slider</a></li>
            <li><a href="typography-separators.html">Typography-separators</a></li>
         </ul>
      </li>
      <li class="menu-item-has-children">
         <a href="#">Blog</a>
         <ul class="sub-menu">
            <li><a href="blog-fullwidth.html">Blog fullwidth</a></li>
            <li><a href="blog-left-sidebar.html">Blog-left-sidebar</a></li>
            <li><a href="blog-right-sidebar.html">Blog-right-sidebar</a></li>
            <li><a href="blog-single-post.html">Blog-single-post</a></li>
            <li><a href="blog-post-slide.html">Blog-post-slide</a></li>
         </ul>
      </li>
      <li class="menu-item-has-children">
         <a href="#">Contact</a>
         <ul class="sub-menu">
            <li><a href="contact1.html">Contact 1</a></li>
            <li><a href="contact2.html">Contact 2</a></li>
         </ul>
      </li>
   </ul>
</nav>

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

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

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

<li >
   <a href="#">Shop</a>
   <div class="sub-menu-lever megamenu" >
      <div class="row">
         <div class="col-md-6 col-sm-6">
            <div class="sub-megamenu">
               <div class="item-menu">
                  <h6 class="menu-title">Shop pages</h6>
                  <ul>
                     <li><a href="shop-catalog-grid.html">Shop-catelog-grid</a></li>
                     <li><a href="shop-catalog-masonry.html">Shop-catalog-masonry</a></li>
                     <li><a href="shop-categories.html">Shop-categories</a></li>
                     <li><a href="shop-categories-width-icon.html">Shop-categories-width-icon</a></li>
                     <li><a href="shop-sidebar.html">Shop-categories-sidebar</a></li>
                     <li><a href="shopping-cart.html">Shop-categories-cart</a></li>
                  </ul>
               </div>
            </div>
         </div>
         <div class="col-md-6 col-sm-6">
            <div class="sub-megamenu">
               <div class="item-menu">
                  <h6 class="menu-title">Product demo</h6>
                  <ul>
                     <li><a href="product-simple.html">Product-simple</a></li>
                     <li><a href="quickview.html">Quick view</a></li>
                     <li><a href="checkout.html">Checkout</a></li>
                     <li><a href="wishlist.html">Wishlist</a></li>
                     <li><a href="odertracking.html">Odertracking</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
</li>

Footer

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

<footer>
   <div class="left-footer">
      <div class="logo-footer"><a href="#"><img src="images/noren-footer.png" alt=""></a></div>
      <div class="copyright">
         <p>© Noren 2016. A project design by <a href="#">Engotheme</a></p>
      </div>
   </div>
   <div class="right-footer">
      <ul class="ts-social-footer">
         <li><a href="#"><i class="fa fa-twitter"></i></a></li>
         <li><a href="#"><i class="fa fa-behance"></i></a></li>
         <li><a href="#"><i class="fa fa-tumblr"></i></a></li>
         <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
      </ul>
      <ul class="menu-footer">
         <li><a href="#">History</a></li>
         <li><a href="#">Blog</a></li>
         <li><a href="#">Faqs</a></li>
         <li><a href="#">Order Tracking</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </div>
   <a href="#" class="backtotop">
   <span class="text-totop">Top</span>
   <span class="icon icon-arrows-slim-right"></span>
   </a>
</footer>

Contact-newletter-footer

<!-- Contact-newletter-footer  -->
<div class="section-newsletter">
   <div class="container">
      <div class="row">
         <div class="col-sm-6 col-sm-offset-3">
            <div class="ts-newsletter-shortcode">
               <h4>Get 10% off</h4>
               <p>by subscribing to our newsletter</p>
               <form class="form-newsletter" >
                  <input type="text" placeholder="Your email address...">
                  <span><button class="button_newletter">Submit</button></span>
               </form>
            </div>
         </div>
      </div>
   </div>
</div>

The search need backend program.

Social icons

Find the code:

<ul class="ts-social-footer">
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-behance"></i></a></li>
  <li><a href="#"><i class="fa fa-tumblr"></i></a></li>
  <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
</ul>

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

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

Main Home

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

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

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">
                   ...
               </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 >
   <header id="header" class="header header-v1" >
   <div class="main-header">
      <div class="main-header">
      </div>
   </div>
   <!-- /.main-header -->
   <div class="toggle-header">
      <div id="nr-account" class="nr-account fullheight not-logged-in">
      </div>
      <!-- /.content-inner -->
      <div id="nr-search-head" class="nr-search-head fullheight just-hidden" >
      </div>
      <div id="nr-mainmenu" class="nr-mainmenu fullheight" >
         <div class="ts-mainmenu-inner">
            <nav class="navigation-north">
            </nav>
            <div class="ts-newsletter">
            </div>
            <div class="ts-social-header">
            </div>
         </div>
         <!-- /.ts-mainmenu-inner -->
      </div>
      <!-- /nr-mainmenu -->
   </div>
   <!-- /.toggle-header -->
</header>
<section id="main-container" class="main-container">
   <div class="ts-categories-grid grid-masonry" data-layoutmode="packery">
   </div>
   <div class="section-service">
      <div class="row">
         <div class="col-md-3 col-sm-6">
            <div class="ts-service bg1"></div>
         </div>
         <div class="col-md-3 col-sm-6">
            <div class="ts-service bg2"></div>
         </div>
         <div class="col-md-3 col-sm-6">
            <div class="ts-service bg3"></div>
         </div>
         <div class="col-md-3 col-sm-6">
            <div class="ts-service bg2"></div>
         </div>
      </div>
   </div>
   <div class="products products-grid-no-margin"></div>
   <div class="section-feature-2"></div>
   <div class="section-newsletter"></div>
</section>
<footer>
   <div class="left-footer">
   </div>
   <div class="right-footer">
   </div>
   <a href="#" class="backtotop">
   <span class="text-totop">Top</span>
   <span class="icon icon-arrows-slim-right"></span>
   </a>
</footer>
</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

Grid masonry

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

please set the date/time value in the wrap:

<div class="grid-masonry">

   <div class="item-category grid grid-2x">...</div>

   <div class="item-category grid">...</div>

   <div class="item-category grid">...</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.

• style.css - Theme common styles
• bootstrap.css - Twitter bootstrap styles
• font-awesome.min.css - Font Awesome stylesheet
• animate.min.css - Spectacular effects to wow styles
• jquery-ui.css
• chosen.css
• lightbox.css
• linea-arrows.css
• linea-basic-elaboration.css
• linea-basic.css
• linea-ecommerce.css
• linea-music.css
• linea-software.css
• linea-weather.css
• owl.carousel.css - Slider carousel style
• prettyPhoto247c.css - PrettyPhoto slider style
• woocommerce.css

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

1. bootstrap.min.js – main custom javascript
2. custom.js - main custom jQuery
3. jquery-1.11.min.js  - jQuery -1.11
4. jquery-ui.js - jQuery
5. front-end.js
6. chosen.jquery.min.js
7. count-process.js
8. isotope.pkgd.js
9. jquery.debouncedresize.js
10. jquery.mousewheel.min.js
11. lightbox.js
12. numscroller.js
13. owl.carousel.min.js
14. packery-mode.pkgd.min.js
15. piechart.js
16. process.js
17. wow.min.js
18. jquery.prettyPhoto.init.min367a.js
19. jquery.pettyPhoto.min005s.js
20. jquery.nicesscroll.min.js

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