Вывод категорий в 2 и более колонок в ICMS2

2489
Сегодня мне нужно было сделать вывод категорий в 2 колонки. Так сказать не очень юзабилетно смотрится вывод категорий в строку если их много.
Для этого я решил использовать только css.
По скольку у нас вывод категорий идет в маркированном списке то это сделать просто и легко.
Для начала давайте посмотрим как это будет выглядеть.

2 колонки


3 Колонки


И так далее изменяя ширину в % можно менять учитывая ширину шаблона

Начинаем реализацию

1. открываем файл templates/шаблон/controllers/content/category_view.tpl.php строка у меня 126 должен быть код
Код PHP:
  1.  
  2. <ul>
  3. <?php foreach($subcats as $c){ ?>
  4. <li>
  5. <a href="<?php echo href_to($base_url . ($dataset ? '-'.$dataset : ''), $c['slug']); ?>"><?php echo $c['title']; ?></a>
  6. </li>
  7. <?php } ?>
  8. </ul>
  9.  
Здесь ничего сложно делать не будем а просто дадим идентификатор списку то есть тегу ли я дал к примеру
Код HTML:
  1.  
  2. <ul id="twoli">
  3.  
Все идем далее в стили в папку стилей шаблона theme-content.css
И добавляем можно в конец, а вообще стили для категорий начинаются с 29 строки по 59 стиль для ul с id twoli
Код CSS:
  1.  
  2. #twoli li { width:25%;}
  3.  
И немного изменим стили в строке 41 добавим код
Код CSS:
  1.  
  2. .content_categories ul {
  3. width:100%;
  4. overflow:hidden;
  5. }
  6.  
После
Код CSS:
  1.  
  2. .content_categories ul,
  3. .content_categories li { margin:0; padding:0; }
  4.  
Далее строка 42 вот этот код
Код CSS:
  1.  
  2. .content_categories li {
  3. display: inline-block;
  4. height: 32px;
  5. line-height: 32px;
  6. font-size: 18px;
  7. padding-left: 20px;
  8. background: url("../images/icons/folder.png") no-repeat left center;
  9. margin-right: 10px;
  10. }
  11.  
Изменить на
Код CSS:
  1.  
  2. .content_categories li {
  3. float:left;
  4. display:inline;
  5. height: 32px;
  6. line-height: 32px;
  7. font-size: 18px;
  8. padding-left: 20px;
  9. background: url("../images/icons/folder.png") no-repeat left center;
  10. margin-right: 10px;
  11. }
  12.  
Вот как-то так в дефолтном шаблоне работает, если у вас не вывелось 2 колонки то поизменяйте процент в коде
Код CSS:
  1.  
  2. #twoli li { width:25%;}
  3.  
И подгоните под свои нужды.
Вот так вот просто делается вывод категорий в несколько колонок.
Данный пример выведет 4 колонки.
Изменяем стандартный вывод комментарии на свой в 2-ке
Комментарии (12)
nmsk 27 января 2015 в 01:04 +2
Спасибо милый человек. smile Жаль только что функционал инстанта не выводит под категории... эх...
Алексей 27 января 2015 в 12:02 +3
для профи, возможно, это и не открытие, а мне - новичку очень даже пригодится. Спасибо Гуру, списал в свою тетрадь вчистую. dance
а вот вопрос еще подобный: отображение контента "объявления" таблицей - как установить разные по ширине ячейки таблицы в %?
VonKruger 27 января 2015 в 16:46 +1
Хорошо решу ваш вопрос немного позже отпишусь.
Алексей 27 января 2015 в 17:28 0
Ок
Сергей 27 января 2015 в 12:20 0
В нашем деле мелочей нет, но всё решают мелочи, как то так по моему. Огромное спасибо за пост и Ваш блог dance
Glaz 27 января 2015 в 14:42 +1
Большое спасибо! Очень нужно. и конечно +
jorgovich 28 января 2015 в 10:24 +1
Это неплохая идея упорядочить список категорий но вообще - Нужен механизм добавления изображений к категориям (не бэкграунда в виде замены папочек на картинку, а добавление полноценных изображений) - это было бы интересней.
VonKruger 28 января 2015 в 12:09 0
Это можно сделать просто добавить в таблицу с категориями поле с ссылкой на иконку категории и затем вывести ее в списке, можно и где только нужно, а где нет стандартные.
Таблица с категориями сонтента cms_con_имя контента_cats добавить поле в базу Varchar символов так на 50 хватит и записать ссылку на картинку.
А в месте вывода категорий добавить вывод поля картинки и прописать стиль для вывода.
Это конечно в кратце, и для тех кто понимает php программирование в связке с mysql
jorgovich 29 января 2015 в 12:50 0
Вот вам тема для следующего блога joke
Спасибо за труды!
Mademaster 22 марта 2015 в 22:53 0
А можно ли вывести список категорий вот в таком виде??

http://joxi.ru/4DmBMddU53V5rP
Анатолий 26 июня 2015 в 05:16 0
""

jQuery (has по урлу + CSS)
DEKS 2 января 2018 в 17:01 0
А как можно сделать 2 -4 колонки категорий в виджете?
Сейчас добавил виджет "Категории" из группы "Контент" и прописал во вкладке "Дизайн" в поле "Класс CSS для тела" - columns-2. Но все равно показывается 1 колонка. Хотя этот вариант работает для вывода содержания новостей или статей, а вот с категории в 2 колонки не выводит.