Главная Блоги Блог админа

Меняем вид категорий в компоненте "Вопросы и ответы" Instantcms 1.0.4

Опубликовано:
Редактировалось: 1 раз — 1 августа 2021
Просмотров: 2665
0
Голосов: 0
Всем доброго дня. Продолжаем наши исследования Instantcms и сегодня мы в первой ветке попробуем переверстать вид категорий такого компонента, как Вопросы и ответы. Меня всегда раньше напрягало то, что категории этого компонента сделаны в таблице и вывод их мягко говоря в ряд один некрасив. Затем мне пришлось отвлечься от этого компонента, не приходилось применять и вот наступила нужда в нём. Решил взяться за переделку. Для этого нам понадобится два файла, первый это стиль - style.css в котором вид стилей и файл отвечающий за вывод страницы категорий com_faq_view.tpl. Начнем с ком файла, открываем его и заменяем таблицу на дивы. Выходит так

Код PHP:
  1. <div class="con_heading">{$pagetitle}</div>
  2. {if $is_subcats}
  3. 	{if $id>0}
  4. 		<div class="faq_subcats">
  5. 	{else}
  6. 		<div class="faq_cats">
  7. 	{/if}
  8. 		    <ul class="faq_cat_list">
  9. 			{foreach key=tid item=subcat from=$subcats}
  10. 				<li class="faq_cat_item" style="background:url(/images/photos/medium/folder.png) no-repeat left top;">
  11. 						<div class="faq_cat_link"><a href="/faq/{$subcat.id}">{$subcat.title}</a></div>
  12. 						{if $subcat.description}
  13. 							<div class="faq_cat_desc">{$subcat.description}</div>
  14. 						{/if}									
  15. 				</li>
  16. 			{/foreach}
  17. 		   </ul>
  18. 	</div>
  19. {/if}
Теперь после верстки ком файла надо добавить в стиль. Будет такой стиль добавлен

Код PHP:
  1. ul.faq_cat_list {
  2. list-style: none outside none;
  3. margin: 3px 0 1px 0px;
  4. overflow: hidden;
  5. padding: 0 0 0 1px;
  6. clear: both;
  7. }
  8.  
  9. li.faq_cat_item {
  10. font-size: 14pt;
  11. text-decoration: none;
  12. margin: 3px 7px;
  13. line-height: 25px;
  14. height: 56px;
  15. border-bottom: 1px dashed #CCC;
  16. /* text-transform: uppercase; */
  17. /* font-weight: bold; */
  18. float: left;
  19. padding: 1px 5px 2px 23px;
  20. width: 42%;
  21. }
  22.  
  23. .faq_cat_desc {
  24. margin-bottom: 5px;
  25. font-size: 13px;
  26. line-height: 14px;
  27. margin-top: 5px;
  28. font-weight: normal;
  29. font-family: tahoma;
  30. overflow: hidden;
  31. height: 30px;
  32. }
  33. .faq_cat_link {
  34. font-size: 18px;
  35. line-height: 16px;
  36. }
  37.  
Теперь ваши категории вопросы и ответы сделаны в два ряда. При необходимости стилем вы можете догонять до нужного вида.
Комментарии (0)

Нет комментариев. Ваш будет первым!

Добавить комментарий

Голосуем

Самый нужный компонент