Простой информер популярных материалов

Популярные файлы

Страница 1 из 1
1

PIN » » 11.03.2013 » 13:24 » Сообщение # 1

Группа: Удаленные

Сообщений:

Новый интересный информер в серых тонах для uCoz. Информер состоит из серого фона , красивых голубых полосок сверху и снизу. Слева находится скриншот материала , а справа интересный список со стрелочками голубого цвета. Информер прозрачный , при наведении становится не прозрачным.
Верстка by PIN

Создаем информер:

[ Каталог файлов · Материалы · Количество просмотров D · Материалы: 3 · Колонки: 1 · Длина заголовка: 17 ]

В шаблон информера:

Код

<div class="p-files">
<div class="p-files-header"></div>
<div class="p-files-body">
<div class="p-files-im"><a href="$ENTRY_URL$"><img src="$IMG_URL1$"></a></div>
<div class="p-files-sp">
<div class="p-sp"><a href="$ENTRY_URL$" title="$TITLE$">$TITLE$</a></div>
<div class="p-sp"><a href="$CATEGORY_URL$" title="$CATEGORY_NAME$">$CATEGORY_NAME$</a></div>
<div class="p-sp">ПРОСМОТРОВ: <span>$READS$</span></div>
<div class="p-sp">ЗАГРУЗОК: <span>$LOADS$</span></div>
</div>
</div>
<div class="p-files-footer"></div>
</div>

В CSS:

Код

.p-files { width: 222px; opacity: 0.7; -webkit-transition: 0.7s; }
.p-files:hover { opacity: 1.0; -webkit-transition: 0.7s;}
.p-files-header { background: url(http://unetpvpers.ru/my_files/bg-inf-header.png) no-repeat 0 0; height: 16px; }
.p-files-body { background: url(http://unetpvpers.ru/my_files/bg-inf-body.png) repeat-y; }
.p-files-footer { background: url(http://unetpvpers.ru/my_files/bg-inf-footer.png) no-repeat 0 0; height: 16px; }
.p-files-im img { padding: 8px 7px; float: left; background: url(http://theucoz.ru/filesunic/informerfile/p-files-im-bg.png) no-repeat 0 0; margin-left: 10px; width: 50px; height: 48px;}
.p-files-sp { overflow: hidden; }
.p-sp { background: url(http://theucoz.ru/filesunic/informerfile/p-files-st.png) no-repeat 0 0; padding-left: 14px; ; color: #89adbd; font-size: 12px; margin: 3px 0px 8px 14px; height: 9px; line-height: 10px; font-style: italic;}
.p-sp span { color: #fff;}
.p-sp a { text-decortation: none; color: #fff; }