« Оранжевый вид "Каталога файлов" для uCoz »

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

Хороший, оранжевый, в стиле минимализма вид материалов под модуль "Каталог файлов", для сайтов в системе uCoz. Данный вид будет смотреть хорошо на сайте со светлым дизайном, хотя если слегка подредактировать, то вид подойдет и вод темный дизайн. Что из себя представляет вид материалов - В самом верху на оранжевом фоне находится название материала. Под ним изображение к материалу, а на нем расположилось в правом верхнем углу название категории, так же на изображение в нижнем левом углу в горизонтальном положение, расположилось количество просмотров, загрузок, комментариев, так же дата опубликования и автор материала. И в самом низу находится описание к материалу. Установка данного вида очень проста и не потребует огромных знаний.

Установка:
1. Скачиваем архив с нашего сайта, далее загружаем папку vid_icons в корень своего сайта
2. Заходим в ПУ - Управление дизайном - модуль Каталог файлов - Вид материалов и заменяем имеющий код на этот:

Код
<div class="article clearfix">  
<div class="article-title"><a href="$ENTRY_URL$">$TITLE$</a></div>  
<div class="article-image1">  
<div class="article-st-block"><a class="article-st" href="$CATEGORY_URL$">$CATEGORY_NAME$</a></div>  
<div class="stats"><span class="vies" title="Количество просмотров">$READS$</span><span class="downl" title="Количество загрузок">$LOADS$</span><span class="comments" title="Количество комментариев">$COMMENTS_NUM$</span><span class="time" title="Время добавления/обновления">$DATE$ в $TIME$</span><span class="userdd" title="Опубликовал $USERNAME$"><a href="$PROFILE_URL$" target="_blank">$USERNAME$</a></span></div>  
<a href="$ENTRY_URL$"><img class="article-image" title="$TITLE$" src="$IMG_URL1$" alt="Описание"></a></div>  
<div class="article-message"> <p>$MESSAGE$</p></div>  
</div>

3. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим данный код:
Код
/* Оранжевый вид "Каталога файлов" для uCoz */  
.vies:before{content:url('/vid_icons/viev.png');margin-left:-30px;padding-right:5px;vertical-align:middle;}  
.downl:before{content:url('/vid_icons/down.png');margin-left:-30px;padding-right:5px;vertical-align:middle;}  
.comments:before{content:url('/vid_icons/comment.png');margin-left:-30px;padding-right:5px;vertical-align:middle;}  
.time:before{content:url('/vid_icons/time.png');margin-left:-30px;padding-right:5px;vertical-align:middle;}  
.userdd:before{content:url('/vid_icons/user.png');margin-left:-30px;padding-right:5px;vertical-align:middle;}  
.article{margin-left:10px;margin-right:6px;margin-bottom:20px;margin-top:10px;}  
.article-title{background-color:rgba(220, 154, 55, 0.9);color:white; padding: 10px 10px 10px 10px;font-weight: bold;font-size: 15px;border-top-right-radius:5px;border-top-left-radius:5px;}  
.article-title:hover{background-color:#EA9843;}  
.article-title a{color:#fff;}  
.article-title span{float:right;cursor:help;}  
.article-image1{border-top:1px solid #DC9A37;overflow:hidden;width:100%;height: 200px;}  
.article-st-block{position: absolute;width:760px;}  
.article-st{float:right;background-color:#EA9843;padding:5px 10px 5px 10px; margin-top:10px;border-radius:3px;  
color:#fff;font-size:13px;}  
.article-image1 a{color:#fff;}  
.article-st:hover{background-color:#EA9843;color:#fff;}  
.stats{position: absolute;color:white;margin: 170px auto;}  
.stats span{background-color:rgba(0, 0, 0, 0.59);margin-left:10px;padding:7px 10px 7px 40px;border-radius:5px;cursor:help;}  
.article-image{width:577px;}  
.article-message{padding: 10px;font-size:13px;border-bottom-left-radius:5px;border-bottom-right-radius:5px; border-bottom: 1px solid #DC9A37;border-right: 1px solid #DC9A37;border-left: 1px solid #DC9A37;border-top: 1px solid #DC9A37;max-height: 60px; overflow: hidden; text-align: justify;}  
.article-categor {background-color:#452f2f;color:white;padding:10px;text-align:center;font-size:15px;border-top: 1px solid #281b1b;}  
.article-categor a{color:white;font-size:15px;}  
.article-categor a:hover, .article-categor:hover{background-color:#e66745;}  
#allEntries img { width: 800px; }  
/* InternetEmpire.Ru */

Готово!


Скачать ( Размер архива 148.8 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

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

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


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

Теги к материалу: каталога, вид, оранжевый, ucoz, файлов, для

Поделиться в соц. сетях:
Комментариев к материалу: 5
Виктор 27.07.2016 в 15:28Спам
как подправить категорию
0
Афигенно!
1
Mikkey Sleger 02.02.2016 в 08:35Спам
а цвет изменить можно
0
Виктор Ягодин 02.02.2016 в 13:40
Да, можно
0
Нормальный вид.
0
avatar