动态侧边栏添加到Exisiting WordPress主题

Question

我使用SoulVision WordPress主题，我想一个底部侧边栏添加到现有的顶部，左侧和右侧的侧边栏，但是，我不能让它顺利进行。任何帮助，将不胜感激。我的编码如下。

的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> 

用下面的代码，我的侧边栏显示这样的 - i.imgur.com/omMfa.png

但如果我改变的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-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> 

然后侧边栏将显示像这样 - i.imgur.com/UATs6.png

因此，在我看来有一个问题，当它添加到现有的下面时，有一个问题。任何帮助将是美好的。该网站可以在现场http://www.itsdaniel0.com

Answer 1

预览你得有出地方的div和UL标签，这将导致布局问题的一些问题。见 [Invalid]Markup Validation of itsdaniel0.com - W3C Markup Validator。在验证报告中向下滚动查看行号和源代码。