title: Add Dynamic Sidebar to Exisiting WordPress Theme
body: <p>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.</p>
  
  <p>style.css</p>
  
  <pre><code>/*-- 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;
  }
  </code></pre>
  
  <p>sidebar.php</p>
  
  <pre><code>&lt;div id="sidebar"&gt;
    &lt;div id="sidebar-top"&gt;
      &lt;ul id="top-sidebarwidgets"&gt;
        &lt;?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar('Sidebar_top') ) : else : ?&gt;
        &lt;?php endif; ?&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div style="clear:both;"&gt;&lt;/div&gt;
    &lt;div id="sidebar-left"&gt;
      &lt;ul id="l_sidebarwidgets"&gt;
        &lt;?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar('Sidebar_left') ) : else : ?&gt;
        &lt;?php endif; ?&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="sidebar-right"&gt;
      &lt;ul id="r_sidebarwidgets"&gt;
        &lt;?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar('Sidebar_right') ) : else : ?&gt;
        &lt;?php endif; ?&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="sidebar-bottom"&gt;
      &lt;ul id="bottom-sidebarwidgets"&gt;
        &lt;?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar('Sidebar_bottom') ) : else : ?&gt;
        &lt;?php endif; ?&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With the following code, my sidebars display like this - i.imgur.com/omMfa.png</p>
  
  <p>But if I change the sidebar.php code to this</p>
  
  <pre><code>&lt;div id="sidebar"&gt;
        &lt;div id="sidebar-top"&gt;
          &lt;ul id="top-sidebarwidgets"&gt;
            &lt;?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar('Sidebar_top') ) : else : ?&gt;
            &lt;?php endif; ?&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div style="clear:both;"&gt;&lt;/div&gt;
        &lt;div id="sidebar-bottom"&gt;
          &lt;ul id="bottom-sidebarwidgets"&gt;
            &lt;?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar('Sidebar_bottom') ) : else : ?&gt;
            &lt;?php endif; ?&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id="sidebar-left"&gt;
          &lt;ul id="l_sidebarwidgets"&gt;
            &lt;?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar('Sidebar_left') ) : else : ?&gt;
            &lt;?php endif; ?&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id="sidebar-right"&gt;
          &lt;ul id="r_sidebarwidgets"&gt;
            &lt;?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar('Sidebar_right') ) : else : ?&gt;
            &lt;?php endif; ?&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Then the sidebar will display like this - i.imgur.com/UATs6.png</p>
  
  <p>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 <a href="http://www.itsdaniel0.com" rel="nofollow">http://www.itsdaniel0.com</a></p>