Здравствуйте! Сегодня хочу предложить вам очередной вид материалов который я написал для модуля каталог статей но так же он подойдёт и для других модулей таких как новости блог и тд.
Вид материалов адаптивный под мобильные экраны, есть вывод картинки даты названия и краткого описания вообщем зачем много читать если можно посмотреть скриншоты вида материала так что вот пару скриншотов на которых показано два вида
Скриншот
Обычный вид на пк
Вид на мобильном устройстве
Ну и для тех кого заинтересовал данный вид материалов предлагаю приступить к его установе
Установка вида материалов
Для начала нам нужно решить для коко-го модуля мы будем использовать данный вид а пока решаем я покажу на примере модуля каталог статей а это значит что мы переходим в админ панель управление дизайном каталог статей - вид материалов и вместо всего что там есть ставим код который находится ниже
Код
<div class="vidwaaknevsbc">
<div class="vidwaaknevsbcl">
<div class="vidwaaknevsbcdat" id="datawaak$ID$">
$DATE$
</div>
<div class="vidwaaknevsbcimg">
<img src="$IMG_URL1$" alt="$MESSAGE$" title="$TITLE$">
</div>
</div>
<div class="vidwaaknevsbcr">
<h1>$TITLE$</h1>
<p>$MESSAGE$. <a href="$ENTRY_URL$">Читать дальше</a></p>
</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>
Отлично не забываем сохранить!
Теперь подключим стили для нашего вида материалов а для этого нам нужно перейти в управление дизайном таблица стилей и в самый её конец добавить код который расположен ниже
Код
/*вид материалов*/
.vidwaaknevsbc {
display: flex;
padding: 10px;
}
.vidwaaknevsbcl {
display: flex;
min-width: 180px;
padding: 10px;
align-content: center;
align-items: center;
align-self: center;
}
.vidwaaknevsbcdat {
text-align: center;
padding: 8px 0;
margin: 0 10px;
}
/*дата*/
.vidwaaknevsbcdat div:nth-child(1) {
font-size: 11px;
text-transform: uppercase;
}
/*месяц*/
.vidwaaknevsbcdat div:nth-child(2) {
font-size: 35px;
font-weight: bold;
line-height: 40px;
}
/*год*/
.vidwaaknevsbcdat div:nth-child(3) {
font-size: 11px;
}
.vidwaaknevsbcimg {
min-width: 80px;
height: 80px;
border-radius: 100%;
overflow: hidden;
}
.vidwaaknevsbcimg img {
width: 80px;
height: 80px;
object-fit: cover;
}
.vidwaaknevsbcr {
padding: 10px 10px 20px;
border-bottom: 1px solid #c5c5c5;
}
.vidwaaknevsbcr h1 {
font-size: 18px;
display: block;
padding: 10px 0;
}
.vidwaaknevsbcr p {
display: block;
font-size: 13px;
color: #434343;
line-height: 18px;
}
@media screen and (max-width: 500px){
.vidwaaknevsbc {display: block;}
.vidwaaknevsbcl {max-width: 100%;}
.vidwaaknevsbcimg {
margin: auto;
}
}
Отлично не забываем сохранить!
Последним шагом нам осталось очистим кеш у браузера а в этом нам поможет комбинация клавиш
Ctrl+F5 и на этом установка завершена! Все вопросы пожелания предложения ну или замечания прошу оставлять в комментариях.
