Всем привет всё не как не находил время доделать и опубликовать данный Вид материалов но вот всё таки отложил свои дела и решил закончить его что бы вы могли им пользоваться да и просто посмотреть его!
Данный вид я писал с учётом дизайна для конкретного сайта по этому сразу прошу вас не критиковать цвета! тем более их легко вы сможете поменять
Данный вид материалов довольно прост но всё же получился довольно не плохо при этом имеет адаптацию под разные разрешения так же в нём есть js скрипт который помогает нам сделать стильный вывод даты из условного оператора но о нё я расскажу ниже а пока давайте посмотрим пару скриншотов и приступим к установки
Полный вид
Вид по меньше
Вид планшета
Вид моб телефона но не полный полный можно посмотреть на видео демки в самом низу
Установка
Для начало установим сам вид материалов для этого заходим в панель управление управление дизайном затем выбераем нужный модуль
вид материалов и заменяем весь код что там есть на код ниже
Код
<div class="bcwaakvidtalantlev">
<div class="bcwaakvidtalantlevdata">
<div class="datawaak" id="datawaak$ID$">$DATE$</div>
<span class="bordermax"></span>
<span class="bordermin"></span>
<div class="bcwaakvidtalantlevdatanachalo">
<span><i class="fa fa-clock-o" aria-hidden="true"></i> начало в</span>
<div class="bcwaakvidtalantlevdatavremy">$OTHER1$</div><!-- Время начало -->
<span>$OTHER2$</span> <!-- День недели начало -->
</div>
</div>
<div class="bcwaakvidtalantlevimg"><img src="$IMG_URL1$"></div> <!-- Картинка первая в материале --->
<div class="bcwaakvidtalantlevtext">
<a href="$ENTRY_URL$"><h2>$TITLE$</h2></a><!-- Название материала -->
<div class="bcwaakvidtalantlevvxod">$OTHER3$</div> <!-- Текст в блоке " вход свободный и ли отменено - перенесено " -->
<div class="bcwaakvidtalantlevtssage">$MESSAGE$</div> <!-- Описание материала -->
<div class="bcwaakvidtalantlevogr">$OTHER4$</div> <!-- Возрост ограничения 0+ -->
<div class="bcwaakvidtalantlevcnopa"><a href="$ENTRY_URL$">подробнее</a></div>
</div>
<div id="clr"></div>
</div>
<script>
var str = $("#datawaak$ID$").html();
var mas = str.split('.');
var code='';
for (i=0; i<mas.length; i++){
code+= '<div>'+mas[i]+'</div>';
}
$("#datawaak$ID$").html(code);
</script>
Отлисно не забываем сохранить.
Пару слов о коде для ясности
дополнительную информацию я вывожу из дополнительных полей вы можете их поменять на свои так как если
ваш сайт содержит много материалов то проше поменять операторы чем редактировать материалы
Назначение полей указано как в коде выше так и ниже опишу ещё раз
$OTHER1$ Время начало
$OTHER2$ День недели начало
$OTHER3$ Текст в блоке вход свободный или тот что вам нужно
$OTHER4$ Возраст ограничения 0+
Так же как я писал выше в коде есть скрипт который меняет структуру вывода даты для того что бы мы могли с ней работать так вот
по сути вам сам скрипт трогать не нужно он и так будет работать хорошо но если в друг у вас дата выводится не так как на скрине то
это говорит о том что в настройках выбран формат не такой как нужно и вам нужно его просто поменять на такой число.месяц.год разделитель между пунктами точка обязательно!
Так же вам нужно будет отключить в общих настройках вывод даты сегодня как сегодня или сделать свой вид даты
Если же всё таки возникнут проблемы пишите в комментариях а пока продолжим установку
Теперь подключим стили в таблицу стилей в самый конец
Код
.max-width {
margin: 0 auto;
padding: 20px;
max-width: 1000px;
}
.bcwaakvidtalantlev {
margin: 30px 0;
position: relative;
background: #FFF;
box-shadow: 0px 10px 50px -10px #5d0404;
border-top: 2px dotted #5d0404;
border-bottom: 2px dotted #5d0404;
}
.bcwaakvidtalantlevdata {
width: 150px;
float: left;
padding: 10px;
}
.bordermax {
display: block;
max-width: 100%;
height: 1px;
background: #000;
margin: 10px 0 0;
}
.bordermin {
display: block;
max-width: 100%;
height: 1px;
background: #000;
margin: 3px 15px;
}
.bcwaakvidtalantlevdatanachalo {
text-align: center;
padding: 10px;
}
.bcwaakvidtalantlevdatavremy {
font-size: 30px;
color: #FF0000;
}
.bcwaakvidtalantlevdatanachalo span {
font-size: 16px;
color: #999;
}
.bcwaakvidtalantlevimg {
float: left;
width: 140px;
max-height: 250px;
border-radius: 0 0 35px 35px;
overflow: hidden;
border: 2px dotted #5d0404;
margin: -15px 0px 20px;
}
.bcwaakvidtalantlevimg img {
width: 100%;
height: 100%;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
object-fit: cover;
}
.bcwaakvidtalantlevtext {
margin-left: 290px;
}
.bcwaakvidtalantlevtext h2 {
font-size: 24px;
padding: 20px 70px 20px 20px;
font-weight: 100;
}
.bcwaakvidtalantlevogr {
position: absolute;
top: -2px;
right: 30px;
line-height: 45px;
height: 50px;
width: 45px;
border-radius: 0 0 20px 20px;
border-left: 2px dotted #5d0404;
border-right: 2px dotted #5d0404;
border-bottom: 2px dotted #5d0404;
text-align: center;
color: #FF0000;
font-size: 16px;
}
.bcwaakvidtalantlevvxod {
background: #fff;
background-image: -webkit-linear-gradient(left, #fff, #e77043, #fff);
background-image: -moz-linear-gradient(left, #fff, #e77043, #fff);
background-image: -ms-linear-gradient(left, #fff, #e77043, #fff);
background-image: -o-linear-gradient(left, #fff, #e77043, #fff);
-moz-border-radius: 5px;
padding: 5px 0;
text-align: center;
color: #FFF;
font-size: 15px;
border-top: 1px dotted #5d0404;
border-bottom: 1px dotted #5d0404;
text-transform: uppercase;
}
.bcwaakvidtalantlevtssage {
padding: 10px 20px;
font-size: 13px;
color: #3e3a3a;
margin: 0 0 70px;
}
.bcwaakvidtalantlevcnopa {
position: absolute;
bottom: 20px;
right: 30px;
border: 2px dotted #5d0404;
padding: 10px 15px;
border-radius: 5px;
}
.bcwaakvidtalantlevcnopa a {
color: #5d0404;
font-size: 16px;
display: block;
}
.bcwaakvidtalantlevcnopa:hover {
background: #5d0404;
}
.bcwaakvidtalantlevcnopa:hover a {
color: #FFF;
}
.datawaak div {
text-align: center;
}
.datawaak div:nth-child(1) {
font-size: 40px;
font-weight: bold;
padding: 10px 0 0;
}
.datawaak div:nth-child(2) {
font-size: 24px;
text-transform: uppercase;
}
.datawaak div:nth-child(3) {
font-size: 16px;
}
@media screen and (max-width: 700px){
.bcwaakvidtalantlevimg {
float: right;
margin-right: 30px;
}
.bcwaakvidtalantlevdata {
width: 150px;
float: left;
padding: 10px;
margin: 0 30px;
}
.bcwaakvidtalantlevtext {
margin-left: 0px;
padding: 0px 20px;
clear: both;
}
.bcwaakvidtalantlevogr {
position: relative;
border: 2px dotted #5d0404;
border-radius: 50%;
margin: 10px 40px;
}
.bcwaakvidtalantlevcnopa {
bottom: 15px;
}
.bcwaakvidtalantlevtssage {
padding: 10px 20px;
font-size: 13px;
color: #3e3a3a;
margin: 0 0 5px;
}
}
@media screen and (max-width: 450px){
.bcwaakvidtalantlevdata {
margin: 0 auto;
float: none;
}
.bcwaakvidtalantlevimg {
float: none;
width: 190px;
max-height: 250px;
border-radius: 0;
overflow: hidden;
border: 2px dotted #5d0404;
margin: 10px auto;
}
.bcwaakvidtalantlevimg img {
width: 100%;
height: 100%;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
object-fit: cover;
}
.bcwaakvidtalantlevtext h2 {
font-size: 15px;
padding: 0px;
font-weight: 100;
}
.bcwaakvidtalantlevtssage {
padding: 0px;
font-size: 12px;
color: #3e3a3a;
margin: 0 0 10px;
}
.bcwaakvidtalantlevvxod {
font-size: 15px;
margin: 10px 0;
}
.bcwaakvidtalantlevogr {
margin: 15px 20px;
}
.bcwaakvidtalantlevcnopa {
bottom: 20px;
right: 10px;
}
}
Отлично! не забываем сохранить.
Так же в коде чуть не забыл есть одна иконка от
font-awesome вы её можете заменить на свою или подключить иконки просто добавив строчку ниже в самый верх вашей тоблици стилей
Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);
думаю что понять то что если они у вас уже подключены то вам подключать их ещё раз не нужно
а для тех кто не хочет этого делать можете удалить просто код иконки или заменить его на картинку
Теперь нам осталось почистить кеш в браузере для этого достаточно нажать комбинацию клавиш
Ctrl + F5 и всё готово!
Оценки просьбы жалобы пишите в комментариях!
web_master 
