ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Светлый стиль в 2 колонки вид материалов для uCoz

Светлый стиль в 2 колонки вид материалов для uCoz

Популярный в 2 колонки вид материалов для таких каталогов новостей и блога, что в адаптивном виде с красивой обводом теней на эффекте. Конструкция у него очень проста и понятно, где будет показано изображение, что по клику через него можно произвести переход на основной материал. Больше всего его можно увидеть на современном шаблоне, где строится главная страница из нескольких материалов и подкрепляют к ним информер. Но все же к нему прикрепил как можно больше функционала, что теперь веб мастера больше появилось возможностей по размещению на различные модули.

Если у вас каталог файлов, то вам останется только поменять или добавить оператор. Но все это технические работы, здесь больше нужно внимание уделить на стилистику, где она сделана в упрощенном виде. А это нет не каких подчеркивание, вся нужная информация находится вид материала или одном блоке. Это заголовок, что однозначно должен быть и как можно отличатся по шрифту от других.

Ниже предоставлена краткое описание, что поставлена под стили, это означает, какое большое оно бы не было, то по умолчанию будет появляться несколько строк. Но и не нужно забывать про шрифтовые иконки, так как они здесь подключены, сейчас редко встретишь на ссылках, все выводят на шрифтах, что корректно показывало и оригинально смотрелось на мобильных аппаратах.

Изначально все проверялось на тестовой площадке, где предлагаю посмотреть снимки, сняты с него на разной ширине, это имеется настройка под разные размеры как монитора и экрана.

Если заходить на ресурс с компьютера, вообще с широкого монитора, то всегда будет 2 колонки, как и должно.

Теперь обзор идет на планшете, но здесь сами должны понять, так как на браузере проверка происходила, что также можно добавить смартфон, что в этом не каких изменений, но кроме пикселей не будет.

Считаю самым популярным, это телефон и под него отдельно писались стили, чтоб убрать все кнопки, для того, чтоб не мешались, а осталось чисто информационный поток.

Стильный по вид материалу на сайт

Приступаем к установке:

HTML

Код

<div class="kartidamurensa">
<div class="image"><a href="$ENTRY_URL$" class="ulightbox"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a>
</div>
<div class="resmilogatun">
  <h3><a href="$ENTRY_URL$" title="$TITLE$">$TITLE$</a></h3>
  <div class="moletunsa_ursapka">
<p>$MESSAGE$</p>
  </div>
<div class="zornet_ru">
  <footer>
<div class="views"><i class="fa fa-check-square"></i>$DATE$</div>
  <div class="love"><i class="fa fa-user-secret"></i>$USERNAME$</div>
  <div class="views"><i class="fa fa-eye"></i>$READS$</div>
  <div class="comments"><i class="fa fa-comments"></i>$COMMENTS_NUM$</div>
</div>
</div>
</footer>
</div>

CSS

Код

.kartidamurensa{
font-family: 'Open Sans', Arial, sans-serif;
float: left;
overflow: hidden;
margin: 5px 00px 9px 8px;
width: 48%;
height: 325px;
background-color: #ffffff;
color: #000000;
text-align: left;
font-size: 16px;
border-radius: 10px 10px 5px 5px;
-webkit-transition:box-shadow .3s;
transition:box-shadow .3s;
box-shadow: 2px 2px 11px 0px rgba(128, 122, 122, 0.4);
border: 2px solid #bbbcbd;
}

.kartidamurensa:hover{
box-shadow:0 10px 30px rgba(0,0,0,.15)}

.kartidamurensa img{
height:170px;
width: 100%;
vertical-align: top;
position: relative;
object-fit: cover;
-webkit-border-radius: 9px 9px 0 0;
}

.kartidamurensa .resmilogatun{
padding: 9px 5px 0px;
background-color: #ffffff;
}

.kartidamurensa h3 a{
font: 19px 'Open Sans';
color: #16386d;
margin-bottom: 0px;
display: inline-block;
font-weight: 900;
padding: 3px 0px 0px 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0px 0px -10px 0px;
}

.kartidamurensa h4 a{
font: 17px 'Open Sans';
color: #ff2d55;
margin-bottom: 10px;
display: inline-block;
font-weight: 900;
}

.kartidamurensa p{
font: 14px 'Open Sans';
color: #333131;
margin-bottom: 15px;
line-height: 1.3em;
}

.kartidamurensa footer{
padding: 0px 1px;
color: #2b5579;
font-size: 12px;
text-align: left;
bottom: 0;
left: 0;
}

.kartidamurensa footer > div{
display: inline-block;
margin-left: 3px;
margin-right: 7px;
}

.kartidamurensa footer i{
margin-right: 5px;
font-size: 1.1em;
}

.moletunsa_ursapka{
opacity: 0.97;
margin-bottom: 17px;
padding: 0px 3px;
height: 67px;
overflow: hidden;
text-align: justify;
}

@media screen and (max-width: 760px){
.kartidamurensa{
background: #FFF;
width: 100%;
height: auto;
padding: 0px;
}
}

@media screen and (max-width: 860px){
.kartidamurensa, footer{
background: rgba(43, 37, 37, 0);
width: 100%;
height: auto;
padding: 0px;
margin: 7px 0px 15px 0px;
}
}

@media screen and (max-width: 640px){
.zornet_ru{
display: none;
}
}

Это как рекомендация, что если решили в дизайн поменять и новое выставить, то рекомендую зайти в админ панель и все сохранить и потом проводить изменение.

08 Декабря 2017 Просмотров: 1585 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0