Простой и динамичный информер вывода скриншота и названия материала, сделанный более для игровых тематик сайтов, а именно для модуля каталог файлов, можно его адаптивно изменить и под другие разделы сайта. использовать желательно в статических шаблонах так как новости собираются из колонок с учетом того что одна новость имеет в ширину 155а высоту 100.
Цвет сайта тут не играет роли так как все настройки в стиле, присутствуют два графических элемента, один для фона оглавления, другой для фона сетки как показано на примере скрина.
В информационном блоке самое главное это информация в сокращенном виде, и его названия и статистика, тут используется только две функции.
Установка:
Создаем информер каталога файлов:
[ Каталог файлов · Материалы · Дата добавления материала D · Материалы: 8 · Колонки: 4 · Длина заголовка: 20 ]
В шаблон информера вставляем:
Code
<a class="blogEntryTitles third-block-links" title="$TITLE$" href="$ENTRY_URL$"><b>$TITLE$</b></a> <div class="viewn_ll_informer"> <a title="$TITLE$" href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" width="155px" height="100px" /></a></div>
Где хотим видеть сам информер вставляем:
Code
<div class="third-block" align="center">
$MYINF_X$
</div>
В таблицу стилей вставляем CCS
Code
.viewn_ll_informer {width:180px;height:123px;overflow:hidden;margin:2px 10px 0 0;background-image:url(/info/info-block.png);}
.viewn_ll_informer img {width: 155px !important;height: 100px !important;vertical-align: top;padding: 11px;}
.third-block .infTd {text-align:center;}
.third-block-links {text-shadow:0px 1px black;color:white !important;background-image:url(/info/block-title.png);display:block;height:19px;width:180px;line-height:19px;font-size:12px;}
.third-block-links:hover {background-position: 0px -19px;}
$MYINF_X$ -
заменяем на свой номер