Найти на сайте

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

+33
3.53K
  2. Блоги
  3. Вывод категорий в 2 и более колонок в ICMS2
Сегодня мне нужно было сделать вывод категорий в 2 колонки. Так сказать не очень юзабилетно смотрится вывод категорий в строку если их много.
Для этого я решил использовать только css.
По скольку у нас вывод категорий идет в маркированном списке то это сделать просто и легко.
Для начала давайте посмотрим как это будет выглядеть.

2 колонки

Иллюстрация

3 Колонки

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

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

1. открываем файл templates/шаблон/controllers/content/category_view.tpl.php строка у меня 126 должен быть код
  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.  
Здесь ничего сложно делать не будем а просто дадим идентификатор списку то есть тегу ли я дал к примеру 
  1.  
  2. <ul id="twoli">

  3.  
Все идем далее в стили в папку стилей шаблона theme-content.css
И добавляем можно в конец, а вообще стили для категорий начинаются с 29 строки по 59 стиль для ul с id twoli
  1.  
  2. #twoli li { width:25%;}
  3.  
И немного изменим стили в строке 41 добавим код
  1.  
  2. .content_categories ul {
  3.     width:100%;
  4.     overflow:hidden;
  5. }
  6.  
После
  1.  
  2. .content_categories ul,
  3. .content_categories li { margin:0; padding:0; }
  4.  
Далее строка 42 вот этот код 
  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.  
Изменить на
  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 колонки то поизменяйте процент в коде
  1.  
  2. #twoli li { width:25%;}
  3.  
И подгоните под свои нужды.
Вот так вот просто делается вывод категорий в несколько колонок.
Данный пример выведет 4 колонки.
Изменяем стандартный вывод комментарии на свой в 2-ке
2колонки3 колонкикатегории
+2
nmsk nmsk 9 лет назад #
Спасибо милый человек. smile Жаль только что функционал инстанта не выводит под категории... эх...
+3
Алексей Алексей 9 лет назад #
для профи, возможно, это и не открытие, а мне - новичку очень даже пригодится. Спасибо Гуру, списал в свою тетрадь вчистую. dance
а вот вопрос еще подобный: отображение контента "объявления" таблицей - как установить разные по ширине ячейки таблицы в %?
+1
VonKruger VonKruger 9 лет назад #
Хорошо решу ваш вопрос немного позже отпишусь.
0
Алексей Алексей 9 лет назад #
Ок
0
Сергей Сергей 9 лет назад #
В нашем деле мелочей нет, но всё решают мелочи, как то так по моему. Огромное спасибо за пост и Ваш блог dance
+1
Glaz Glaz 9 лет назад #
Большое спасибо! Очень нужно. и конечно +
+1
jorgovich jorgovich 9 лет назад #
Это неплохая идея упорядочить список категорий но вообще - Нужен механизм добавления изображений к категориям (не бэкграунда в виде замены папочек на картинку, а добавление полноценных изображений) - это было бы интересней.
0
VonKruger VonKruger 9 лет назад #
Это можно сделать просто добавить в таблицу с категориями поле с ссылкой на иконку категории и затем вывести ее в списке, можно и где только нужно, а где нет стандартные.
Таблица с категориями сонтента cms_con_имя контента_cats добавить поле в базу Varchar символов так на 50 хватит и записать ссылку на картинку.
А в месте вывода категорий добавить вывод поля картинки и прописать стиль для вывода.
Это конечно в кратце, и для тех кто понимает php программирование в связке с mysql
0
jorgovich jorgovich 9 лет назад #
Вот вам тема для следующего блога joke
Спасибо за труды!
0
Mademaster Mademaster 9 лет назад #
А можно ли вывести список категорий вот в таком виде??

http://joxi.ru/4DmBMddU53V5rP
0
Анатолий Анатолий 9 лет назад #
""

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

Еще от автора

Изменяем стандартный вывод комментарии на свой в 2-ке

Изменяем стандартный вывод комментарии на свой в 2-ке

У меня спрашивали отвечаю.
5
Изменяем вывод статистики в меню пользователя

Изменяем вывод статистики в меню пользователя

Посмотрев в меню пользователя во 2-ой ветке меня не устроило вывод статистики. То есть подсчет количества материалов в меню профиля.
9
Компонент KCAPTCHA замена recaptcha

Компонент KCAPTCHA замена recaptcha

Всем доброго времени суток уважаемые. Сегодня хочу поделиться с вами своей наработкой.
19

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.