Здравствуйте! на данной странице я хочу поделиться с вами простым светлым резиновый видом материалов который я писал для модуля каталог файлов когда дела мобильную версию для одного сайта но так и не доделал её и вот решил выложить некоторые его элементы на талантлев что бы они не пропадали зря и обрели возможно свой дом!
Резиновый по тому что все материалы будут идти друг под другом растягиваясь на всю ширину блока в котором будут находится не важно куда вы будите его использовать как основной вид материалов модуля или захотите поставить в информер.
Скриншоты вида материалов
Ну и для тех кому он понравился или просто хочет посмотреть как он будет смотреться на их сайт созданный вна конструкторе ucoz предлагаю приступить к его установке на сайт
Установка вида материалов
Давайте для начала решим для какого модуля будем его устанавливать и пока вы решаете данную задачу я покажу на примере модуля каталог файлов .
Ну что же переходим в панель управление - дизайн - выбранный модуль в моем случае каталог файлов - вид материалов и вместо того кода что там есть ставим код что указан ниже
Код вида материалов
Код
<div class="widMatzonaBc">
<div class="widMatzonaBcTop"><i class="fa fa-clock-o" aria-hidden="true"></i> $DATE$ в $TIME$
<span class="dataMat"><i class="fa fa-eye" aria-hidden="true"></i> $READS$</span></div>
<a href="$ENTRY_URL$"><div class="widMatzonaBcName" title="$TITLE$">$TITLE$</div></a>
<div class="widMatzonaBcText">$MESSAGE$ </div>
<div class="widMatzonaBcImg"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a></div>
<div class="widMatzonaBcFot" style="padding: 10px 20px;">
<div class="userMat"><a href="$PROFILE_URL$" title="Посмотреть профиль">
<div class="widMatzonaBcAva"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="ССЫЛКА НА КАРТИНКУ НЕТ АВАТАРА" border="0" alt="" /><?endif?></div>
<div class="widMatzonaBcAvtorName">$USERNAME$</div>
<div class="clr"></div></a>
</div>
<div class="futMatInf">
<a href="$COMMENTS_URL$" title="Комментарии к материалу"><span class="infMat"><i class="fa fa-comments-o" aria-hidden="true"></i>$COMMENTS_NUM$ </span></a>
<span class="infMat" title="Проголосовало $RATED$"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>$RATED$ </span>
</div>
<div class="clr"></div>
</div>
</div>
Отлично меняем в коде ссылку на картинку нет аватара на свою и после не забываем сохранить!
Теперь подключим стили для нашего вида для этого переходим в таблицу стиле css и в самый её конец прописываем код ниже
Таблицу стиле css
Код
/*вид материалов зона обмена*/
.clr {clear: both;}
.widMatzonaBc {
background: #FFF;
overflow: hidden;
position: relative;
margin: 0 0 10px;
}
.widMatzonaBc a {
text-decoration: none;
}
.widMatzonaBcTop {
padding: 20px 20px 0;
color: #333;
font-size: 11px;
}
a .widMatzonaBcName {
padding: 15px 20px;
font-size: 20px;
font-weight: bold;
color: #333;
}
.matslide a .widMatzonaBcName {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.owl-carousel .owl-stage-outer {
padding: 0 10px;
}
a .widMatzonaBcName:hover {color: #ff4338;}
.widMatzonaBcImg {
width: 100%;
height: auto;
overflow: hidden;
}
.widMatzonaBcImg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.widMatzonaBcText {
padding: 0 20px 20px;
color: #333;
font-size: 13px;
}
.matslide .widMatzonaBcText {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.widMatzonaBcFot {
padding: 10px 0;
}
.userMat {
float: left;
display: block;
}
.userMat a {
display: block;
}
.widMatzonaBcAva {
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
float: left;
margin: 0 15px 0 0;
background: url("../img/noImg.png") no-repeat center;
background-size: 30px;
background-color: #0068a2;
}
.widMatzonaBcAva img{
width: 30px;
height: 30px;
object-fit: cover;
}
.widMatzonaBcAvtorName {
color: #333;
font-size: 14px;
line-height: 30px;
float: left;
}
.dataMat {
float: right;
}
.widMatzonaBcTop i {
margin: 0 10px 0 0;
}
.widMatzonaBcTop a i {
margin-top: -5px;
margin-left: -6px;
}
.futMatInf {
float: right;padding: 7px 0;
}
.infMat {
background: #f1f1f1;
color: #868686;
padding: 5px 10px;
border-radius: 4px;
margin-left: 10px;
cursor: pointer;
}
.infMat i {
margin: 0 10px 0 0;
}
.infMat:hover {
background: #ff4338;
color: #FFF;
}
Отлично не забываем сохранить! Так же пока мы в таблице стилей на нужно подключить шрифтовые иконки от
font-awesome но только в том случае если они у вас ещё не подключены в противном случае повторно этого делать не нужно, ну а для тех у кого их нет то просто в самый вер первой строчкой в таблице стилей пропишите код ниже
Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);
Последним шагом нам осталось очистим кеш у браузера комбинацией клавиш
Ctrl+F5 и на этом установка завершена!
