Не дается плиточный шаблон, нужна помощь.

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X
#1 26 апреля 2020 в 01:45
Пытаюсь решить задачу, перенастройки плиточного шаблона для контента /templates/default/content/default_list_tiles.tpl.php
По умолчанию он настроен по Три изображения в ряд, а задача настроить на Четыре в ряд. Мучаюсь уже несколько дней, перепробовал разное, но если удается установить 4-ре плашки в ряд, то во втором ряду уже ломает строй.
Все чего удалось достичь… красиво становится в 3 ряда и куча свободного места… Шаблон упрямо считает только до 3-х. Где это ограничение?
Помогите перестроить шаб...
  1. .content_list.tiled { margin: 0 auto; }
  2.  
  3. .content_list.tiled .clear { clear:both; }
  4.  
  5. .content_list.tiled .tile { width:25%; float:left; margin-bottom: 0px; padding-right: 2px; box-sizing: border-box; clear: none; }
  6. .content_list.tiled .tile:nth-child(3) { padding-right: 0; }
  7.  
  8. .content_list.tiled .tile .photo {
  9. display: block;
  10. width:96%;
  11. height:300px;
  12. overflow:hidden;
  13. margin-bottom: 10px;
  14. position:relative;
  15. background-color: #bdc3c7;
  16. background-size: cover;
  17. background-repeat: no-repeat;
  18. background-position: center 0;
  19. }
  20. .content_list.tiled .tile .photo .note{
  21. position: absolute;
  22. padding:3px 6px;
  23. background:rgba(0,0,0,0.75);
  24. color:#FFF;
  25. font-size:12px;
  26. left:0;
  27. bottom:0;
  28. z-index: 1;
  29. }
  30. .content_list.tiled .tile .photo a > img {
  31. display: none;
  32. }
  33. .content_list.tiled .tile .photo a {
  34. position: absolute;
  35. top: 0;
  36. left: 0;
  37. width: 100%;
  38. height: 100%;
  39. }
  40. .content_list.tiled .tile .photo .note span { color:#f1c40f; }
  41.  
  42. .content_list.tiled .tile .ft_caption, .content_list.tiled .tile .ft_caption h2 {
  43. font-size: 16px; margin: 0; width: 96%;
  44. }
  45. .content_list.tiled .tile .ft_caption .value { color: #2c3e50; font-weight: bold; }
  46. .content_list.tiled .tile .ft_caption a { color: inherit; text-decoration: none; }
  47. .content_list.tiled .tile .ft_caption a:hover { text-decoration: underline; }
  48. .content_list.tiled .tile .ft_caption a.parent_title{ font-size:14px; font-weight: normal; color:#7f8c8d; }
  49.  
  50. .content_list.tiled .tile .field { margin-bottom: 10px; width: 90%;}
  51.  
  52. .content_list.tiled .info_bar { font-size: 12px; color: #7f8c8d; opacity: 0; transition: all 0.5s ease; }
  53. .content_list.tiled .tile:hover .info_bar { opacity: 1; }
  54. .content_list.tiled .info_bar .bar_item { float:left; margin-right: 5px; height:18px; line-height: 18px; }
  55. .content_list.tiled .info_bar .bar_item:last-child { margin-right: 0; }
  56. .content_list.tiled .info_bar .bi_comments{
  57. padding-left:25px;
  58. background: url("../images/icons/comment-small.png") no-repeat 5px center;
  59. }
  60.  
  61. .content_list.tiled .info_bar .bi_not_approved{
  62. color:#BF0000;
  63. }
  64.  
  65. .content_list.tiled .tags_bar {
  66. margin:10px 0;
  67. overflow: hidden;
  68. font-size: 12px;
  69. padding-left:20px;
  70. background:url("../images/icons/tag.png") no-repeat left center;
  71. height:18px;
  72. line-height:18px;
  73. }
  74.  
  75. .content_list.tiled .tags_bar a {
  76. color:#BDC3C7;
  77. }
  78.  
  79. .content_list.tiled .tags_bar a:hover {
  80. color:#d35400;
  81. }
  82. .content_list.tiled .info_bar .bi_date_pub{
  83. padding-left:25px;
  84. background: url("../images/icons/calendar-small.svg") no-repeat 5px center;
  85. }
#2 26 апреля 2020 в 02:43
Вы же сами написали путь до файла где смотреть), осталось только править вот это
  1. $columns = 3;
Ну если конечно в css все верно для 4 колонок.
#3 26 апреля 2020 в 03:25


Вы же сами написали путь до файла где смотреть), осталось только править вот это

  1. $columns = 3;
Ну если конечно в css все верно для 4 колонок.

Dezerit
Отлично! Это то что надо! Спасибо! Все встало как вкопанное smile
#4 27 апреля 2020 в 21:39
Пора подводить итог.
Для тех кто не в курсе, мой пример CSS настройки дизайна вывода контента Плашками в ряд взят здесь /templates/default/css/theme-content.css. В этом файле находятся настройки и для других шаблонов вывода контента.
Прошу не путать с шаблонами вывода контента в виджетах. Их CSS настройки находятся здесь /www/masterremontov.ru/templates/default/css/theme-widgets.css
Задача решена закрываю тему.
#5 27 апреля 2020 в 23:03
Закрываю.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.