Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm using the SoulVision WordPress theme, I'm trying to add a bottom sidebar to the already existing Top, Left and Right sidebars, however, I can't get it to successfully work. Any help would be appreciated. My coding is below.

style.css

/*-- Sidebar settings --*/
#sidebar {
    float:right;
    width:400px;
    color:#DEDABF;
    margin-top:0px;
    position:relative;
    font-size:11px;
}
#sidebar a:hover {
    color: #C58556;
    text-decoration: none;
}
#sidebar h2 {
    font-size:14px;
    font-weight:bold;
    border:1px solid #8E6140;
    margin:0;
    padding:3px 0 6px 8px;
    background: url(images/h2-bg.jpg) repeat-x left top;
}
#sidebar ul li strong {
    color:#FC0;
}
#sidebar-top {
    width:390px;
    padding:5px;
}
.sidebar-top-box {
    margin-bottom:10px;
    padding:0;
    border-top: none;
    border-right: 1px solid #8E6140;
    border-bottom: 1px solid #8E6140;
    border-left: 1px solid #8E6140;
}
.box-padding {
    padding:7px;
}
.sidebar-top-box p {
    margin-top:3px;
    margin-bottom:3px;
}
#sidebar-top h2 {
    margin-top:10px;
    color:#CFA97E;
}
#sidebar-top .textwidget {
    margin-bottom:10px;
    padding:7px;
    border-right: 1px solid #A1674F;
    border-bottom: 1px solid #A1674F;
    border-left: 1px solid #A1674F;
}
#sidebar-top ul ul {
    list-style-type:none;
    margin-bottom:10px;
    padding:10px 7px 7px 12px;
    border-right: 1px solid #8E6140;
    border-bottom: 1px solid #8E6140;
    border-left: 1px solid #8E6140;
}
#sidebar-top ul ul li {
    padding-left:10px;
    list-style-type:none;
    background-image:url(images/lidot.gif);
    background-repeat:no-repeat;
    background-position:left top;
    padding-bottom:3px;
}
#sidebar-top ul li a {
    text-decoration:none;
}

#sidebar-top .box-ads a{
    text-decoration:none;
}
#sidebar-left {
    float:left;
    width:215px;
    padding:0 10px 0 5px;
}
#sidebar #sidebar-left h2, #sidebar #sidebar-right h2 {
    margin:15px 0 10px;
    color: #CFA97E;
}
#sidebar-right {
    float:right;
    width:153px;
    padding:0 5px 0 10px;
}
#sidebar-left ul ul, #sidebar-right ul ul {
    padding-left:5px;
}
html, #sidebar ul, #sidebar-wrap ul, .rel-posts ul {
    margin:0;
    padding:0;
}
#sidebar-right li, #sidebar-left li {
    background:url(images/lidot.gif) no-repeat left top;
    list-style:none;
    margin:0;
    padding:0 0 5px 8px;
}
#sidebar-left  .children, #sidebar-right  .children {
    padding-top: 8px;
}
#sidebar-left  ul.children  li, #sidebar-right  ul.children  li {
    padding-bottom: 3px;
    padding-top: 0px;
}
#sidebar   h2  a.rsswidget {
    color: #CFA97E;
    text-decoration: none;
}
#sidebar .rsswidget img {
    float: left;
    margin-top: 2px;
    margin-right: 7px;
}
/*-- Bottom Sidebar --*/
#sidebar-bottom {
    width:390px;
    padding:5px;
}
.sidebar-bottom-box {
    margin-bottom:10px;
    padding:0;
    border-top: none;
    border-right: 1px solid #8E6140;
    border-bottom: 1px solid #8E6140;
    border-left: 1px solid #8E6140;
}
.box-padding {
    padding:7px;
}
.sidebar-bottom-box p {
    margin-top:3px;
    margin-bottom:3px;
}
#sidebar-bottom h2 {
    margin-top:10px;
    color:#CFA97E;
}
#sidebar-bottom .textwidget {
    margin-bottom:10px;
    padding:7px;
    border-right: 1px solid #A1674F;
    border-bottom: 1px solid #A1674F;
    border-left: 1px solid #A1674F;
}
#sidebar-bottom ul ul {
    list-style-type:none;
    margin-bottom:10px;
    padding:10px 7px 7px 12px;
    border-right: 1px solid #8E6140;
    border-bottom: 1px solid #8E6140;
    border-left: 1px solid #8E6140;
}
#sidebar-bottom ul ul li {
    padding-left:10px;
    list-style-type:none;
    background-image:url(images/lidot.gif);
    background-repeat:no-repeat;
    background-position:left top;
    padding-bottom:3px;
}
#sidebar-bottom ul li a {
    text-decoration:none;
}

#sidebar-bottom .box-ads a{
    text-decoration:none;
}

sidebar.php

<div id="sidebar">
  <div id="sidebar-top">
    <ul id="top-sidebarwidgets">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_top') ) : else : ?>
      <?php endif; ?>
    </ul>
  </div>
  <div style="clear:both;"></div>
  <div id="sidebar-left">
    <ul id="l_sidebarwidgets">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_left') ) : else : ?>
      <?php endif; ?>
    </ul>
  </div>
  <div id="sidebar-right">
    <ul id="r_sidebarwidgets">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_right') ) : else : ?>
      <?php endif; ?>
    </ul>
  </div>
  <div id="sidebar-bottom">
    <ul id="bottom-sidebarwidgets">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_bottom') ) : else : ?>
      <?php endif; ?>
    </ul>
  </div>
</div>

With the following code, my sidebars display like this - i.imgur.com/omMfa.png

But if I change the sidebar.php code to this

<div id="sidebar">
      <div id="sidebar-top">
        <ul id="top-sidebarwidgets">
          <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_top') ) : else : ?>
          <?php endif; ?>
        </ul>
      </div>
      <div style="clear:both;"></div>
      <div id="sidebar-bottom">
        <ul id="bottom-sidebarwidgets">
          <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_bottom') ) : else : ?>
          <?php endif; ?>
        </ul>
      </div>
      <div id="sidebar-left">
        <ul id="l_sidebarwidgets">
          <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_left') ) : else : ?>
          <?php endif; ?>
        </ul>
      </div>
      <div id="sidebar-right">
        <ul id="r_sidebarwidgets">
          <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_right') ) : else : ?>
          <?php endif; ?>
        </ul>
      </div>
    </div>

Then the sidebar will display like this - i.imgur.com/UATs6.png

So, it appears to me that there's an issue when adding it below the existing ones. Any help would be wonderful. The site can be previewed live at http://www.itsdaniel0.com

Update

functions.php

// Widget Settings




if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'Sidebar_top',
        'before_widget' => '',
        'after_widget' => '', 
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'Sidebar_left',
        'before_widget' => '', 
        'after_widget' => '', 
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'Sidebar_right',
        'before_widget' => '',
        'after_widget' => '', 
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'Sidebar_bottom',
        'before_widget' => '',
        'after_widget' => '', 
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));

//GsL98DGtpo0W

add_theme_support( 'post-formats', array( 'aside', 'gallery', 'video' ) );

?>
share|improve this question

closed as off topic by kaiser, EAMann Sep 10 '12 at 22:23

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

    
Have you registered these new sidebars in your functions? –  Wyck Mar 19 '11 at 22:32
    
@Wyck I believe so, check the updated code. –  itsdaniel0 Mar 19 '11 at 22:45
    
Add <div style="clear:both;"></div> before your new sidebar –  Bainternet Mar 19 '11 at 23:33
    
@Bainternet Oh my goodness. It worked! Thank you so much. If you place that as an answer I'll mark it correct for you, if you like. –  itsdaniel0 Mar 20 '11 at 8:42
add comment

1 Answer

up vote 0 down vote accepted

For future askers with the same problem, the solution was to add before the new sidebar :

<div style="clear:both;"></div>

To prevent sidebars from overlapping each other.

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.