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

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

Основном такой дизайн можно увидеть на кино сайте, но Вид материалов для uCoz в 2 колонки создан под общею тематику. И здесь вы даже можете его доработать как вам нужно, но он идет уже полностью рабочим. При наведение клика на изображение, оно темнеет, также можно перейти к самому материалу. Рад предложить вам интересный и современный вид материалов для сайтов под управлением uCoz. Данной вид сделан красиво, стильно и главное по современному.
Так же хочу отметить тот фактор что он будет выводится в две колонки, но при желание можно легко изменить и в одну колонку и даже в три колонки.
В общем он удобный и думаю вам пригодится.

Установка данного вида материалов проста и не займёт у вас много времени, так как вам всего то нужно установить сам код вида и стили .

И так скопируйте ниже код и вставьте в дизайн вида материалов нужного вам модуля.

Код

<div class="smallnews">

<a href="$ENTRY_URL$"><div class="news-small-ph"><div class="mask">Перейти к новости</div><img src="$IMG_URL1$"></div></a>
  <div class="news-small-title"><a href="$ENTRY_URL$"><b>$TITLE$</b></a> </div>
<div class="news-small-text"><p>$MESSAGE$</p></div>
</div>

Далее проходим в стили своего сайта и в самый низ ваших стилей добавляем и сохраняем ниже приведённые мною стили.

Код

.smallnews{
border: 1px solid #ccc;
width: 47%;
float: left;
margin: 0 2% 2.5% 0;
background: #fff;
}
.news-small-ph{
width: 100%;
height: 220px;
overflow: hidden;
position: relative;
}
.news-small-ph img{
width: 100%;
min-height: 100%;
}

.mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0, 0.6);
text-align: center;
line-height: 220px;
color: #f0f0f0;
font-size: 15px;
opacity: 0;
transition: all .3s ease;
font-family: 'Bender';
}

.news-small-ph:hover .mask{
opacity: 1;
}
.news-small-text{
padding: 0 20px 0 15px;
line-height: 22px;
color: #353535;
height: 156px;
overflow: hidden;
margin: 0 0 15px 0;
}
.news-small-title{
padding: 15px 20px 5px 15px;
color: #2692c7;
font-size: 14px;
height: 40px;
overflow: hidden;
}

.eTitle{
font-size: 18px;
}

Установка завершена и думаю вы справились с этой задачей!

27 Сентября 2015 Просмотров: 3487 Комментариев: (5)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 5
Порядок вывода комментариев: Kolinkor 27 Сентября 2015 23:59¹ 0 Больше всего взято из темы онлайн и немного переделано, хотя не исключаю, что это все родное и как раз в этом случай, можно доделать под эту тематику онлайн. Сопрано 28 Сентября 2015 00:02² 0 Почему не все изображение показано, а только его половина. Kosten 28 Сентября 2015 00:12³ +1 Это картинки сами маленькие и сделано так, что при клике при них, она не будут увеличиваться а произойдет переход к самому материалу. kos 28 Сентября 2015 01:01⁴ 0 подходит для новостей Kosten 29 Марта 2017 17:37⁵ 0 Для игрового сайта тоже подойдет.