Hiding the Twenty Sixteen border
Claire Brotherton over at A Bright Clear Web put together a Twenty Sixteen child theme earlier this year which includes some code to hide the border. I think it’s a worthwhile feature, and I incorporated the idea into my own child theme. Just like before, I started by adding the setting and control, this time to the existing background_image section:
// add setting for border toggle
$wp_customize->add_setting( 'border_display', array(
'section' => 'background_image',
'default' => 0, // unchecked
'sanitize_callback' => 'sanitize_checkbox'
) );
// add checkbox control for border toggle
$wp_customize->add_control( 'border_display', array(
'label' => __( 'Hide border', 'vanangeles' ),
'description' => 'Note that when the border is hidden, any background set will no longer appear.',
'section' => 'background_image',
'priority' => 5,
'type' => 'checkbox',
'sanitize_callback' => 'sanitize_checkbox'
) ); Now the styles can be applied. Since neither of them is a native customizer control, in order to apply the styles for the border display and for the header alignment (see Site Branding), I created a function to check whether or not the border is to be displayed and whether the header elements alignment is inline or centered. If the border is hidden, the style is applied; otherwise, the default style (visible) is used. Similarly, if the the header elements are to be centered, the style is applied; otherwise, the default inline style is used:
function va_dynamic_styles($custom) {
$custom = '';
$custom .= "<style type=\"text/css\">" . "\n";
//__Remove menu border__//
if ( get_theme_mod( 'border_display' ) == 1 ) {
$custom .= "body:not(.custom-background-image):before," . "\n" . "body:not(.custom-background-image):after { height: 0px;}"."\n";
$custom .= ".site-footer .site-title:after { content: \"\"; }"."\n";
$custom .= "#footwrapper { border: none;}"."\n";
$custom .= "@media screen and (min-width: 44.375em) {" . "\n" . " .site { margin: 0px;}" . "\n" . "}"."\n";
}
//__Menu style__//
$menu_style = get_theme_mod('menu_style','inline');
if ($menu_style == 'centered') {
$custom .= ".site-header { padding: 0;}"."\n";
$custom .= ".site-branding { width: 100%; text-align: center; margin-bottom: 0;}"."\n";
$custom .= ".site-description { margin-top: 0; padding-top: 0;}"."\n";
$custom .= "#site-header-menu { margin: 0 auto; margin-top: 30px; margin-top: 1.875rem;}"."\n";
$custom .= "#menu-toggle { margin: 0 auto; margin-top: 10px; margin-top: 0.625rem; margin-bottom: 10px; margin-bottom: 0.625rem}"."\n";
}
$custom .= "</style>" . "\n";
echo $custom;
}
add_action( 'wp_head', 'va_dynamic_styles' );
