Sidebar Background Color to Customize

assets/less/style.less

@@ -254,11 +254,22 @@ input#submit {
 
 #page {
 	max-width: 1200px;
-	background: url(../img/sidebar-bg.gif) repeat-y #fff;
 	margin: 0 auto;
+	position: relative;
+
+	&:before {
+		content: "";
+		display: block;
+		position: absolute;
+		height: 100%;
+		width: 300px;
+		background: #333;
+	}
 
 	@media (max-width: @grid-float-breakpoint-max) {
-		background: none;
+		&:before {
+			display: none;
+		}
 
 		> .container {
 			background: #333;
@@ -270,7 +281,7 @@ input#submit {
 
 #masthead {
 	.hgroup {
-		border-bottom: 1px solid #444;
+		border-bottom: 1px solid rgba(255,255,255,.1);
 	}
 
 	.site-title {
@@ -282,7 +293,7 @@ input#submit {
 		text-align: center;
 
 		@media (max-width: @grid-float-breakpoint-max) {
-			border-bottom: 1px solid #444;
+			border-bottom: 1px solid rgba(255,255,255,.1);
 			padding: 15px 0;
 		}
 	}
@@ -316,14 +327,14 @@ input#submit {
 
 #secondary {
 	position: relative;
-	color: @gray-light;
+	color: rgba(255,255,255,.5);
 	padding: 0;
 
 	@media screen and (max-width: @grid-float-breakpoint-max) {
 		background: #333;
 
 		#main-sidebar {
-			border-right: 1px solid #444;
+			border-right: 1px solid rgba(255,255,255,.1);
 		}
 	}
 
@@ -343,7 +354,7 @@ input#submit {
 
 	.widget {
 		padding: 25px;
-		border-bottom: 1px solid #444;
+		border-bottom: 1px solid rgba(255,255,255,.1);
 		font-size: 14px;
 	}
 
@@ -362,7 +373,7 @@ input#submit {
 		margin-top: -41px;
 		width: 40px;
 		height: 40px;
-		border-color: #444;
+		border-color: rgba(255,255,255,.1);
 		border-width: 0 1px 0 0;
 		border-style: solid;
 		color: #fff;
@@ -442,11 +453,11 @@ input#submit {
 	}
 
 	li {
-		border-bottom: 1px solid #444;
+		border-bottom: 1px solid rgba(255,255,255,.1);
 		display: block;
 
 		&.fa:before {
-			border-right: 1px solid #444;
+			border-right: 1px solid rgba(255,255,255,.1);
 			display: block;
 			float: left;
 			height: 40px;
@@ -469,15 +480,15 @@ input#submit {
 
 	a:hover,
 	a:focus {
-		color: #666;
+		color: rgba(255,255,255,.5);
 	}
 
 	.toggle-sidebar {
 		float: left;
 		color: #fff;
 		width: 40px;
 		height: 40px;
-		border-right: 1px solid #444;
+		border-right: 1px solid rgba(255,255,255,.1);
 		outline: none !important;
 	}
 
@@ -503,28 +514,29 @@ input#submit {
 	.sub-menu,
 	.children {
 		display: none;
-		border-top: 1px solid #444;
-		background: #222;
+		border-top: 1px solid rgba(255,255,255,.1);
+		background: rgba(0,0,0,.1);
 
 		li:last-child {
 			border-bottom: none;
 		}
 
 		.sub-menu,
 		.children {
-			background: #111;
+			background: rgba(0,0,0,.3);
+			border-top: none;
 
 			.sub-menu,
 			.children {
-				background: #000;
+				background: rgba(0,0,0,.5);
 			}
 		}
 	}
 
 	.current-menu-item,
 	.current-menu-parent,
 	.current-menu-ancestor {
-		> a { color: #666; }
+		> a { color: rgba(255,255,255,.5) }
 	}
 
 	.current-menu-parent,

inc/customizer.php

@@ -42,6 +42,19 @@ function flat_customize_register( $wp_customize ) {
     'section' => 'title_tagline',
     'settings' => 'flat_theme_options[favicon]',
   )));
+
+  $wp_customize->add_setting('flat_theme_options[sidebar_background_color]', array(
+    'capability' => 'edit_theme_options',
+    'type' => 'option',
+    'default' => '#333',
+  ));
+  $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'sidebar_background_color', array(
+    'label' => __('Sidebar Background Color', 'flat'),
+    'section' => 'colors',
+    'settings' => 'flat_theme_options[sidebar_background_color]',
+  )));
+
+
 }
 add_action( 'customize_register', 'flat_customize_register' );
 
@@ -77,6 +90,17 @@ function flat_favicon() {
 }
 add_action( 'wp_head', 'flat_favicon' );
 
+/**
+ * Change Sidebar Background Color
+ */
+function flat_sidebar_background_color() {
+  $sidebar_background_color = flat_get_theme_option('sidebar_background_color');
+  if( !empty($sidebar_background_color) ) {
+    echo '<style type="text/css">#page:before, .sidebar-offcanvas, #secondary { background-color: '.$sidebar_background_color.'; }</style>';
+  }
+}
+add_action( 'wp_head', 'flat_sidebar_background_color' );
+
 /**
  * Display Logo
  */

readme.txt

@@ -19,7 +19,7 @@ Features list
  - Font Awesome 4.0.3
  - Write on HTML5 / LESS
  - Compatible up to WordPress 3.8.1
- - Customize: Logo, Favicon
+ - Customize: Logo, Favicon, Sidebar Background Color
  - Translation Ready
 
 Resources
@@ -47,6 +47,9 @@ Icon Fonts: Font Awesome
 
 Changelog
 ----
+1.2.7
+* Add: Sidebar Background Color to Customize
+
 1.2.6
 * New: Change content width to 720px
 * Tweak: Re-style table

style.css

@@ -4,7 +4,7 @@ Theme URI: http://www.yoarts.com/wordpress/free-flat-design-wordpress-theme.html
 Author: YoArts
 Author URI: http://www.yoarts.com/
 Description: Flat is a Personal WordPress Theme design & developed by YoArts. We like to say that Flat is both beautiful and charming at the same time.
-Version: 1.2.6
+Version: 1.2.7
 License: GNU General Public License v3 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 Text Domain: flat