Всем привет! вот решил написать простой Вид материалов для сайта тематике афиша-билет так как для меня такая тематика не известно я посмотрел в интернете сайты на эту тему что бы понять какая информация выводится в виде материалов и набросал такой вид
специально для удобства всю информацию вывел доп полями так как на каждом сайте она разная и я решил что так будет вернее
Сразу опишу какое поле за что отвечает
$OTHER1$ Для вывода числа даты ( только цифры )
$OTHER2$ Для вывода месяца
$OTHER3$ Для вывода текста Новая сцена ( я не знаю будет оно меняться или нет но всё ровно сделал так что бы вы могли его менять если вам это не нужно то просто замените в коде ниже оператор $OTHER3$ на текст что вам нужен)
$OTHER4$ Для вывода времени Начало в ( только цифры )
$OTHER5$ Для вывода возраста ( только цифры )
$IMG_URL1$ Картинка номер 1
Ну теперь сам код в вид материалов нужного модуля
Код
<table border="0" cellpadding="10" cellspacing="0" style="width:100%;background: #FFF" class="vidtab">
<tbody>
<tr>
<td class="data_wid">
<span class="dnnum_wid">$OTHER1$</span>
<span class="dnmes_wid">$OTHER2$</span>
</td>
<td class="img_wid">
<center><img src="$IMG_URL1$"></center>
</td>
<td class="glavInf_wid">
<span><a href="$ENTRY_URL$">$TITLE$</a></span>
<span>
<b><i class="fa fa-circle" aria-hidden="true"></i> $OTHER3$</b>
<b><i class="fa fa-clock-o" aria-hidden="true"></i> Начало в $OTHER4$ </b>
<strong>$OTHER5$+</strong>
</span>
</td>
<td class="ss_wid">
<a href="$ENTRY_URL$">КУПИТЬ БИЛЕТ</a>
</td>
</tr>
</tbody>
</table>
Теперь подключим стили в таблицу стилей в самый коней
Код
.vidtab {
background: #FFF;
margin: 10px 0;
font-size: 14px;color: #434343;
}
.vidtab td {
padding: 0 20px;
}
.data_wid {
width: 150px;
}
.dnnum_wid {display: block;font-size: 38px;color: #434343;font-weight: bold;text-align: center;}
.dnmes_wid {font-size: 14px;color: #4E595F;text-align: center;display: block;}
.img_wid {
height: 160px;
width: 240px;
overflow: hidden;
background: #f1f1f1;
padding: 0px!important;
}
.img_wid img {
height: 160px;
max-width: 100%;
object-fit: cover;
}
.glavInf_wid span {margin-bottom: 10px;font-size: 14px;color: #434343;display: block;}
.glavInf_wid span a {
font-size: 28px;
font-weight: 600;
display: block;
}
.glavInf_wid span b {
font-style: normal;
display: inline-block;
padding-right: 20px;
font-weight: 100;
}
.glavInf_wid strong {
font-size: 14px;
border-radius: 50%;
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: #E3BF73;
color: #FFF;
}
.ss_wid {
width: 150px;
}
.ss_wid a {
width: 160px;
display: block;
padding: 20px 10px;
background: #FFF;
font-size: 16px;
color: #74532A;
background: #E3BF73;
margin: 0 0 10px;
text-align: center;
border-radius: 30px;
border: 1px solid #74532A;
}
.ss_wid a:hover {
background: #74532A;
color: #FFF;
}
Так же нам понадобятся шрифтовые иконки если они у вас подключены то вам этого делать не нужно а если нет то просто добавьте в вер вашей таблицы стилей вот такую строчку
Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);
Отлично всё готово сохраняем и чистим кеш в браузере
