Можно оформить, например, так:
ul.categories {
list-style-type: none;
}
ul.categories .cat-item {
font: 15px Arial;
background-color: #36393e;
padding: 4px 0 0 8px;
margin: 0 4px;
float: left;
width: 240px;
height: 23px;
}
ul.categories .cat-item a {
color: white;
}
Код вывода самого списка:
<ul class="categories">
<?php wp_list_categories('title_li='); ?>
</ul>
<br style="clear: both" />
Что касается закругления углов — есть около 25 способов это сделать 🙂
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
Не получается, как сделать вызов категорий в строчку?
<div id="categories">
<ul><?php wp_list_categories('style=none'); ?></ul>
</div>
пробовал как в примере выше, не получилось.
Модератор
Юрий
(@yube)
Доки читали?
none generates no special display method (the list items are separated by <br /> tags)
Вывод списков «в строку» — стандартный прием, выполняемый через CSS с использованием li {display: inline;}
Читал я документацию. Просто не разобрался.
Сделал вот так:
<li>
<?php wp_list_categories('depth=-1&title_li=','|'); ?>
</li>
Не могу разделитель поставить, подскажете как?
Можно использовать атрибуты границы. Добавьте в style.css:
.cat-item {
border-left: 1px solid black;
}
.cat-item a {
padding-left: 5px;
}
Чтобы разделителя не было перед первым пунктом, нужно посмотреть ID рубрики (например, 7) и добавить ниже отдельно:
.cat-item-7 {
border-left: 0;
}
