.left-side is now deprecated in favor of .main-sidebar. This will allow us to add support for rtl in the future.

build/less/core.less

@@ -10,7 +10,7 @@ body {
   }
 }
 
-body {
+body {  
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -85,7 +85,9 @@ body {
 
 /* Fixed layout */
 .fixed {
-  .main-header, .left-side {
+  .main-header,
+  .main-sidebar,
+  .left-side {
     position: fixed;
   }
   .main-header {
@@ -160,7 +162,10 @@ a:hover, a:active, a:focus {
   }
 
   //Elements that we want to hide when printing
-  .left-side, .header, .content-header {
+  .main-sidebar,
+  .left-side,
+  .header,
+  .content-header {
     display: none;
   }
   //This is the only element that should appear, so let's remove the margins

build/less/header.less

@@ -180,9 +180,9 @@
       float: right;
     }
   }
-
+  .main-sidebar,
   .left-side {
-    padding-top: 0!important;
-    margin-top: 50px!important;
+    padding-top: 50px!important;
+    margin-top: 0!important;
   }
 }

build/less/sidebar.less

@@ -2,6 +2,10 @@
  * Component: Sidebar
  * ------------------
  */
+//Main Sidebar 
+// ``` .left-side has been deprecated in favor of .main-sidebar ```
+
+.main-sidebar,
 .left-side {
   position: absolute;
   top: 50px;

build/less/skins/skin-black.less

@@ -67,6 +67,7 @@
   }
   //Sidebar & Treeview
   // Sidebar color
+  .main-sidebar,
   .left-side,
   .wrapper {
     background: #222;

build/less/skins/skin-blue.less

@@ -78,14 +78,10 @@
   }
 
   // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper {
-    background: @skin-blue-sidebar-bg;
-  }
+  .wrapper ,
+  .main-sidebar,
   .left-side {
     background: @skin-blue-sidebar-bg;
-    /*				-webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);*/
   }
 
   .sidebar a {

build/less/skins/skin-green.less

@@ -78,14 +78,10 @@
   }
 
   // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper {
-    background: @skin-blue-sidebar-bg;
-  }
+  .wrapper ,
+  .main-sidebar,
   .left-side {
     background: @skin-blue-sidebar-bg;
-    /*				-webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);*/
   }
 
   .sidebar a {

build/less/skins/skin-purple.less

@@ -78,14 +78,10 @@
   }
 
   // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper {
-    background: @skin-blue-sidebar-bg;
-  }
+  .wrapper ,
+  .main-sidebar,
   .left-side {
     background: @skin-blue-sidebar-bg;
-    /*				-webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);*/
   }
 
   .sidebar a {

build/less/skins/skin-red.less

@@ -78,14 +78,10 @@
   }
 
   // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper {
-    background: @skin-blue-sidebar-bg;
-  }
+  .wrapper ,
+  .main-sidebar,
   .left-side {
     background: @skin-blue-sidebar-bg;
-    /*				-webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);*/
   }
 
   .sidebar a {

build/less/skins/skin-yellow.less

@@ -78,14 +78,10 @@
   }
 
   // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper {
-    background: @skin-blue-sidebar-bg;
-  }
+  .wrapper ,
+  .main-sidebar,
   .left-side {
     background: @skin-blue-sidebar-bg;
-    /*				-webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);*/
   }
 
   .sidebar a {

dist/css/AdminLTE.css

@@ -111,6 +111,7 @@ body {
 }
 /* Fixed layout */
 .fixed .main-header,
+.fixed .main-sidebar,
 .fixed .left-side {
   position: fixed;
 }
@@ -182,6 +183,7 @@ a:focus {
   .no-print {
     display: none;
   }
+  .main-sidebar,
   .left-side,
   .header,
   .content-header {
@@ -356,15 +358,17 @@ a:focus {
   .main-header .navbar-custom-menu {
     float: right;
   }
+  .main-sidebar,
   .left-side {
-    padding-top: 0!important;
-    margin-top: 50px!important;
+    padding-top: 50px!important;
+    margin-top: 0!important;
   }
 }
 /*
  * Component: Sidebar
  * ------------------
  */
+.main-sidebar,
 .left-side {
   position: absolute;
   top: 50px;
@@ -376,6 +380,7 @@ a:focus {
   transition: transform 0.3s ease;
 }
 @media (max-width: 767px) {
+  .main-sidebar,
   .left-side {
     -webkit-transform: translate(-230px, 0);
     -ms-transform: translate(-230px, 0);
@@ -384,6 +389,7 @@ a:focus {
   }
 }
 @media (min-width: 768px) {
+  .sidebar-collapse .main-sidebar,
   .sidebar-collapse .left-side {
     -webkit-transform: translate(-230px, 0);
     -ms-transform: translate(-230px, 0);
@@ -392,6 +398,7 @@ a:focus {
   }
 }
 @media (max-width: 767px) {
+  .sidebar-open .main-sidebar,
   .sidebar-open .left-side {
     -webkit-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
@@ -2820,14 +2827,10 @@ table.text-center th {
   margin: 0 1px;
   background: #2c3b41;
 }
-.skin-blue .wrapper {
-  background: #222d32;
-}
+.skin-blue .wrapper,
+.skin-blue .main-sidebar,
 .skin-blue .left-side {
   background: #222d32;
-  /*				-webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);*/
 }
 .skin-blue .sidebar a {
   color: #b8c7ce;
@@ -2969,6 +2972,7 @@ table.text-center th {
 .skin-black .user-panel > .info > a {
   color: #eee;
 }
+.skin-black .main-sidebar,
 .skin-black .left-side,
 .skin-black .wrapper {
   background: #222;
@@ -3125,14 +3129,10 @@ table.text-center th {
   margin: 0 1px;
   background: #2c3b41;
 }
-.skin-red .wrapper {
-  background: #222d32;
-}
+.skin-red .wrapper,
+.skin-red .main-sidebar,
 .skin-red .left-side {
   background: #222d32;
-  /*				-webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);*/
 }
 .skin-red .sidebar a {
   color: #b8c7ce;
@@ -3269,14 +3269,10 @@ table.text-center th {
   margin: 0 1px;
   background: #2c3b41;
 }
-.skin-green .wrapper {
-  background: #222d32;
-}
+.skin-green .wrapper,
+.skin-green .main-sidebar,
 .skin-green .left-side {
   background: #222d32;
-  /*				-webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);*/
 }
 .skin-green .sidebar a {
   color: #b8c7ce;
@@ -3413,14 +3409,10 @@ table.text-center th {
   margin: 0 1px;
   background: #2c3b41;
 }
-.skin-yellow .wrapper {
-  background: #222d32;
-}
+.skin-yellow .wrapper,
+.skin-yellow .main-sidebar,
 .skin-yellow .left-side {
   background: #222d32;
-  /*				-webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);*/
 }
 .skin-yellow .sidebar a {
   color: #b8c7ce;
@@ -3557,14 +3549,10 @@ table.text-center th {
   margin: 0 1px;
   background: #2c3b41;
 }
-.skin-purple .wrapper {
-  background: #222d32;
-}
+.skin-purple .wrapper,
+.skin-purple .main-sidebar,
 .skin-purple .left-side {
   background: #222d32;
-  /*				-webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-        box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);*/
 }
 .skin-purple .sidebar a {
   color: #b8c7ce;

documentation/index.html

@@ -24,22 +24,22 @@
         font-weight: 500;
       }
       .right-side {
-          background: #f9f9f9;      
+        background: #f9f9f9;
       }
       .page-header {
         border: 0;
         margin: 20px 0;
-        padding: 0;        
+        padding: 0;
         position: relative;
-        z-index: 1;                
+        z-index: 1;
       }
-      .page-header span {        
+      .page-header span {
         z-index: 5;
         display: inline-block;
         background-color: #f9f9f9;
         padding: 10px 10px 10px 0;
         font-size: 25px;
-        line-height: 1;        
+        line-height: 1;
         border-radius: 3px;
       }
       .page-header::before {
@@ -51,11 +51,11 @@
         position: absolute;
         top: 50%;
         margin-top: 2px;
-        z-index: -1;        
+        z-index: -1;
       }
       .lead {
         font-size: 16px;
-        font-weight: 400;        
+        font-weight: 400;
       }
       .content {
         padding: 10px 25px;
@@ -124,12 +124,12 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
-        <section class="sidebar">
+        <section class="sidebar" id="scrollspy">
 
           <!-- sidebar menu: : style can be found in sidebar.less -->
-          <ul class="sidebar-menu" id="scrollspy">
+          <ul class="nav sidebar-menu">
             <li class="header">TABLE OF CONTENTS</li>
             <li class='active'><a href="#introduction"><i class='fa fa-circle-o'></i> Introduction</a></li>
             <li><a href="#download"><i class='fa fa-circle-o'></i>  Download</a></li>
@@ -137,6 +137,8 @@
             <li><a href="#advice"><i class='fa fa-circle-o'></i> Advice</a></li>
             <li><a href="#layout"><i class='fa fa-circle-o'></i>  Layout</a></li>
             <li><a href="#components"><i class='fa fa-circle-o'></i>  Components</a></li>
+            <li><a href="#browsers"><i class='fa fa-circle-o'></i>  Browser Support</a></li>
+            <li><a href="#upgrade"><i class='fa fa-circle-o'></i>  Upgrade Guide</a></li>
           </ul>
         </section>
         <!-- /.sidebar -->
@@ -222,10 +224,10 @@ AdminLTE/
     ├── All the customized plugins CSS and JS files</code></pre>
           </section>
           <section id="dependencies">
-            <h2 class="page-header"><span>Dependencies</span></h2>  
-            <p class="lead">AdminLTE depends on two main frameworks. 
+            <h2 class="page-header"><span>Dependencies</span></h2>
+            <p class="lead">AdminLTE depends on two main frameworks.
               The downloadable package contains both of these libraries, so you don't have to manually download them.</p>
-            <ul class="lead"> 
+            <ul class="lead">
               <li><a href="http://getbootstrap.com" target="_blank">Bootstrap 3</a></li>
               <li><a href="http://jquery.com/" target="_blank">jQuery 1.11+</a></li>
             </ul>
@@ -254,8 +256,8 @@ AdminLTE/
             <ul class='lead'>
               <li>Wrapper <code>.wrapper</code></li>
               <li>Main Header <code>.main-header</code></li>
-              <li>Sidebar <code>.left-side</code></li>
-              <li>Content <code>.right-side</code></li>
+              <li>Sidebar <code>.sidebar-wrapper</code></li>
+              <li>Content <code>.content-wrapper</code></li>
             </ul>
             <pre class='prettyprint'>
 &LT;!DOCTYPE html>
@@ -298,7 +300,7 @@ AdminLTE/
       &LT;!-- =============================================== -->
 
       &LT;!-- Left side column. contains the sidebar -->
-      &LT;aside class="left-side">
+      &LT;aside class="main-sidebar">
         &LT;!-- sidebar: style can be found in sidebar.less -->
         &LT;section class="sidebar">
           &LT;!-- sidebar menu: : style can be found in sidebar.less -->
@@ -342,14 +344,26 @@ AdminLTE/
           </section>
           <section id='components'>
             <h2 class='page-header'><span>Components</span></h2>
+            <p class="lead">Content</p>
           </section>
           <section id='browsers'>
             <h2 class='page-header'><span>Browser Support</span></h2>
-            <p>Text will go here</p>
+            <p class="lead">AdminLTE supports the following browsers:</p>
+            <ul>
+              <li>IE9+</li>
+              <li>FireFox (latest)</li>
+              <li>Safari (latest)</li>
+              <li>Chrome (latest)</li>
+              <li>Opera (latest)</li>
+            </ul>
           </section>
-          <section id='browsers'>
+          <section id='upgrade'>
+            <h2 class='page-header'><span>Upgrade Guide</span></h2>
+            <p class="lead">Content</p>
+          </section>
+          <section id='faq'>
             <h2 class='page-header'><span>FAQ</span></h2>
-            <p>Text will go here</p>
+            <p class="lead">Content</p>
           </section>
           <div class='box'>
             <div class='box-header with-border'>
@@ -369,9 +383,6 @@ AdminLTE/
 
     </div><!-- ./wrapper -->
 
-    <!-- Pace 1.0.0 --
-    <script src="js/plugins/pace/pace.js" type="text/javascript"></script-->
-
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script>
 
@@ -381,9 +392,19 @@ AdminLTE/
     <script src="../plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
     <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
     <script src="//use.typekit.net/yvy0plb.js"></script>
-    <script>try {
+    <script>
+      try {
         Typekit.load();
       } catch (e) {
-      }</script>
+      }
+    </script>
+    <script>
+      $(function(){
+        $(".sidebar-menu li a").click(function(){
+          $(this).parents("ul").find(".active").removeClass("active");
+          $(this).parent('li').addClass('active');
+        });
+      });
+    </script>
   </body>
-</html>
+</html>

index.html

@@ -277,7 +277,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

index2.html

@@ -270,7 +270,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/UI/buttons.html

@@ -268,7 +268,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/UI/general.html

@@ -285,7 +285,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/UI/icons.html

@@ -314,7 +314,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/UI/modals.html

@@ -282,7 +282,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/UI/sliders.html

@@ -274,7 +274,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/UI/timeline.html

@@ -268,7 +268,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/calendar.html

@@ -271,7 +271,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/charts/flot.html

@@ -268,7 +268,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/charts/inline.html

@@ -268,7 +268,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/charts/morris.html

@@ -270,7 +270,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/examples/404.html

@@ -268,7 +268,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/examples/500.html

@@ -268,7 +268,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/examples/blank.html

@@ -164,7 +164,7 @@
       <!-- =============================================== -->
 
       <!-- Left side column. contains the sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/examples/invoice.html

@@ -268,7 +268,7 @@
         </nav>
       </header>        
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/forms/advanced.html

@@ -278,7 +278,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/forms/editors.html

@@ -270,7 +270,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/forms/general.html

@@ -268,7 +268,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/mailbox.html

@@ -272,7 +272,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/tables/data.html

@@ -270,7 +270,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/tables/simple.html

@@ -268,7 +268,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->

pages/widgets.html

@@ -268,7 +268,7 @@
         </nav>
       </header>
       <!-- Left side column. contains the logo and sidebar -->
-      <aside class="left-side">
+      <aside class="main-sidebar">
         <!-- sidebar: style can be found in sidebar.less -->
         <section class="sidebar">
           <!-- Sidebar user panel -->