« Большой вид материала для uCoz »

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

Вчера я выложил на сайт материал "Отличный вид материалов в две колонки для uCoz", а сегодня я решил его сделать в одну колонку, и на всю ширину контента. Ширина данного вида составляет 765px, но вы легко можете сделать ширину под себя, изменив ее в стилях к данному материалу. Так же к виду я добавил - Категорию и количество Загрузок. А так особых изменений не было, все осталось по прежнему, переход к материалу через изображение и название материала не кликабельное, и цвета остались те же.

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

Код
/* Большой вид материала для uCoz */
.ie-material {border: 2px solid #DD903A;width: 765px;float: left;margin: 0 2% 2.5% 0;background: rgba(220, 197, 142, 0.15);border-radius: 10px;}
.ie-material-img {width: 100%;height: 190px;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: 75px;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;}
/* InternetEmpire.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>$TITLE$</b><hr></div>
<div class="ie-information">Категория: <a href="$CATEGORY_URL$"><b>$CATEGORY_NAME$</b></a> | Просмотров: <b>$READS$</b> | Комментариев: <b>$COMMENTS_NUM$</b> | Загрузок: <b>$LOADS$</b> | Дата: <b title="$TIME$">$DATE$</b><hr></div>
<div class="ie-material-text"><p><?if(len($MESSAGE$)>330)?><?substr($MESSAGE$,0,330)?>....<?else?>$MESSAGE$<?endif?></p></div>
</div></div>


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


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

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


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

Теги к материалу: материала, для, ucoz, вид, большой

Поделиться в соц. сетях:
Комментариев к материалу: 4
Забрал и как всегда немного доработал.)
0
Виктор Ягодин 22.02.2016 в 18:34
Да, я уже видел) Мне просто не нравятся эти иконки, вот я и делаю без них)
0
Александр 01.03.2016 в 22:10Спам
Великолепно смотрится, установил на сайт, и доволен
1
Виктор Ягодин 02.03.2016 в 16:37
Это отлично, что Вам понравилось)
1
avatar