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

Вид материалов адаптивный для сайта uCoz

Адаптивная версия, что идет на вид материалов под блог или файлы для uCoz. Выполнено в светлой палитре цвета в 2 колонки с кнопкой. Изначально не задавалась тематическое направление, так как по своему стилю он может подойти как на игровую площадку, где также можно наблюдать на софт портале. Но мне больше нравится, если он будет на новостном блоге или под мануалы, потому не стал прикреплять остальные шрифтовые иконки под функцию, что производит мониторинг, сколько файлов было скачено.

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

Это снимки в тестовоно сайта, где проверялся на работоспособность на разные размеры монитора, также экрана.

1.

Адаптивный вид материалов для uCoz в две колонки

HTML

Код

<div class="kavestviteleka">
<div class="mestokaenie">
<div class="lexico-measure"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"><div class="perehodnikan"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></div></div>
  <div class="determined">
<div class="zorner_rubesamer"><a href="$ENTRY_URL$">$TITLE$</a></div>
<?if($MESSAGE$)?><div class="links_unequal">$MESSAGE$</div><?endif?>
  </div>
  <div class="glagolnusut">
<span class="date"><i class="fa fa-user-circle-o"></i> <a href="$PROFILE_URL$">$USERNAME$</a></span> <span class="prosm"><i class="fa fa-eye"></i> $READS$</span><span class="salokun"><i class="fa fa-comments-o"></i> <a href="$COMMENTS_URL$">$COMMENTS_NUM$</a> </span>
</div>
<div class="zavisimoten_slovo"><a href="$ENTRY_URL$"><i class="fa fa-sign-out"></i></a></div>
</div>
</div>

CSS

Код

.kavestviteleka{
width: 48%;
float: left;
margin: 3px 12px 10px 3px;
border-radius: 5px 5px 1px 1px;
}

.lexico-measure img{
width: 99%;
height: 247px;
object-fit: cover;
border: 1px solid #adaeaf;
}

.mestokaenie{
padding: 10px;
background-color: #FFF;
border: 1px solid #d2d2d2;
}

.glagolnusut{
background: #2c5c73;
border: 1px solid #b3a9a9;
padding: 0 5px;
font-size: 12px;
height: 34px;
line-height: 34px;
margin-top: 10px;
border-radius: 3px;
}

.glagolnusut span{
margin-right: 10px;
color: #fafcff;
}

.glagolnusut span a{
color: #f4f5f7;
}

.date,.prosm, .salokun{
padding-left: 1px !important;
}

.determined{
height: 110px;
overflow: hidden;
}

.zorner_rubesamer{
padding: 10px 0;
}

.zorner_rubesamer a{
text-transform: uppercase;
font-size: 14px;
color: #444;
font-weight: bold;
display: block;
white-space: nowrap;
/* Отменяем перенос текста */overflow: hidden;
/* Обрезаем содержимое */padding: 0px;
/* Поля */text-overflow: ellipsis;
/* Многоточие */}

.links_unequal{
text-align: justify;
height: 74px;
overflow: hidden;
line-height: 135%;
color: #4b4b4b;
font-size: 14px;
}

.perehodnikan{
}

.perehodnikan a{
background: #22a724;
color: #fff;
display: block;
font-size: 13px;
height: 35px;
line-height: 35px;
margin: -38px 0 0 0px;
padding: 0 15px;
position: absolute;
width: auto;
border-radius: 0px 3px 0px 0px;
}

.perehodnikan a:hover{
text-decoration:none;
background: #2ddc2e;
}

.zavisimoten_slovo{
float: right;
margin: -32px 5px 0px 0px;
}

.zavisimoten_slovo a{
display: inline-block;
background: rgb(23, 50, 64);
width: 33px;
text-align: center;
height: 15px;
padding: 0px 5px 8px 5px;
border-radius: 10px;
border: 2px solid #8c929e;
}

.zavisimoten_slovo a i{
color: #fff;
padding: 6px 0px;
}

.zavisimoten_slovo a:hover{
background: rgba(22, 84, 14, 0.98);
}

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

При любой замене элемента, не забываем сделать сохранение в админ панели.

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

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

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

Kosten

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