Главная » Блог » Оформление виджета событий афиши

Оформление виджета событий афиши
16 сентября 2016

Стандартное оформление виджета вывода контента не совсем подходит для вывода событий афиши, так как не выводит дату событий, не группирует по датам.

Решим эту проблему. И получим такое оформление виджета. 

Или такое, если виджет расположен в колонке пошире

Первый шаг

Уже не нужно, так как шаблон виджета уже есть в компоненте Для этого скопируйте файл из архива в папку /templates/ваш_шаблон/controllers/content/widgets/list/

Второй шаг

Выведите в нужно позиции обычный виджет Список контента компонента Контент. Затем в настройках виджета укажите следующие настройки

Третий шаг

В стиль вашего шаблона, например, для шаблона default в файл /templates/default/css/theme-widgets.css в самый конец файла добавьте строки

.wd_poster .image{height: 150px; overflow: hidden;clear: both;}
.wd_poster .title {clear: both;padding: 5px;}
.wd_poster .image img {max-width: 100%;}
.wd_poster .item {border-bottom: 1px solid #EAEAEA;padding-bottom: 10px;}
.wd_poster .moreinfo .category {float: left;}
.wd_poster .moreinfo .date {float: right;}

Конечно, вы можете поправить их так, как вам нужно.

Готово