Skip to content

Commit

Permalink
Placeholder widgets for theme customizer
Browse files Browse the repository at this point in the history 
added styles, changed wording a bit.
  • Loading branch information
andrewmbacon committed Feb 17, 2015
1 parent 624bdcc commit e40e906
Show file tree
Hide file tree
Showing 6 changed files with 533 additions and 1,073 deletions.
183 changes: 183 additions & 0 deletions css/admin-style.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
14 changes: 14 additions & 0 deletions css/widgets.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
94 changes: 47 additions & 47 deletions page-home.php
View file
Original file line number Diff line number Diff line change
@@ -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(); ?>
3 changes: 2 additions & 1 deletion sass/admin-style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,4 +189,5 @@
#home60 {
display:none;
}
}
}

18 changes: 18 additions & 0 deletions sass/widgets.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading

0 comments on commit e40e906

Please sign in to comment.