В сегодняшнем материале, хочу вам предложить "Красивый вид материалов Каталога файлов" для сайтов бесплатного конструктора uCoz. Данный вид так же отлично подойдет, под модули - Новости сайта, Каталог статей и Блог.
Что есть в виде материалов:
Название материала с левой стороны вверху, на против его находится категория данного материала.
Ниже слево стоит изображение, размер изображение 150x99px, рядом с ним описание к материалу.
Еще ниже расположилась панель светло-серого цвета, в которой находится - дата добавления, количество просмотров, комментариев и загрузок, так же на ней есть ник автора, а на против панели с правой стороны стоит темная кнопка "Перейти к материалу".
Установка:
1. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:
Код
/* Красивый вид материалов Каталога файлов для uCoz */
.internetempire_load {overflow:hidden; margin:0 0 10px 0;font-family:Cuprum;}
.internetempire_load .top {overflow:hidden; height:20px; margin:0 0 10px 0;}
.internetempire_load .top div.title {float:left; margin:0 10px 0 0; text-transform:uppercase; font-size:16px; color:#3c3c3c;}
.internetempire_load .top div.title a {color:#3c3c3c;}
.internetempire_load .top div.title a:hover {color:#eaa511;}
.internetempire_load .top a.name {display:block; float:right; text-decoration:none; height:20px; line-height:22px; background:#DC903A; padding:0 10px 0 10px; color:#fff; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.internetempire_load .top a.name:hover {background:#F5A244;}
.internetempire_load .cont {overflow:hidden;}
.internetempire_load .screen {float:left; width:150px; height:99px; margin:0 10px 0 0;}
.internetempire_load .screen img {display:block; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; width:150px; height:99px;}
.internetempire_load .text {overflow:hidden; padding:0 0 10px 0;color: #393939;}
.internetempire_load .panel {width:100%; margin: 1px 0px; float:left; height:28px; line-height:30px; padding:0 3px; background:#f0f0f0; color:#9E9E9E; text-transform:uppercase;}
.internetempire_load .panel a {color:#393939;}
.internetempire_load .panel span {list-style:none; color:#2c3436;}
.internetempire_load a.button {display:block; text-decoration:none; float:right; margin:0 3px 0 20px; width:140px; height:28px; line-height:30px; text-align:center; background:#393939; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; color:#fff; text-transform:uppercase;}
.internetempire_load a.button:hover {background:#525252;color:#fff;}
.internetempire_load a{color:#DC903A;text-transform:uppercase;text-decoration: none;}
.internetempire_load a:hover {color:#DC903A;text-transform:uppercase;text-decoration: none;}
/*------*/
2. Заходим в ПУ - Управление дизайном - модуль Каталог файлов - Вид материалов и заменяем данный код на этот:
Код
<div class="internetempire_load"><div class="top">
<div class="title"><a href="$ENTRY_URL$">$TITLE$</a></div> <a href="$CATEGORY_URL$" class="name">$CATEGORY_NAME$</a> </div>
<div class="cont"><div class="hidden" style="margin:0 0 5px 0;"><div class="screen"><img src="$IMG_URL1$"></div> <div class="text">$MESSAGE$</div> </div>
<div class="panel"><div class="right">Добавлено <span>$DATE$</span> в <span>$TIME$</span> / Просмотров: <span>$READS$</span> / Комментариев: <span>$COMMENTS_NUM$</span> / Загрузок: <span>$LOADS$</span> / Автор: <a href="$PROFILE_URL$" target="_blank"><span>$USERNAME$</span></a><a href="$ENTRY_URL$" class="button">Перейти к материалу</a></div></div>
</div></div><div style="border-bottom: solid 1px #E8E4E4; padding:3px;margin: 0px 0px 15px;"></div>
Готово!
){kind=link}