Поддержка Темы и шаблоны Дизайн списка категорий и прочих

  • Доброго вам всем времени суток, я бы хотел задать вопрос тому кто разбирается в wordpress. Вопрос состоит в том что мне нужно изменить дизайн вывода списка разделов до неузнаваемости,чтобы из этого http://pikucha.ru/60391/rub.jpg получилось аот это http://pikucha.ru/60392/rubnew.jpg. Причем желательно чтобы закругление углов как на втором скриншоте было сделано при помощи css. Если поможете я буду при много благодарен.

Просмотр 6 ответов — с 1 по 6 (всего 6)
  • Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

    Можно оформить, например, так:

    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>

    Не могу разделитель поставить, подскажете как?

    Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

    Можно использовать атрибуты границы. Добавьте в style.css:

    .cat-item {
    	border-left: 1px solid black;
    }
    
    .cat-item a {
    	padding-left: 5px;
    }

    Чтобы разделителя не было перед первым пунктом, нужно посмотреть ID рубрики (например, 7) и добавить ниже отдельно:

    .cat-item-7 {
    	border-left: 0;
    }

    Спасибо! Получилось.

Просмотр 6 ответов — с 1 по 6 (всего 6)
  • Тема «Дизайн списка категорий и прочих» закрыта для новых ответов.