Today Express

Multi Store Responsive HTML Template

• created: 29/10/2016
• latest update:
• by: EngoTemplates
• www.EngoTheme.com
• email: engotheme@gmail.com

Thank you for purchasing my Templates. 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:

• TodayExpress - Main Templates folder
  • styles - css file folder
  • js - js files folder
  • images - UI images and product folder

• Documentation - help file

        We provide 25 HTML:

• home_v1.html  - Posts list with thumbnails brick
• home_v2.html  - Posts list with thumbnails brick
• home_v3.html  - Posts list with thumbnails brick
• home_v4.html  - Posts list with thumbnails brick
• single_post_audio_v1.html  - View shop single audio version 1
• single_post_audio_v2.html  - View shop single audio version 2
• single_post_slideshow_v1.html  - View shop single slideshow version 1
• single_post_slideshow_v2.html  - View shop single slideshow version 1
• single_post_standard_v1.html  - View shop single standard version 1
• single_post_standard_v2.html  - View shop single standard version 2
• single_post_video_v1.html  - View shop single video version 1
• single_post_video_v2.html  - View shop single video version 2
• category_v1.html  -View shop category version 1
• category_v2.html  -View shop category version 2
• category_v3.html  -View shop category version 3
• category_v4.html  -View shop category version 4
• author_page.html  - Author Page
• contact.html  - View Contact
• page_404.html  - Page 404
• photo_category.html  - View Photo Category
• photo_signle_post.html  - View Signle Post
• video_category.html  - View Video Category
• video_signle_post.html  - View Signle Post

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 -->
<div class="tp-banner-container">
	...
</div>
<!-- End tp-banner-Container -->
<div class="main-content">
	...
</div>
<!-- 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">
    <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;
         }

Menu:

Edit menu here:

<!--Menu-->
<header id="header">
   <!-- header  content -->
   ...
   <nav class="mega-menu">
   <ul class="nav navbar-nav">>
          <li class="level1 hover-menu">
             <a href="#">...</a>
             <div class="sub-menu list-menu">
          	<div class="top-sub-menu">
          		<div class="item"><div>
          		...
          	<div>
            	<ul class="menu-level-1">
                  <li class="level2">
                  	<a href="#">...</a>
                  	<ul class="menu-level-2">
                  		<li class="level3"><a href="#">...</a></li>
                  		...
                  	</ul>
                  </li>
                  ...
              </ul>
            </div>
          </li>
          ...
       </ul>
    </nav>
</header>

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

<li class="level1"><a href="category_v1.html" title="Shop">Shop</a></li>

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

<li class="level1 hover-menu">
	<a href="#" title="Home">Home</a>
	<div class="sub-menu list-menu">
		<ul class="menu-level-1">
			<li class="level2"><a href="#">Home 1</a></li>
			...
		</ul>
	</div>
</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>

Post Item

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

<div class="post-item overlay ver1,ver2... cat1,cat2...">
    <div class="wrap-images">
    	<span class="lable">Social</span>
        <a class="images" href="#" title="images"><img class="img-responsive" src="assets/images/blog/17.jpg" alt="images"></a>
        <div class="tag">
            <p class="date"><i class="fa fa-clock-o"></i>May 06,2014</p>
            <a class="comments" href="#" title="comments"><i class="fa fa-comments"></i>10</a>
        </div>
    </div>
    <div class="text">
        <h2><a href="" title="title">The Perfect Templates for Games</a></h2>
        <p>Praesent posuere libero eu justo tristique, vitae ultricies justo volutpatInte. Ut luctus justo elit, sit amet..</p>
        <a class="read-more" href="#" title="read more">read more</a>
    </div>
</div>

Responsive

The Templates 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: 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 -->
	<div class="main-content page-blog ...">
		...
	</div>
	<!-- 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-2016-10-20-30"></div>

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

Css files

There are 8 main CSS files in this Templates.

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 - Templates common styles
• bootstrap.css - Twitter bootstrap styles
• font-awesome.min.css - Font Awesome stylesheet
• simple-line-icon.css - Font Awesome stylesheet
• animate.css - Animate style
• owl-slider.css - Slider OWL style
• slick.css - Slider Slick style
• settings.css - Slider bx slider style
• custombox.min.css - custombox style

Scss files

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

This Templates imports 13 Javascript files. All located in the "js" folder.

1. jquery-1.11.1.min.js  - jQuery -1.11
2. bootstrap.min.js – main custom javascript
3. store.js - main custom jQuery
4. jquery.Templatespunch.plugins.min.js - revolution slider
5. jquery.Templatespunch.revolution.min.js - revolution slider
6. engo-plugins.js - Plugin Time
7. owl.carousel.min.js - Map Icon
8. slick.min.js - Map Icon
9. wow.min.js - Map Icon
10. map-icons.js - Map Icon
11. custombox.min.js - Map Icon
12. legacy.min.js - Map Icon

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