Metronic - Website Template

Documentation v3.6.2

Thank You For Purchasing Metronic, One of Our Premium Items!

If you have any questions that are beyond the scope of this help file, please email our support support@keenthemes.com.

Table of Contents:

2. Template Structure

To top

All template files have fixed structure consisting of header, page-slider, main, pre-footer and footer as shown below:

Beginning of Page

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions. 

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

Page Head

Page head contains metadata, javascript and css files: 

<!-- Head BEGIN -->
<head>
  <meta charset="utf-8">
  <title>Metronic Frontend</title>

  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta content="Metronic Shop UI description" name="description">
  <meta content="Metronic Shop UI keywords" name="keywords">
  <meta content="keenthemes" name="author">

  <meta property="og:site_name" content="-CUSTOMER VALUE-">
  <meta property="og:title" content="-CUSTOMER VALUE-">
  <meta property="og:description" content="-CUSTOMER VALUE-">
  <meta property="og:type" content="website">
  <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
  <meta property="og:url" content="-CUSTOMER VALUE-">

  <link rel="shortcut icon" href="favicon.ico">
  <link href="favicon.ico" rel="SHORTCUT ICON" type="image/ico">

  <!-- Fonts START -->
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|PT+Sans+Narrow|Source+Sans+Pro:200,300,400,600,700,900&amp;subset=all" rel="stylesheet" type="text/css">
  <!-- Fonts END -->

  <!-- Global styles START -->          
  <link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="../../assets/global/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
  <!-- Global styles END --> 
   
  <!-- Page level plugin styles START -->
  <link href="../../assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
  <link href="../../assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.css" rel="stylesheet">
  <link href="../../assets/global/plugins/slider-revolution-slider/rs-plugin/css/settings.css" rel="stylesheet">
  <!-- Page level plugin styles END -->

  <!-- Theme styles START -->
  <link href="../../assets/global/css/components.css" rel="stylesheet">
  <link href="../../assets/frontend/layout/css/style.css" rel="stylesheet">
  <link href="../../assets/frontend/pages/css/style-revolution-slider.css" rel="stylesheet"><!-- metronic revo slider styles -->
  <link href="../../assets/frontend/layout/css/style-responsive.css" rel="stylesheet">
  <link href="../../assets/frontend/layout/css/custom.css" rel="stylesheet">
  <!-- Theme styles END -->
</head>
<!-- Head END -->

Header

Header contains of logo and top menu bar and it used in all pages. HTML code of header container shown below: 

    <!-- BEGIN HEADER -->
    <div class="header">
      <div class="container">
        <!-- BEGIN NAVIGATION -->
        <div class="header-navigation pull-right font-transform-inherit">
          <ul>
          </ul>
        </div>
        <!-- END NAVIGATION -->
      </div>
    </div>
    <!-- Header END -->

Slider

Revoluton Slider 

    <!-- BEGIN SLIDER -->
    <div class="page-slider margin-bottom-40">
      <div class="fullwidthbanner-container revolution-slider">
        <div class="fullwidthabnner">
          <ul id="revolutionul">
          </ul>
          <div class="tp-bannertimer tp-bottom"></div>
        </div>
      </div>
    </div>
    <!-- END SLIDER -->

Content

Content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below: 

    <div class="main">
      <div class="container">
      </div>
    </div>

Footer

    <!-- BEGIN PRE-FOOTER -->
    <div class="pre-footer">
      <div class="container">
      </div>
    </div>
    <!-- END PRE-FOOTER -->

    <!-- BEGIN FOOTER -->
    <div class="footer">
      <div class="container">
      </div>
    </div>
    <!-- END FOOTER -->

End Of Page(Javascripts)

Javascript files loaded in the end of page. This will reduce page load time.

    <!-- Load javascripts at bottom, this will reduce page load time -->
    <!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
    <!--[if lt IE 9]>
    <script src="assets/plugins/respond.min.js"></script>  
    <![endif]-->  
    <script src="../../assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="../../assets/global/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>      
    <script src="../../assets/frontend/layout/scripts/back-to-top.js" type="text/javascript"></script>
    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
    <script src="../../assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->
    <script src="../../assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script><!-- slider for products -->

    <!-- BEGIN RevolutionSlider -->
    <script src="../../assets/global/plugins/slider-revolution-slider/rs-plugin/js/jquery.themepunch.plugins.min.js" type="text/javascript"></script>
    <script src="../../assets/global/plugins/slider-revolution-slider/rs-plugin/js/jquery.themepunch.revolution.min.js" type="text/javascript"></script>
    <script src="../../assets/frontend/pages/scripts/revo-slider-init.js" type="text/javascript"></script>
    <!-- END RevolutionSlider -->

    <script src="../../assets/frontend/layout/scripts/layout.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            Layout.init();    
            Layout.initOWL();
            RevosliderInit.initRevoSlider();
            Layout.initTwitter();            
        });
    </script>
    <!-- END PAGE LEVEL JAVASCRIPTS -->

HTML Code Comment Sample

All the html, css and javascript file contents have easy to refer and meaningful comments:

          <!-- BEGIN COPYRIGHT -->
          <div class="col-md-6 col-sm-6 padding-top-10">
            2014 © Metronic Shop UI. ALL Rights Reserved. <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
          </div>
          <!-- END COPYRIGHT -->

CSS Code Comment Sample

/* FIX styles BEGIN */
.page-header-fixed .header {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99999;
}
body.page-header-fixed {
	padding-top: 107px !important; /* height of the header */
}
/* FIX styles END */

3. Font

To top

Metronic uses Open Sans font from google fonts. The font imported in main css file: assets/css/style.css

Load Open Sans, PT Sans Narrow, Source Sans Pro Font From Remote Google Fonts

  <!-- Fonts START -->
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|PT+Sans+Narrow|Source+Sans+Pro:200,300,400,600,700,900&amp;subset=all" rel="stylesheet" type="text/css">
  <!-- Fonts END -->

Extended Cyrillic Language Support

/***
Import fonts
***/
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,cyrillic-ext);

Extended Greek Language Support

/***
Import fonts
***/
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,greek-ext);

Extended Vietnamese Language Support

/***
Import fonts
***/
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,vietnamese);

4. Header with Top Bar

To top

Top bar contains of contact info, social links etc.

Top Bar Options

    <!-- BEGIN TOP BAR -->
    <div class="pre-header">
        <div class="container">
            <div class="row">
                <!-- BEGIN TOP BAR LEFT PART -->
                <div class="col-md-6 col-sm-6 additional-shop-info">
                    <ul class="list-unstyled list-inline">
                        <li><i class="fa fa-phone"></i><span>+1 456 6717</span></li>
                        <li><i class="fa fa-envelope-o"></i><span>info@keenthemes.com</span></li>
                    </ul>
                </div>
                <!-- END TOP BAR LEFT PART -->
                <!-- BEGIN TOP BAR MENU -->
                <div class="col-md-6 col-sm-6 additional-nav">
                    <ul class="list-unstyled list-inline pull-right">
                        <li><a href="page-login.html">Log In</a></li>
                        <li><a href="page-reg-page.html">Registration</a></li>
                    </ul>
                </div>
                <!-- END TOP BAR MENU -->
            </div>
        </div>        
    </div>
    <!-- END TOP BAR -->

6. Javascript Initialization

To top

Core javascript initialization implemented in assets/frontend/layout/scripts/layout.js thorugh Layout object as shown below. This approach enables an easy modular implementation to initialize jquery plugins and other application logics. 

var Layout = function () {

    var localVariable; //local variable

    var sampleFunction = function() {
       //sample function code
    }

    return {

        //main method to initiate template pages
        init: function () {           
            sampleFunction() // call local function
        },

        //sample method declaration
        sampleMethod: function (test) 
        {
          alert(test);
      }

    };

}();

Core Handler Functions defined in assets/frontend/layout/scripts/layout.js

Below will be listed all handler functons implemented in layout object:

handleIEFixes

Fix html5 placeholder attribute for ie7 & ie8.

handleBootstrap

Bootstrap plugins initialization.

handleMisc

Handle Scroller

handleSearch

Show/hide ssearchbar

handleTheme

Set Theme Color

7. Coding & Extending

To top

CSS

To overide the theme CSS styles you can use assets/frontend/layout/css/custom.css for your own customization. This will make the future updates easier if you keep your own CSS code seperate.

8. Javascript Plugins & Resources

To top

Select Plugin Or Resource:

Bootstrap

Metronic Frontennd based on Twitter Bootstrap

CSS Files

<link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

JS Files

<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

Official Documentation

http://getbootstrap.com

OWL Carousel

Fully loaded, responsive content slider

CSS Files

<link href="../../assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.css" rel="stylesheet">

JS Files

<script src="../../assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script><!-- slider for products -->

Official Documentation

OWL Carousel

Fancybox

FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages.

CSS Files

<link href="assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" />

JS Files

<script type="text/javascript" src="assets/global/plugins/fancybox/source/jquery.fancybox.pack.js"></script>

Official Documentation

http://www.fancyapps.com/fancybox/

Font Awesome 3.2.1

The iconic font designed for use with Twitter Bootstrap

CSS Files

<link href="assets/global/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" />

Official Documentation

http://fortawesome.github.com/Font-Awesome/

Font Awesome 3.2.1

GMaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

CSS Files

No CSS file

JS Files

<script src="assets/global/plugins/gmaps/gmaps.js" type="text/javascript"></script>

Official Documentation

http://hpneo.github.com/gmaps/

Revolution Slider

Turn simple HTML markup into a responsive or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization.

CSS Files

<link rel="stylesheet" href="assets/global/plugins/revolution_slider/css/rs-style.css" media="screen">
<link rel="stylesheet" href="assets/global/plugins/revolution_slider/rs-plugin/css/settings.css" media="screen">

JS Files

<script type="text/javascript" src="assets/global/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="assets/global/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.tools.min.js"></script>

Official Documentation

Please kindly find documentation for Revolution Slider in downloaded pack

Uniform

Minimalistic form elements with jQuery

CSS Files

<link href="assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>

JS Files

<link href="assets/global/plugins/uniform/jquery.uniform.min.js" rel="stylesheet" type="text/css"/>

Official Documentation

http://uniformjs.com/

Open Sans

Metornic uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700

CSS Files

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

Official Documentation

http://www.google.com/webfonts

9. References

To top

Below is the list of all plugins and external resources used to power this template.

Name Description URL
jQuery 1.11.2 Core Javascript library http://www.jquery.com
Twitter Bootstrap v3.3.2 Sleek, intuitive, and powerful front-end framework for faster and easier web development http://getbootstrap.com
Bxslider Fully loaded, responsive content slider http://bxslider.com
FancyBox FancyBox is a tool for displaying images, html content and multi-media http://fancybox.net/
gmaps.js gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code http://hpneo.github.com/gmaps/
Revolution Slider Turn simple HTML markup into a responsive or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization. http://uniformjs.com/
Uniform Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility Revolution Slider on CodeCanyon
Font Awesome The iconic font designed for use with Twitter Bootstrap http://fortawesome.github.com/Font-Awesome/
Open Sans Metornic Frontend uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700 http://www.google.com/webfonts

10. Change Log

To top

Version 3.6.3 – 10 March 2015(Both LTR and RTL versions)

  • FIX: Undefined reference: 'Metronic' issue on index.html
    • Updated html file: index.html

Version 3.6.2 – 03 February 2015(Both LTR and RTL versions)

  • UPDATED: Bootstrap 3.3.2
    • Updated folder: assets/global/plugins/bootstrap/
  • UPDATED: Font Awesome 4.3.0
    • Updated folder: assets/global/plugins/font-awesome/
  • UPDATED: jQuery v1.11.2
    • Updated folder: assets/global/plugins/jquery.min.js

Version 3.6.1 – 24 December 2014(Both LTR and RTL versions)

  • UPDATE: Latest jQuery Revolution Slider Plugin
    • Updated plugin folder: assets/global/plugins/slider-revolution-slider/

Version 3.6 – 11 December 2014(Both LTR and RTL versions)

  • No changes

Version 3.5.2 – 8 December 2014(Both LTR and RTL versions)

  • IMPROVEMENT: Some Improvements
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css
  • FIX: Minor Bug Fixes
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css

Version 3.5.1 – 25 November 2014(Both LTR and RTL versions)

  • UPDATED: Bootstrap 3.3.1
    • Updated folder: assets/global/plugins/bootstrap/

Version 3.5 – 11 November 2014(Both LTR and RTL versions)

  • UPDATED: Bootstrap 3.3.0
    • Updated folder: assets/global/plugins/bootstrap/

Version 3.4 – 4 November 2014(Both LTR and RTL versions)

  • No changes

Version 3.3.1 – 14 October 2014(Both LTR and RTL versions)

  • UPDATE: Latest jQuery Revolution Slider Plugin
    • Updated plugin folder: assets/global/plugins/slider-revolution-slider/
  • UPGRADE: jQuery 1.11.1
    • Updated plugin file: assets/global/plugins/jquery.min.js
    • Updated plugin file: assets/global/plugins/jquery.min.map
    • Updated plugin file: assets/global/plugins/jquery-migrate.min
  • UPGRADE: Fontawesome v4.2.0
    • Updated plugin folder: assets/global/plugins/font-awesome/

Version 3.3.0 – 24 September 2014(Both LTR and RTL versions)

  • IMPROVEMENT: Some Improvements
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css
  • FIX: Minor Bug Fixes
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css

Version 3.2.0 – 03 September 2014(Both LTR and RTL versions)

  • No changes.

Version 3.1.3 – 01 July 2014(Both LTR and RTL versions)

  • UPDATE: Latest jQuery Revolution Slider Plugin
    • Updated plugin folder: assets/global/plugins/slider-revolution-slider/
    • Modified html file(new jquery.themepunch.tools.min.js file included): templates/frontend/index.html

Version 3.1.1 – 01 July 2014(Both LTR and RTL versions)

  • UPDATE: Bootstrap 3.2.0
    • Updated plugin folder: assets/global/plugins/bootstrap/
    • Modified html files: all html files
  • NEW: Auto Closable Header Search Box
    • Modified javascript file: assets/frontend/layout/scripts/layout.js
  • FIX: Minor Bug Fixes
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css

Version 3.1 – 10 May 2014(Both LTR and RTL versions)

  • UPDATE: Fontawesome 4.1.0
    • Updated plugin folder: assets/globals/plugins/font-awesome/
    • Modified html file: feature-buttons.html
  • FIXED: Fixed Header Issue on IE11
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css
  • FIXED: Fixed Header Z-index Issue
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css
  • FIXED: Bootstrap Button Size Issue
    • Modified css file: assets/frontend/layout/css/style.css
  • IMPROVEMENT: Minor code improments

Version 3.0.2 – 30 May 2014(Both LTR and RTL versions)

  • No changes.

Version 3.0.1 – 10 May 2014(Both LTR and RTL versions)

  • NEW: Added 6 Color Themes
  • FIXED: Sub Menu Click Issue on Mobile Devices
  • FIXED: Content Left & Right Margin Issue on Mobile Devices
  • FIXED: Horizontal Scroll Appeared On Mobile Devices
  • IMPROVEMENT: Other minor improments

Version 3.0 – 2 May 2014(Both LTR and RTL versions)

  • NEW: Corporate and eCommerce themes merged into one theme
  • NEW: OWL Carousel
    • Instead of BX Slider
  • UPDATE: Upgraded Revolution & Layer Sliders
  • IMPROVEMENT: Fixed header improved.
    • Now it's more smooth on scrolling.
    • If you are using Header with Top Bar and you wish to make Header fixed, then in the end of page you will need uncomment following JS inits: Layout.initFixHeaderWithPreHeader(); Layout.initNavScrolling();
  • IMPROVEMENT: Latest Tweets in footer now showing real tweets
  • IMPROVEMENT: Latest Tweets in footer now showing real tweets

Version 2.0.2 – 20 February 2014(Both LTR and RTL versions)

  • No Changes Made

Version 2.0.1 - 19 February 2014(Both LTR and RTL versions)

  • NEW: Mega Menu For Horizontal Menu
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css
    • Modified html files: all html files
  • UPGRADE: Latest Bootstrap 3.2.0
    • Updated folder: assets/global/plugins/bootstrap/
  • FIX: Missing Icons in Fontawesome 4.0.3 & Glypicons Examples
    • Modified html file: feature_icons.html
  • DROPPED: Metronic v1.4 version has been dropped from the package.

Version 2.0 - 12 February 2014(Both LTR and RTL versions)

  • NEW: Added social icons
  • UPDATE: Bootstrap 3.1.0
    • Updated folder: assets/global/plugins/bootstrap/
  • UPDATE: Revolution Slider 4.1.4
    • Updated folder: assets/global/plugins/revolution_slider/
  • UPDATE: Font Awesome 4.0.3
    • Updated folder: assets/global/plugins/revolution_slider/
  • FIX: Safari RTL issue

Version 1.5.5 - 10 December 2013(Both LTR and RTL versions)

  • NEW: 10 frontend theme PSD files
    • Index
    • About us
    • Blog
    • Blog item
    • Careers
    • Contact
    • FAQ
    • Login
    • Prices
    • Services
    • Modified folders: frontend/resources/theme_psd
  • UPDATE: Bootstrap 3.0.3
    • Updated folder: assets/global/plugins/bootstrap/
  • FIXED: Class typo error on frontend theme
    • Modified css files: assets/frontend/layout/css/style-metronic.css

Version 1.5.4 - 21 November 2013(Both LTR and RTL versions)

  • NEW: Header Fixed Page
    • Added html file: page_home_fixed_header.html
    • Modified css files: assets/frontend/layout/css/style.css
  • UPDATE: Bootstrap 3.0.2
    • Updated folder: assets/global/plugins/bootstrap/
  • FIXED: Typo in style.css on line 2376
    • Modified css files: assets/frontend/layout/css/style.css
  • FIXED: FAQ page wrong tab active
    • Modified css files: page_faq.html

Version 1.5.3 - 8 November 2013(Both LTR and RTL versions)

  • NEW: Login Page
    • Added html file: page_login.html
    • Modified css files: assets/frontend/layout/css/style.css
  • NEW: Signup Page
    • Added html file: page_signup.html
    • Modified css files: assets/frontend/layout/css/style.css
  • NEW: Careers Page
    • Added html file: page_careers.html
    • Modified css files: assets/frontend/layout/css/style.css
  • NEW: Added categories block in Blog
    • Modified html files: blog.html
    • Modified html files: blog_item.html
    • Modified css files: assets/frontend/layout/css/style.css
  • NEW: Added Login & Signup links on topbar in page_home2.html
    • Modified html files: page_home2.html
    • Modified css files: assets/frontend/layout/css/style.css
  • UPDATE: Some styles are separeted into page level css
    • Added css file: assets/frontend/layout/css/gallery.css
    • Added css file: assets/frontend/layout/css/page404.css
    • Added css file: assets/frontend/layout/css/page500.css
    • Added css file: assets/frontend/layout/css/search-page-results.css
    • Modified css files: assets/frontend/layout/css/style.css
  • UPDATE: Font Awesome plugin updated
    • Modified html files: feature_icons.html
    • Other files that contain some font awesome icons
  • FIXED: Portfolio bug fixed
    • Modified html files: portfolio_2.html
    • Modified html files: portfolio_3.html
    • Modified html files: portfolio_4.html
    • Modified html files: portfolio_item.html

Version 1.5.2 – 21 October 2013(Both LTR and RTL versions)

  • No Changes

Version 1.5.1 - 18 October 2013(Both LTR and RTL versions)

  • NEW: FAQ Page
    • Added html file: page_faq.html
    • Modified css files: assets/frontend/layout/css/style.css
  • NEW: Gallery
    • Added html file: page_gallery.html
    • Modified css files: assets/frontend/layout/css/style.css
  • NEW: Search Results
    • Added html file: page_search_result.html
    • Modified css files: assets/frontend/layout/css/style.css
  • NEW: 404 Error Page
    • Added html file: page_404.html
    • Modified css files: assets/frontend/layout/css/style.css
  • NEW: 500 Error Page
    • Added html file: page_500.html
    • Modified css files: assets/frontend/layout/css/style.css
  • FIXED: Social Icons on Contacts page
    • Modified css files: assets/frontend/layout/css/style.css
  • FIXED: Portfolio Item Issue When Window Resized on Firefox
    • Updated plugin javascript file: assets/global/plugins/jquery.mixitup.min.js
  • FIXED: Fixed Recent Works and Clients Sliders Issue on Mac Safari
    • Updated plugin folder: assets/global/plugins/bxslider/

Version 1.5 - 7 October 2013(Both LTR and RTL versions)

  • NEW: Bootstrap 3.0 Support
    • Modified html files: all html files
    • Modified css files: all css files
    • Modified js files: all js files
  • NEW: Fixed Header
    • Modified html files: all html files
    • Modified css files: assets/frontend/layout/css/style.css, assets/frontend/layout/css/responsive.css
    • Modified js files: assets/global/scripts/app.js
  • NEW: New Slide Added into the Homepage's Revolution Slider
    • Modified html files: page_home2.html
    • Modified css files: assets/frontend/layout/css/style.css
  • FIXED: Bxslider image load issue fixed
  • UPDATE: Latest jQuery v1.10.2
    • Updated file: assets/global/plugins/jquery-1.10.2.min.js
  • UPDATE: Latest Font Awesome v3.2.1
    • Updated folder: assets/global/plugins/font-awesome
  • UPDATE: Latest BxSlider v4.1.1
    • Updated folder: assets/global/plugins/bxslider
  • ENHANCEMENT: Global Code Enhancement with Bootstrap 3.0 Support
    • Modified html files: all html files
    • Modified css file: all css files
    • Modified javascript file: all js files

Version 1.0 – 13 February 2013

  • Initial release

11. Upgrade

To top

Upgrade from v3.1 to v3.3.x

Just replace the assets folder and refer to the above changelog.

Upgrade from v3.0.x to v3.1

Just replace the assets folder and refer to the above changelog.

Upgrade to v3.0.1

Just replace the assets folder and refer to the above changelog.

Upgrade to v3.x

The latest Metronic v3.x is completely rewriten using a new folder structure(multi themes within single framework) with SASS support. So you will need to update your entire HTML code and assets folder.

Upgrade From v1.5.x To v2.x

Just replace the assets folder with the latest one(merge back your own changes if you have done any) and update html codes of header, footer & sidebar.

Upgrade From v1.4.x To v2.x

Since v1.5.x came with Bootstrap 3.0 support, we have changed and edited the entire theme and updated most of the 3rd party plugins and resources. The best practice for 2.x to 3.0 migration will be, to update your page header, top bar menu, sidebar menu and footer part first. Then proceed with content and UI components.

Major Metronic Class Changes

Older Versions Metronic 1.5
.m-wrap .form-control
.btn .btn .default
.xsmall .input-xsmall
.small .input-small
.medium .input-medium
.large .input-large

Major Bootstrap Class Changes

Bootstrap 2.x Bootstrap 3.0
.container-fluid .container
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.visible-phone .visible-sm
.visible-tablet .visible-md
.visible-desktop .visible-lg
.hidden-phone .hidden-sm
.hidden-tablet .hidden-md
.hidden-desktop .hidden-lg
.input-small .input-sm
.input-large .input-lg
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.thumbnail .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline

Please check out http://getbootstrap.com/getting-started/#migration to learn more about Bootstrap 2.x to 3.0 migration.

Please do not forget to backup your files before the upgrade. If you encountered any problem during the upgrade please contact our support at support@keenthemes.com

12. End Of Documentation

To top

Once again, thanks for purchasing Metronic. We hope you will enjoy using it for your next project.