Placeholder widgets for theme customizer

added styles, changed wording a bit.
weblab · Feb 17, 2015 · e40e906 · e40e906
1 parent 624bdcc
commit e40e906
Show file tree

Hide file tree

Showing 6 changed files with 533 additions and 1,073 deletions.
diff --git a/css/admin-style.css b/css/admin-style.css
@@ -0,0 +1,183 @@
+/* - - - - - - - - - - - - - - - - - - - 
+	== Admin Style 
+- - - - - - - - - - - - - - - - - - - */
+#wpadminbar {
+  background-color: #000E2F;
+}
+
+#accordion-section-layout_builder {
+  /* Homepage Layout builder */
+}
+#accordion-section-layout_builder .customize-control-hidden * {
+  display: none;
+}
+#accordion-section-layout_builder .sliderDeleteRow {
+  float: right;
+}
+#accordion-section-layout_builder .sliders {
+  padding: 2.5em 0;
+}
+#accordion-section-layout_builder .slider-wrap {
+  float: left;
+  width: 100%;
+  padding: 5px 0;
+  clear: left;
+}
+#accordion-section-layout_builder .slider-wrap a:focus {
+  outline: thin dotted;
+  outline-color: #2ea2cc;
+}
+#accordion-section-layout_builder .slider,
+#accordion-section-layout_builder .sliderAddColumn {
+  float: left;
+}
+#accordion-section-layout_builder .slider {
+  width: 195px;
+  margin-right: 15px;
+}
+#accordion-section-layout_builder .sliderAddColumn {
+  padding: 0px !important;
+  height: auto !important;
+}
+#accordion-section-layout_builder .ui-slider-horizontal {
+  height: 3.5em !important;
+  background-color: #eeeeee !important;
+  background-image: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%) !important;
+  background-size: 20px 50px !important;
+}
+#accordion-section-layout_builder .ui-slider .ui-slider-handle {
+  width: 0.01em !important;
+  height: 3.9em !important;
+  padding: 0 !important;
+}
+#accordion-section-layout_builder .ui-slider .ui-slider-handle:focus {
+  width: 0.05em !important;
+  height: 3.7em !important;
+  border: 1px solid #2ea2cc;
+}
+#accordion-section-layout_builder .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;
+}
+#accordion-section-layout_builder .ui-slider .ui-slider-handle:focus:before {
+  position: relative;
+  top: -24px;
+  left: -12px;
+  background: #2ea2cc;
+}
+#accordion-section-layout_builder .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;
+}
+#accordion-section-layout_builder .ui-slider .ui-slider-handle:focus:after {
+  position: relative;
+  top: -24px;
+  left: -7px;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid #2ea2cc;
+}
+#accordion-section-layout_builder .ui-slider .ui-slider-handle:hover {
+  cursor: -webkit-grab;
+}
+#accordion-section-layout_builder .ui-slider .ui-slider-handle:active {
+  cursor: -webkit-grabbing;
+}
+#accordion-section-layout_builder .ui-slider .ui-slider-handle:focus {
+  background-image: none;
+  background: #2ea2cc !important;
+  width: 2px !important;
+}
+#accordion-section-layout_builder .wp-core-ui .button.sliderDeleteColumn {
+  background: #2ea2cc;
+  border-color: #0074a2;
+  -webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.5), 0 1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.5), 0 1px 0 rgba(0, 0, 0, 0.15);
+  color: #fff;
+}
+#accordion-section-layout_builder .wp-core-ui .button.sliderDeleteColumn .dashicons-minus {
+  padding: 4px;
+}
+#accordion-section-layout_builder .wp-core-ui .button.sliderAddColumn .dashicons-plus {
+  padding: 14px 4px;
+}
+
+#sidebar-manager #home0,
+#sidebar-manager #home1,
+#sidebar-manager #home2,
+#sidebar-manager #home3,
+#sidebar-manager #home4,
+#sidebar-manager #home5,
+#sidebar-manager #home6,
+#sidebar-manager #home7,
+#sidebar-manager #home8,
+#sidebar-manager #home9,
+#sidebar-manager #home10,
+#sidebar-manager #home11,
+#sidebar-manager #home12,
+#sidebar-manager #home13,
+#sidebar-manager #home14,
+#sidebar-manager #home15,
+#sidebar-manager #home16,
+#sidebar-manager #home17,
+#sidebar-manager #home18,
+#sidebar-manager #home19,
+#sidebar-manager #home20,
+#sidebar-manager #home21,
+#sidebar-manager #home22,
+#sidebar-manager #home23,
+#sidebar-manager #home24,
+#sidebar-manager #home25,
+#sidebar-manager #home26,
+#sidebar-manager #home27,
+#sidebar-manager #home28,
+#sidebar-manager #home29,
+#sidebar-manager #home30,
+#sidebar-manager #home31,
+#sidebar-manager #home32,
+#sidebar-manager #home33,
+#sidebar-manager #home34,
+#sidebar-manager #home35,
+#sidebar-manager #home36,
+#sidebar-manager #home37,
+#sidebar-manager #home38,
+#sidebar-manager #home39,
+#sidebar-manager #home40,
+#sidebar-manager #home41,
+#sidebar-manager #home42,
+#sidebar-manager #home43,
+#sidebar-manager #home44,
+#sidebar-manager #home45,
+#sidebar-manager #home46,
+#sidebar-manager #home47,
+#sidebar-manager #home48,
+#sidebar-manager #home49,
+#sidebar-manager #home50,
+#sidebar-manager #home51,
+#sidebar-manager #home52,
+#sidebar-manager #home53,
+#sidebar-manager #home54,
+#sidebar-manager #home55,
+#sidebar-manager #home56,
+#sidebar-manager #home57,
+#sidebar-manager #home58,
+#sidebar-manager #home59,
+#sidebar-manager #home60 {
+  display: none;
+}
diff --git a/css/widgets.css b/css/widgets.css
@@ -1,3 +1,17 @@
 /* - - - - - - - - - - - - - - - - - - - 
 	== Widgets 
 - - - - - - - - - - - - - - - - - - - */
+.widget-placeholder {
+  padding: 2em !important;
+  border: 4px dashed #ccc !important;
+  color: #696969 !important;
+}
+.widget-placeholder * {
+  color: #696969 !important;
+  font-size: 1em !important;
+  margin: auto !important;
+}
+.widget-placeholder h3 {
+  margin-bottom: 1em !important;
+  color: #474747 !important;
+}
diff --git a/page-home.php b/page-home.php
@@ -1,47 +1,47 @@
-<?php
-/**
-Template Name: Home
-
- * The template for displaying the homepage.
- *
- * @package cornerstone
- */
-$rows = get_theme_mod('homepagerows', '2');
-$count = 1;
-get_header();
-?>
-
-<div id="page-home">
-	<?php while ( have_posts() ) : the_post(); ?>
-	<?php for($i=0; $i<$rows; $i++){ /* Begin Homepage Builder... */?>
-	<div class="row">
-		<?php 
-			$widths = get_theme_mod('homepage_'.$i, '12');
-			$widths = explode(',',$widths);
-			if(count($widths) == 1) $widths[0] = 12;
-			foreach($widths as $width){
-			if($width == 0) break; 
-		?>
-		<div class="col-sm-<?php echo $width; ?>">
-			<div class="home-section" id="home-section-<?php echo $count; ?>">
-				<?php if ( is_active_sidebar( 'home'.$count ) ) {
-					dynamic_sidebar( 'home'.$count );
-				} elseif(isset( $wp_customize )) {
-					?>
-                    <div class="widget">
-                    	<h3>Home <?php echo $count; ?></h3>
-                    	We're in the customizer, this widget area is empty.
-                    </div>
-                    <?php
-				} else {
-
-				}?>
-			</div>
-		</div>
-		<?php $count ++; } ?>
-	</div>
-	<!-- /row-->
-	<?php  } /* ... end Homepage Builder */?>
-	<?php endwhile; // end of the loop. ?>
-</div>
-<?php get_footer(); ?>
+<?php
+/**
+Template Name: Home
+
+ * The template for displaying the homepage.
+ *
+ * @package cornerstone
+ */
+$rows = get_theme_mod('homepagerows', '2');
+$count = 1;
+get_header();
+?>
+
+<div id="page-home">
+	<?php while ( have_posts() ) : the_post(); ?>
+	<?php for($i=0; $i<$rows; $i++){ /* Begin Homepage Builder... */?>
+	<div class="row">
+		<?php 
+			$widths = get_theme_mod('homepage_'.$i, '12');
+			$widths = explode(',',$widths);
+			if(count($widths) == 1) $widths[0] = 12;
+			foreach($widths as $width){
+			if($width == 0) break; 
+		?>
+		<div class="col-sm-<?php echo $width; ?>">
+			<div class="home-section" id="home-section-<?php echo $count; ?>">
+				<?php if ( is_active_sidebar( 'home'.$count ) ) {
+					dynamic_sidebar( 'home'.$count );
+				} elseif(isset( $wp_customize )) {
+					?>
+                    <div class="widget widget-placeholder">
+                    	<h3>Home <?php echo $count; ?></h3>
+                    	<p>This is a placeholder and will not be visible to tbe public. Add content to this section with the "Widgets" tool.</p>
+                    </div>
+                    <?php
+				} else {
+
+				}?>
+			</div>
+		</div>
+		<?php $count ++; } ?>
+	</div>
+	<!-- /row-->
+	<?php  } /* ... end Homepage Builder */?>
+	<?php endwhile; // end of the loop. ?>
+</div>
+<?php get_footer(); ?>
diff --git a/sass/admin-style.scss b/sass/admin-style.scss
@@ -189,4 +189,5 @@
 	#home60 {
 		display:none;
 	}
-}
+}
+
diff --git a/sass/widgets.scss b/sass/widgets.scss
@@ -2,6 +2,24 @@
 	== Widgets 
 - - - - - - - - - - - - - - - - - - - */
 
+// Preview widgets for the homepage layout builder. Only visible in Customize view, but needs to be in main SCSS. 
+.widget-placeholder {
+	padding:2em !important;
+	border:4px dashed #ccc !important;
+	color:#696969 !important;
+
+	* {
+		color:#696969 !important;
+		font-size:1em !important;
+		margin:auto !important;
+	}
+
+	h3 {
+		margin-bottom: 1em !important;
+		color: #474747 !important;
+	}
+}
+
 
 // Create a mixin with parent as optional argument. 
 // based on the argument, different variables are referenced.
-Original file line number
+Diff line change
@@ Expand Up / @@ -189,4 +189,5 @@ @@
     	#home60 {
     		display:none;
     	}
-    }
+    }