v2.1.1

Author: onokumus

README.md

@@ -31,6 +31,13 @@ http://demo.onokumus.com/metis/
 (not development)
 http://demo.onokumus.com/metis/v12
 
+### Release History
+
+ * 2013-10-23   v2.1.1 Adds `bgimage.html` and `bgcolor.html` option.
+ * 2013 [02-15, 10-22] v1.0 - v2.1 I don't remember. Whatever I did.
+ * 2013-02-14   v1.0   First Commit.
+
+
 
 ### Licensing
 

dist/403.html

@@ -36,7 +36,7 @@ <h1>403</h1>
                     <div class="input-group">
 		      <input type="text" placeholder="search ..." class="form-control">
 		      <span class="input-group-btn">
-			<button class="btn btn-default" type="button"><i class="icon-search"></i></button>
+			<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
 		      </span>
 		    </div>
 

dist/404.html

@@ -36,7 +36,7 @@ <h1>404</h1>
                     <div class="input-group">
 		      <input type="text" placeholder="search ..." class="form-control">
 		      <span class="input-group-btn">
-			<button class="btn btn-default" type="button"><i class="icon-search"></i></button>
+			<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
 		      </span>
 		    </div>
 

dist/405.html

@@ -36,7 +36,7 @@ <h1>405</h1>
                     <div class="input-group">
 		      <input type="text" placeholder="search ..." class="form-control">
 		      <span class="input-group-btn">
-			<button class="btn btn-default" type="button"><i class="icon-search"></i></button>
+			<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
 		      </span>
 		    </div>
 

dist/500.html

@@ -36,7 +36,7 @@ <h1>500</h1>
                     <div class="input-group">
 		      <input type="text" placeholder="search ..." class="form-control">
 		      <span class="input-group-btn">
-			<button class="btn btn-default" type="button"><i class="icon-search"></i></button>
+			<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
 		      </span>
 		    </div>
 

dist/503.html

@@ -36,7 +36,7 @@ <h1>503</h1>
                     <div class="input-group">
 		      <input type="text" placeholder="search ..." class="form-control">
 		      <span class="input-group-btn">
-			<button class="btn btn-default" type="button"><i class="icon-search"></i></button>
+			<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
 		      </span>
 		    </div>
 

dist/alterne.html

@@ -55,30 +55,30 @@
         <div class="btn-toolbar">
             <div class="btn-group">
                 <a data-placement="bottom" data-original-title="Show / Hide Sidebar" data-toggle="tooltip" class="btn btn-success btn-sm" id="changeSidebarPos">
-                    <i class="icon-resize-horizontal"></i>
+                    <i class="fa fa-resize-horizontal"></i>
                 </a>
             </div>
             <div class="btn-group">
                 <a data-placement="bottom" data-original-title="E-mail" data-toggle="tooltip" class="btn btn-default btn-sm">
-                    <i class="icon-envelope"></i>
+                    <i class="fa fa-envelope"></i>
                     <span class="label label-warning">5</span>
                 </a>
                 <a data-placement="bottom" data-original-title="Messages" href="#" data-toggle="tooltip" class="btn btn-default btn-sm">
-                    <i class="icon-comments"></i>
+                    <i class="fa fa-comments"></i>
                     <span class="label label-danger">4</span>
                 </a>
             </div>
             <div class="btn-group">
                 <a data-placement="bottom" data-original-title="Document" href="#" data-toggle="tooltip" class="btn btn-default btn-sm">
-                    <i class="icon-file"></i>
+                    <i class="fa fa-file"></i>
                 </a>
                 <a data-toggle="modal" data-original-title="Help" data-placement="bottom" class="btn btn-default btn-sm" href="#helpModal">
-                    <i class="icon-question-sign"></i>
+                    <i class="fa fa-question"></i>
                 </a>
             </div>
             <div class="btn-group">
                 <a href="login.html" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
-		  <i class="icon-off"></i>
+		  <i class="fa fa-power-off"></i>
                 </a>
             </div>
         </div>
@@ -119,22 +119,22 @@
                 <header class="head">
                     <div class="search-bar">
                         <a data-original-title="Show/Hide Menu" data-placement="bottom" data-tooltip="tooltip" class="accordion-toggle btn btn-primary btn-sm visible-xs" data-toggle="collapse" href="#menu" id="menu-toggle">
-                            <i class="icon-sort"></i>
+                            <i class="fa fa-resize-full"></i>
                         </a>
 
                         <form class="main-search">
                             <div class="input-group">
                                 <input type="text" class="input-small form-control" placeholder="Live Search ...">
                                 <span class="input-group-btn">
-                                    <button class="btn btn-default btn-sm" type="button"><i class="icon-search"></i></button>
+                                    <button class="btn btn-default btn-sm" type="button"><i class="fa fa-search"></i></button>
                                 </span>
                             </div>
                         </form>
 
                     </div>
                     <!-- ."main-bar -->
                     <div class="main-bar">
-                        <h3><i class="icon-dashboard"></i> Dashboard Alterne</h3>
+                        <h3><i class="fa fa-dashboard"></i> Dashboard Alterne</h3>
                     </div>
                     <!-- /.main-bar -->
                 </header>
@@ -156,7 +156,7 @@ <h5 class="media-heading">Archie</h5>
         <ul class="list-unstyled user-info">
             <li><a href="">Administrator</a></li>
             <li>Last Access : <br>
-                <small><i class="icon-calendar"></i> 16 Mar 16:32</small>
+                <small><i class="fa fa-calendar"></i> 16 Mar 16:32</small>
             </li>
         </ul>
     </div>
@@ -167,86 +167,92 @@ <h5 class="media-heading">Archie</h5>
     <li class="nav-divider"></li>
     <li class="panel  active">
         <a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#dashboard-nav">
-            <i class="icon-dashboard"></i> Dashboard
+            <i class="fa fa-dashboard"></i> Dashboard
 	    <span class="pull-right">
-		<i class="icon-angle-left"></i>
+		<i class="fa fa-angle-left"></i>
             </span>
         </a>
         <ul class="collapse in" id="dashboard-nav">
-            <li class=""><a href="dashboard.html"><i class="icon-angle-right"></i>
+            <li class=""><a href="dashboard.html"><i class="fa fa-angle-right"></i>
                 Default Style</a></li>
             <li class="active"><a href="alterne.html"><i
-                    class="icon-angle-right"></i> Alternative Style</a></li>
+                    class="fa fa-angle-right"></i> Alternative Style</a></li>
         </ul>
     </li>
     <li class="panel ">
         <a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#component-nav">
-            <i class="icon-tasks"></i> Components
+            <i class="fa fa-tasks"></i> Components
 	    <span class="pull-right">
-		<i class="icon-angle-left"></i>
+		<i class="fa fa-angle-left"></i>
             </span>
         </a>
         <ul class="collapse" id="component-nav">
-            <li class=""><a href="icon.html"><i class="icon-angle-right"></i> Icon </a>
+            <li class=""><a href="icon.html"><i class="fa fa-angle-right"></i> Icon </a>
             </li>
-            <li class=""><a href="button.html"><i class="icon-angle-right"></i>
+            <li class=""><a href="button.html"><i class="fa fa-angle-right"></i>
                 Button</a></li>
-            <li class=""><a href="progress.html"><i class="icon-angle-right"></i>
+            <li class=""><a href="progress.html"><i class="iconfa fa-angle-right"></i>
                 Progress</a></li>
             <li class=""><a href="pricing.html"><i
-                    class="icon-credit-card"></i> Pricing Table</a></li>
+                    class="fa fa-credit-card"></i> Pricing Table</a></li>
+            <li class="">
+	      <a href="bgimage.html"><i class="fa fa-angle-right"></i> Bg Image</a>
+	    </li>
+	    <li class="">
+	      <a href="bgcolor.html"><i class="fa fa-angle-right"></i> Bg Color</a>
+	    </li>
         </ul>
     </li>
     <li class="panel ">
         <a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle collapsed"
            data-target="#form-nav">
-            <i class="icon-pencil"></i> Forms
+            <i class="fa fa-pencil"></i> Forms
 	    <span class="pull-right">
-		<i class="icon-angle-left"></i>
+		<i class="fa fa-angle-left"></i>
             </span>
         </a>
         <ul class="collapse" id="form-nav">
             <li class=""><a href="form-general.html"><i
-                    class="icon-angle-right"></i> General</a></li>
+                    class="fa fa-angle-right"></i> General</a></li>
             <li class=""><a href="form-validation.html"><i
-                    class="icon-angle-right"></i> Validation</a></li>
+                    class="fa fa-angle-right"></i> Validation</a></li>
             <li class=""><a href="form-wysiwyg.html"><i
-                    class="icon-angle-right"></i> WYSIWYG</a></li>
+                    class="fa fa-angle-right"></i> WYSIWYG</a></li>
             <li class=""><a href="form-wizard.html"><i
-                    class="icon-angle-right"></i> Wizard &amp; File Upload</a></li>
+                    class="fa fa-angle-right"></i> Wizard &amp; File Upload</a></li>
         </ul>
     </li>
-    <li><a href="table.html"><i class="icon-table"></i> Tables</a></li>
-    <li><a href="file.html"><i class="icon-file"></i> File Manager</a>
+    <li><a href="table.html"><i class="fa fa-table"></i> Tables</a></li>
+    <li><a href="file.html"><i class="fa fa-file"></i> File Manager</a>
     </li>
-    <li><a href="typography.html"><i class="icon-font"></i> Typography</a>
+    <li><a href="typography.html"><i class="fa fa-font"></i> Typography</a>
     </li>
-    <li><a href="maps.html"><i class="icon-map-marker"></i> Maps</a></li>
-    <li><a href="chart.html"><i class="icon-bar-chart"></i> Charts</a></li>
-    <li><a href="calendar.html"><i class="icon-calendar"></i>
+    <li><a href="maps.html"><i class="fa fa-map-marker"></i> Maps</a></li>
+    <li><a href="chart.html"><i class="fa fa-bar-chart"></i> Charts</a></li>
+    <li><a href="calendar.html"><i class="fa fa-calendar"></i>
         Calendar</a></li>
     <li class="panel">
         <a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#error-nav">
-            <i class="icon-warning-sign"></i> Error Pages
+            <i class="fa fa-warning-sign"></i> Error Pages
 	    <span class="pull-right">
-		<i class="icon-angle-left"></i>
+		<i class="fa fa-angle-left"></i>
             </span>
         </a>
         <ul class="collapse" id="error-nav">
-            <li><a href="403.html"><i class="icon-angle-right"></i> 403</a></li>
-            <li><a href="404.html"><i class="icon-angle-right"></i> 404</a></li>
-            <li><a href="405.html"><i class="icon-angle-right"></i> 405</a></li>
-            <li><a href="500.html"><i class="icon-angle-right"></i> 500</a></li>
-            <li><a href="503.html"><i class="icon-angle-right"></i> 503</a></li>
-            <li><a href="offline.html"><i class="icon-angle-right"></i> offline</a></li>
-            <li><a href="countdown.html"><i class="icon-angle-right"></i> Under Construction</a></li>
+            <li><a href="403.html"><i class="fa fa-angle-right"></i> 403</a></li>
+            <li><a href="404.html"><i class="fa fa-angle-right"></i> 404</a></li>
+            <li><a href="405.html"><i class="fa fa-angle-right"></i> 405</a></li>
+            <li><a href="500.html"><i class="fa fa-angle-right"></i> 500</a></li>
+            <li><a href="503.html"><i class="fa fa-angle-right"></i> 503</a></li>
+            <li><a href="offline.html"><i class="fa fa-angle-right"></i> offline</a></li>
+            <li><a href="countdown.html"><i class="fa fa-angle-right"></i> Under Construction</a></li>
         </ul>
     </li>
-    <li><a href="grid.html"><i class="icon-columns"></i> Grid</a></li>
-    <li><a href="blank.html"><i class="icon-check-empty"></i> Blank
+    <li><a href="grid.html"><i class="fa fa-columns"></i> Grid</a></li>
+    <li><a href="blank.html"><i class="fa fa-square-o"></i> Blank
         Page</a></li>
     <li class="nav-divider"></li>
-    <li><a href="login.html"><i class="icon-signin"></i> Login Page</a></li>
+    <li><a href="login.html"><i class="fa fa-sign-in"></i> Login Page</a></li>
 </ul>
 <!-- /#menu -->
             </div>
@@ -262,14 +268,14 @@ <h5 class="media-heading">Archie</h5>
 	    <div class="sparkline bar_week"></div>
 	    <div class="stat_text">
 		<strong>2.345</strong>Weekly Visit
-		<span class="percent down"> <i class="icon-caret-down"></i> -16%</span>
+		<span class="percent down"> <i class="fa fa-caret-down"></i> -16%</span>
 	    </div>
 	</li>
 	<li>
 	    <div class="sparkline line_day"></div>
 	    <div class="stat_text">
 		<strong>165</strong>Daily Visit
-		<span class="percent up"> <i class="icon-caret-up"></i> +23%</span>
+		<span class="percent up"> <i class="fa fa-caret-up"></i> +23%</span>
 	    </div>
 	</li>
 	<li>
@@ -283,7 +289,7 @@ <h5 class="media-heading">Archie</h5>
 	    <div class="sparkline stacked_month"></div>
 	    <div class="stat_text">
 		<strong>$678.00</strong>Monthly Sale
-		<span class="percent down"> <i class="icon-caret-down"></i> -10%</span>
+		<span class="percent down"> <i class="fa fa-caret-down"></i> -10%</span>
 	    </div>
 	</li>
     </ul>
@@ -292,41 +298,41 @@ <h5 class="media-heading">Archie</h5>
 <div class="text-center">
 
     <a class="quick-btn" href="#">
-	<i class="icon-bolt icon-2x"></i>
+	<i class="fa fa-bolt fa-2x"></i>
 	<span>default</span>
 	<span class="label label-default">2</span>
     </a>
     <a class="quick-btn" href="#">
-	<i class="icon-check icon-2x"></i>
+	<i class="fa fa-check fa-2x"></i>
 	<span>danger</span>
 	<span class="label label-danger">2</span>
     </a>
     <a class="quick-btn" href="#">
-	<i class="icon-building icon-2x"></i>
+	<i class="fa fa-building fa-2x"></i>
 	<span>No Label</span>
     </a>
     <a class="quick-btn" href="#">
-	<i class="icon-envelope icon-2x"></i>
+	<i class="fa fa-envelope fa-2x"></i>
 	<span>success</span>
 	<span class="label label-success">-456</span>
     </a>
     <a class="quick-btn" href="#">
-	<i class="icon-signal icon-2x"></i>
+	<i class="fa fa-signal fa-2x"></i>
 	<span>warning</span>
 	<span class="label label-warning">+25</span>
     </a>
     <a class="quick-btn" href="#">
-	<i class="icon-external-link icon-2x"></i>
+	<i class="fa fa-external-link fa-2x"></i>
 	<span>π</span>
 	<span class="label btn-metis-2">3.14159265</span>
     </a>
     <a class="quick-btn" href="#">
-	<i class="icon-lemon icon-2x"></i>
+	<i class="fa fa-lemon-o fa-2x"></i>
 	<span>é</span>
 	<span class="label btn-metis-4">2.71828</span>
     </a>
     <a class="quick-btn" href="#">
-	<i class="icon-glass icon-2x"></i>
+	<i class="fa fa-glass fa-2x"></i>
 	<span>φ</span>
 	<span class="label btn-metis-3">1.618</span>
     </a>

dist/assets/css/main.css

@@ -2488,7 +2488,7 @@ fieldset[disabled] .btn-line.btn-metis-6.active {
 }
 .bg-light {
   background-color: #eeeeee;
-  color: #ffffff;
+  color: #333333;
 }
 .bg-light.dker,
 .bg-light .dker {
@@ -2579,17 +2579,17 @@ fieldset[disabled] .btn-line.btn-metis-6.active {
   background: url("../img/pattern/carbon_fibre.png") repeat;
 }
 /* BEGIN ERROR PAGES STYLES */
-.error {
+body.error {
   padding-top: 40px;
   background: url("../img/pattern/always_grey.png") repeat rgba(68, 68, 68, 0.9);
 }
-.error .logo h1 {
+body.error .logo h1 {
   color: #FFFFFF;
   font-size: 100px;
   text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
 }
 @media (max-width: 767px) {
-  .error .logo h1 {
+  body.error .logo h1 {
     font-size: 60px;
   }
 }

dist/assets/js/main.js

@@ -118,7 +118,7 @@ function metisChart() {
         heart.push([16 * Math.pow(Math.sin(i), 3), 13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i)]);
     }
     $.plot($("#heart"), [
-        {data: heart, label: '<i class="icon-heart icon-2x"></i>', color: '#9A004D'}
+        {data: heart, label: '<i class="fa fa-heart fa-2x"></i>', color: '#9A004D'}
     ], {
         series: {
             lines: {show: true, fill: true},