FAQ Item

« Return to FAQ database

Sidebar Widgets (without a title) break the page layout

To fix this go to Appearance > Editor and open the file dtbaker.widgets.php

scroll to about line 175 where you see this code:

$sidebars['main'] = array(
'name' => __( "Sidebar Column #1", 'sunny_kids' ),
'description' => 'This is the default widget group that can be displayed on the left or right of every page.',
'id' => 'main',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div></div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3><div class="widget-content">',
);


$number = get_option('_dtbaker_theme_optional_widget_count',8);
for($x=2;$x<=$number;$x++){
$sidebars['widget_area-'.$x] = array(
'name' => 'Sidebar Column #'.$x,
'id' => 'widget_area-'.$x,
'description' => 'An empty sidebar for use on any page',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div></div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3><div class="widget-content">',
);
}

change it to this code:

$sidebars['main'] = array(
'name' => __( "Sidebar Column #1", 'sunny_kids' ),
'description' => 'This is the default widget group that can be displayed on the left or right of every page.',
'id' => 'main',
'before_widget' => '<div id="%1$s" class="widget %2$s"><div class="widget-content">',
'after_widget' => '</div></div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
);


$number = get_option('_dtbaker_theme_optional_widget_count',8);
for($x=2;$x<=$number;$x++){
$sidebars['widget_area-'.$x] = array(
'name' => 'Sidebar Column #'.$x,
'id' => 'widget_area-'.$x,
'description' => 'An empty sidebar for use on any page',
'before_widget' => '<div id="%1$s" class="widget %2$s"><div class="widget-content">',
'after_widget' => '</div></div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
);
}

then save the file.

then Go to Appearance > Editor and select style.css - go to about line 430 where you see this code:

.widget-title{
    min-height: 32px;
    line-height: 1.6em;
    font-weight: normal;
    font-size: 16px;
    z-index: 80;
    margin: 0 -15px 0 -15px;
    padding: 8px 0 0 15px;
    text-shadow: 1px 1px #FFFFFF;
}
.widget-content{
    margin-top: 10px;
}

change it to this code


.widget-title{
    min-height: 32px;
    line-height: 1.6em;
    font-weight: normal;
    font-size: 16px;
    z-index: 80;
    margin: 0 -15px 10px -15px;
    padding: 8px 0 0 15px;
    text-shadow: 1px 1px #FFFFFF;
}
.widget-content{
    /*margin-top: 10px;*/
}

clear your browser cache and refresh to see the changes