Fixed Issues

Fixed Homepage Layout User Interface
Added background and thumbs
Added Dash Icons for plus and minus
Did additional tweak in same area.

admin-style.css

@@ -29,36 +29,60 @@
 			margin-right:15px;
 			}
 		.sliderAddColumn {
-			padding:1em 5px!important;
+			padding:0px!important;
 			height:auto!important;
 			}
 
 		.ui-slider-horizontal {
 			height: 3.5em!important;
+			background-color: #eeeeee!important;
+			background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%)!important;
+			background-size: 20px 50px!important;
 			}
 		.ui-slider .ui-slider-handle {
 			width: .02em!important;
 			height: 3.9em!important;
 			padding:0!important;
 			border: 2px dotted #2ea2cc;
 			}
-			.ui-slider .ui-slider-handle:before{
-			content: "";
-			display:block;
-			position: relative;
-			top: -23px;
-			left: -13px;
-			width: 20px;
-			height: 20px;
-			margin-left: 3px;
-			border-radius: 50% 50% 50% 0;
-			transform: rotate(45deg) ;
-			-webkit-transform: rotate(-45deg) ;
-			-moz-transform: rotate(-45deg) ;
-			-o-transform: rotate(-45deg) ;
-			-ms-transform: rotate(-45deg) ;
-			background: #2ea2cc;	
-			}
+			.ui-slider .ui-slider-handle:focus {
+				width: .05em!important;
+				height: 3.7em!important;
+				border: 2px solid #2ea2cc;
+				}
+				.ui-slider .ui-slider-handle:before{
+					content: "";
+					display:block;
+					position: relative;
+					top: -24px;
+					left: -13px;
+					width: 20px;
+					height: 20px;
+					margin-left: 3px;
+					border-radius: 3px;	
+					background: grey;
+					}
+					.ui-slider .ui-slider-handle:focus:before{
+						background: #2ea2cc;	
+					}
+				.ui-slider .ui-slider-handle:after{
+					content: "";
+					display:block;
+					position: relative;
+					top: -24px;
+					left: -8px;
+					width: 0; 
+					height: 0; 
+					border-left: 8px solid transparent;
+					border-right: 8px solid transparent;
+					border-top: 8px solid grey;
+					}
+					.ui-slider .ui-slider-handle:focus:after{
+						border-left: 8px solid transparent;
+						border-right: 8px solid transparent;
+						border-top: 8px solid #2ea2cc;
+					}
+
 			.ui-slider .ui-slider-handle:hover {
 				cursor:-webkit-grab;
 				}
@@ -76,4 +100,14 @@
 		-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15);
 		box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15);
 		color: #fff;
-		}
+		}
+		.wp-core-ui .button.sliderDeleteColumn .dashicons-minus {
+			padding:4px;
+		}
+		 .wp-core-ui .button.sliderAddColumn .dashicons-plus{
+		 	padding: 14px 4px;
+		 }
+
+
+
+

inc/customizer.php

@@ -170,7 +170,7 @@ public function render_content()
 		{
 
 			?>
-				<div class="button sliderAddRow" title="Add New Row">+ Row</div><div class="button sliderDeleteRow" title="Remove Last Row">– Row</div><div class="sliders"></div><div class="button sliderDeleteColumn disabled" title="Remove Column Divider">– []</div>
+				<div class="button sliderAddRow" title="Add New Row">+ Row</div><div class="button sliderDeleteRow" title="Remove Last Row">– Row</div><div class="sliders"></div><div class="button sliderDeleteColumn disabled" title="Remove Column Divider"><div class="dashicons dashicons-minus"></div></div>
 			<?php
 		}
 	}

js/layoutbuilder.js

@@ -12,7 +12,7 @@ jQuery(document).ready(function($) {
 
 			} );
 		var addRow = function(i){
-			$('.sliders').append('<div class="slider-wrap"><div class="slider" id="slider'+i+'"></div><div class="button sliderAddColumn" title="Add Column Divider" id="addColumn'+i+'">+[]</div></div>');
+			$('.sliders').append('<div class="slider-wrap"><div class="slider" id="slider'+i+'"></div><div class="button sliderAddColumn" title="Add Column Divider" id="addColumn'+i+'"><div class="dashicons dashicons-plus"></div></div></div>');
 			$('#addColumn'+i).click(function(){
 				addColumnButton(this);
 			});