Светлый по своему дизайн вид материала, что был создан на две колонки и полностью адаптивный на мобильные аппараты. Что можно поставить на светлый сайт под многие тематические интернет ресурсы. Вид материалов выводит стандартную краткую информацию об материале название его, кто его добавил изображение и не осталось в стороне категории с просмотрами и количество загрузок. Здесь вмести кнопок будет выводить шрифтовые иконки.Сам вверх где будет название сделано под темный цвет, а вот в низу сделано под 3D, где еще присутствует тени в стилистике.
Приступаем к установке:
Первое что нужно сделать, это подключить шрифтовые кнопки, идем вверх сайта и ставим стиль на них.
Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Вид материалов:
Код
<div class="eBlock-vid">
<h2 class="eTitle-vid"><a href="$ENTRY_URL$">$TITLE$</a></h2>
<span class="post-details">Добавил: <a href="$PROFILE_URL$">$USERNAME$</a> <span class="post-dt"><i class="fa fa-clock-o" aria-hidden="true"></i> <span class="post-date">$DATE$</span>, $TIME$ </span> </span>
<div class="img-poster"><img src="$IMG_URL1$" alt="$TITLE$"></div>
<div class="game-detali" style="clear:both;">
<li><i class="fa fa-eye"></i>$READS$</li><li><i class="fa fa-download"></i>$LOADS$</li> <li style=" float: right; margin-right: 2px; "><i class="fa fa-wifi"></i><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></li>
</div>
<div class="eMessage" style="text-align: justify; height: 70px; overflow: hidden;">$MESSAGE$</div>
</div>
CSS:
Код
.post-details {color: #94999e; font-size: 11px; padding-right: 25px; margin-bottom: 10px; display: inline-block;}
.post-details a { color: #383e47; font-weight: 600; font-size: 12px;}
.post-details a:hover { color: #1abc9c;}
.eBlock-vid {float: left; width: 45.6%; margin: 0 5px 5px 5px; padding: 10px; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); border-bottom: solid #ccc;}
.img-poster img {width: 100%; height: 150px;}
.game-detali {padding-left: 3px; margin-top: 5px; height: 20px; line-height: 20px; font-size: 13px; border-bottom: #e7e7e7 1px solid; padding-bottom: 5px;}
.game-detali li {list-style: none; margin-right: 15px; display: inline-block;}
.game-detali i {color: #6B6B6B; padding-right: 5px;}
.game-detali a {color: #545457;}
.game-detali a:hover {color: #F27935;}
.post-dt {padding-left: 15px;}
.eTitle-vid { margin-bottom: 10px; color: #FFFFFF; padding: 5px 5px 5px 10px; background-color: #3F3F3F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eTitle-vid a {text-decoration: none; color: #fff; font-size: 18px;}
.eTitle-vid a:hover { color: #E7E7E7; }
@media only screen and (max-width: 360px) {
.eBlock-vid {float: none!important;width: 100%!important;margin: 0!important; padding: 0!important;}
}
@media only screen and (max-width: 480px) {
.eBlock-vid {float: none!important;width: 100%!important;margin: 0!important; padding: 0!important;}
.img-poster { float: none!important; margin-right: 0!important; }
.img-poster img { width: 100%!important; height: 150px; }
}
@media only screen and (max-width: 640px){
.eBlock-vid {float: none!important;width: 100%!important;margin: 0!important; padding: 0!important;}
}
Источник: d-melochi.ru
