Блоками я называю елемент в сайдбаре, в котором содержится заголовок элемента и его содержимое. Например, блогролл – это будет название, скажем, МОИ ССЫЛКИ, и, собственно, выводимые ссылки.
Так вот у меня проблема. В моей теме сайдбар отображается как одна колонка, обтекаемая одним бордюром. Тоесть, все блоки выделены одним квадратом, грубо говоря. А мне надо, чтобы каждый блок был как бы отдельно, т.е. , я снимаю бордер с сайдбара и надеваю его на каждый блок по отдельности.
Думаю использовать этот класс:
ul.box { float:right; width:200px; border:3px solid #DCDCDC; margin:10px 0; padding:10px; } /* нужны ли последние два параметры и как их настоить?*/
Но проблема в том, что заголовок блока и его содержимое – это отдельные списки. То есть, и обтекаться они будут по отдельности…
Как мне все сделать правильно. Куда вставить этот класс? И как настроить отступы между этими блоками?
На всякий случай вот мой СSS:
/*
Theme Name: Limau Orange
Theme URI: http://www.blogohblog.com/
Description: Limau Orange is a 3 columns WordPress theme. I love to hear of my work being used :). This work is licensed under a <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 License</a>. This means you may use it for any purpose, and make any changes you like. Just leave my Bob link under your footer :)
Version: 0.1
Author: Bob
Author URI: http://www.blogohblog.com/
This theme was designed and built by Bob of <a href="http://www.blogohblog.com/">Blog Oh Blog</a> based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
*/
/* background:url(images/image.gif);
background-color:# */
body { font-family:'Verdana'; font-size:10px; background-color:#8B8989; }
#wrap { width:980px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2C1616; margin:0 auto; }
/* параметры заголовков разделов*/
#header { height:56px; width:740px; position:relative; color:#FF0000; margin-bottom:3px; float:left; padding:0; }
#header h1 { text-indent:-10000px; margin:0; padding:0; }
#header h1 a { display:block; background:url(images/headr.gif) no-repeat left top; height:90px; }
#search { margin-top:30px; float:right; padding:0; }
input#searchsubmit { background:#8B8989; border:2px solid #eee; color:#333; font-size:13px; }
/* параметры кнопки поиска */
a:hover { text-decoration:none; color:#555353; border:none;}
.left { float:left; width:200px; margin:10px 0; padding:10px; }
/* параметры бордюра левого блока */
.right { float:right; width:170px; border:3px solid #DCDCDC; margin:10px 0; padding:10px; }
/* параметры бордюра правого блока */
.right img { border:0; display:block; margin-left:auto; margin-right:auto; }
.middle { margin-top:10px; line-height:16px; margin-left:10px; float:left; width:510px; border:3px solid #DCDCDC; overflow:hidden; padding:10px; font-size:11px; background-color:#FFFAFA}
/* параметры бордюра центрального блока */
.middle h2 { font-size:16px; border-bottom:dashed 1px #ccc; margin:0 7px 3px 0; padding:3px 0; }
.middle img { border:4px #eee solid; }
.ads { margin-top:10px; line-height:16px; margin-left:10px; float:left; width:510px; border:3px solid #f3f3f3; text-align:center; padding:10px; }
.ads img { border:0; text-align:center; }
img.wp-smiley { border:0; padding:0; }
#footer { width:980px; margin-top:20px; text-align:center; clear:both; padding:10px; }
div.hr { height:3px; background:#8B8989 url(images/br.gif) repeat-x scroll center; clear:both; }
div.br { height:10px; scroll center; clear:both; }
.alignright { float:right; }
.alignleft { float:left; }
.gcomment { border-left:none; vertical-align:middle; border-right:none; margin-bottom:3px; border-bottom:1px solid #f3f3f3; background-color:#F7F7F7; padding:3px; }
.ucomment { border-left:none; border-right:none; margin-bottom:3px; border-bottom:1px solid #f3f3f3; background-color:#fbfbf1; padding:3px; }
input#submit { background:#fc6; border:2px solid #f93; color:#fff; font-size:13px; }
ol.commentlist { margin:0 0 1px; padding:0; }
ol.commentlist li { list-style:none; margin:0; padding:13px 13px 1px; }
ol.commentlist li.commenthead { list-style:none; margin:0; }
ol.commentlist li.commenthead h2 { margin:0; }
span { background:#FFFFFF; }
.addthis { float:right; clear:both; }
a:link,a:active,a:visited { text-decoration:none; color:#191970; border:none; }
/* параметры линков*/
ul.box { float:right; width:200px; border:3px solid #DCDCDC; margin:10px 0; padding:10px; } /* налаштувати останні два*/
.left h2,.comments h3 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px; padding:3px 0; }
.left ul,.right ul { list-style-type:none; margin:0; padding:0; line-height:150%; font-size:11px; }
.left ul li,.right ul li { list-style-type:none; margin:0 0 20px; padding:0; }
.left ul li ul,.right ul li ul { list-style-type:square; margin:0; padding:0 3px; }
.left ul li ul li,.right ul li ul li { list-style-type:none; background:transparent url(images/bullet.gif) no-repeat 0 4px; border:0; margin:0; padding:0 0 2px 14px; }
.left ul li ul li :hover { border-bottom:#ccc 1px solid;}
/* параметры левого сайдбара*/
.right h2,.comments h3 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px; padding:3px 0; }
.right ul,.right ul { list-style-type:none; margin:0; padding:0; line-height:150%; font-size:11px; }
.right ul li,.right ul li { list-style-type:none; margin:0 0 20px; padding:0; }
.right ul li ul,.right ul li ul { list-style-type:square; margin:0; padding:0 3px; }
.right ul li ul li,.right ul li ul li { list-style-type:none; background:transparent url(images/bullet.gif) no-repeat 0 4px; border:0; margin:0; padding:0 0 2px 14px; }
.right ul li ul li :hover { border-bottom:#ccc 1px solid;}
/* параметры правого сайдбара*/
div.hr hr,div.br br { display:none; }
.middle2,.middle3 { margin-top:10px; line-height:16px; margin-left:10px; float:left; width:237px; border:3px solid #f3f3f3; overflow:hidden; padding:10px; }
.middle2 h2,.middle3 h2 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px 0; padding:3px 0; }
.middle2 :hover,.middle3 :hover { background:#fafafa; }
.ucomment img,.addthis img { border:0; }
И сайдбар.
<div class="left">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>
<?php if ( is_404() || is_category() || is_day() || is_month() ||
is_year() || is_search() || is_paged() ) {
?> <li>
<?php /* If this is a 404 page */ if (is_404()) { ?>
<?php /* If this is a category archive */ } elseif (is_category()) { ?>
<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>
<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives
for the day <?php the_time('l, F jS, Y'); ?>.</p>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives
for <?php the_time('F, Y'); ?>.</p>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives
for the year <?php the_time('Y'); ?>.</p>
<?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
<p>You have searched the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives
for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>
<?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<p>You are currently browsing the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives.</p>
<?php } ?>
</li> <?php }?>
<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>
<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<?php wp_list_bookmarks(); ?>
<li><h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php } ?>
<?php endif; ?>
</ul>
</div>
Будет ли это все работать в виджетах?
Буду очень признателен за помощь….