Всем привет. В сегодняшнем материале, я хочу вам предложить, отличный вид материалов в две колонки. Данный вид сделан для сайтов в системе uCoz и подойдет под любой модуль, пусть это будет Каталог файлов или Новости сайта. В данном виде присутствуют такие цвета как - Оранжевый, Темно-серый и Светло-бежевый(это цвет фона), так же в виде есть изображение. Чтоб перейти к материалу, вам надо будет навести курсор мыши на изображение, которое в этот момент затемниться и на нем будет надписать Перейти к материалу. В виде присутствует так же - Название материала(не кликабельное), количество просмотров, количество комментариев, дата добавления и конечно краткое описание.
Установка:
1. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:
Код
/* Отличный вид материалов в две колонки для uCoz от InternetEmpire */
.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;}
/* 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><?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>
Готово! Если возникнут какие-то проблемы с данным материалом, пишите на форум, в раздел "Ucoz" и мы обязательно Вам поможем.
К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!