« Отличный вид материалов в две колонки для uCoz от uFive.Ru »

Описание материала:

Всем привет. В сегодняшнем материале, я хочу вам предложить, отличный вид материалов в две колонки. Данный вид сделан для сайтов в системе uCoz и подойдет под любой модуль, пусть это будет Каталог файлов или Новости сайта. В данном виде присутствуют такие цвета как - Оранжевый, Темно-серый и Светло-бежевый(это цвет фона), так же в виде есть изображение. Чтоб перейти к материалу, вам надо будет навести курсор мыши на изображение, которое в этот момент затемниться и на нем будет надписать Перейти к материалу. В виде присутствует так же - Название материала(не кликабельное), количество просмотров, количество комментариев, дата добавления и конечно краткое описание.

Установка:
1. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:

Код
/* Отличный вид материалов в две колонки для uCoz от ufive */
.ie-material {border: 2px solid #DD903A;width: 47%;float: left;margin: 0 2% 2.5% 0;background: rgba(220, 197, 142, 0.15);border-radius: 10px;}
.ie-material-img {width: 100%;height: 220px;overflow: hidden;position: relative;border-radius: 7px 7px 0px 0px;}
.ie-material-img img {width: 100%;min-height: 100%;border-radius: 7px 7px 0px 0px;}
.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: #fff;font-size: 15px;opacity: 0;transition: all .3s ease;font-family: 'Cuprum';text-transform: uppercase;border-radius: 7px 7px 0px 0px;}
.ie-material-img:hover .mask {opacity: 1;}
.ie-material-text {padding: 0 20px 0 17px;line-height: 22px;color: #393939;height: 140px;overflow: hidden;margin: 0 0 15px 0;}
.ie-material-title {padding: 15px 20px 5px 15px;color: #DC903A;font-size: 14px;height: 25px;overflow: hidden;}
.ie-material-title a {color:#DC903A;text-decoration:none;}
.ie-material-title a:hover {color:#393939;text-decoration:none;}
.ie-information {margin: 6px 16px -17px;color:#393939;font-size: 11px;}
.material-ie {margin: 0px -12px 1px 13px;}
/* ufive.ru */

2. Заходим в ПУ - Управление дизайном - выбираем Модуль - Вид материалов и заменяем данный код на этот:
Код
<div class="material-ie"><div class="ie-material">
<a href="$ENTRY_URL$" title="$TITLE$"><div class="ie-material-img"><div class="mask">Перейти к материалу</div><img src="$IMG_URL1$" alt="$TITLE$"></div></a>
<div class="ie-material-title"><b><?if(len($TITLE$)>38)?><?substr($TITLE$,0,38)?>....<?else?>$TITLE$<?endif?></b><hr></div>
<div class="ie-information">Просмотров: <b>$READS$</b> | Комментариев: <b>$COMMENTS_NUM$</b> | Дата: <b title="$TIME$">$DATE$</b><hr></div>
<div class="ie-material-text"><p><?if(len($MESSAGE$)>280)?><?substr($MESSAGE$,0,280)?>....<?else?>$MESSAGE$<?endif?></p></div>
</div></div>


Готово! Если возникнут какие-то проблемы с данным материалом, пишите на форум, в раздел "Помощь" и мы обязательно Вам поможем.


Установка материала

Мы поможем установить данный материал к Вам на сайт

Источник

Материал взят со стороннего ресурса и был проверен нами


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 948


Поделиться в соц. сетях:
Комментариев к материалу: 2
Александр 01.03.2016 в 22:13Спам
Вот сейчас экспериментирую с видами материалов, и нашёл единственный, который мне очень понравился.
0
Виктор Ягодин 02.03.2016 в 16:39
Мы для этого и выкладываем несколько вариантов, чтоб у Вас был выбор)
1
avatar