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

·	28.09.2013, 18:43
Шаг 1 - Установим HTML: Для начала на следует создать информер популярных новостей, для этого идём в Админ панель => инструменты => Информеры и создаём информер со следующими параметрами: Раздел: Новости сайта Тип данных: Материал Способ сортировки: Количество просмотров A Количество материалов: 7 Количество колонок: 1 отлично, теперь заходим в его шаблон, удаляем старый html код и устанавливаем следующий: HTML `<div class="news_top$NUMBER$"> <a href="$ENTRY_URL$" title="$TITLE$"> if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$">else>if($IMG_URL1$)?><img src="$IMG_URL1$">endif?>endif?> <span> if(len($TITLE$)>28)?>substr($TITLE$,0,27)?>...else?>$TITLE$endif?> </span> </a> </div>` -обратите внимание, что классу news_top я прописал системную переменную uCoz, которая будет отображать номер материала, тем самым мы сможем изменить седьмой вид изображение по всей ширине основной ячейки div - плюс я прописал заголовку новости ограничения символов, вы сможете подстроить эту функцию под себя Теперь создадим основной контейнер div и поместим в него выше созданный информер: JS `<div id="content_new_news"> $MYINF_1$</div>` Шаг 2 - Установим CSS: Наш с вами информер популярных новостей готов, пропишем ему основные css стили: CSS-Code /* Новый вид информера популярных новостей ------------------------------------------/ #content_new_news { width:240px; overflow:hidden; padding: 10px 0px 10px 0px; } #content_new_news a:link, #content_new_news a:visited {color:#bababa;} #content_new_news a:hover {color:#60a62c;} #content_new_news div { float:left; width:110px; height:90px; overflow:hidden; position:relative; margin: 5px 5px 5px 5px; } #content_new_news span { float:left; width:100%; left: 0px; bottom: 0px; position:absolute; background: url(http://ucoz-helper.ucoz.com/vid_info/pix_title.png) repeat; padding: 2px 5px 2px 5px; font: 9px Verdana,Arial,Helvetica, sans-serif; } .news_top7 { float:left; text-align:center; width:230px!important; height:85px!important; } Обратите внимания, что я не прописывал классы в самом информере из-за чего код становиться легче, поэтому со всеми элементами в основной ячейки div стили будут работать именно через него, а именно через идентификатор content_new_news*
1 2 3 4 5 Категория: Вид информеров \| Добавил: tashkent97
Просмотров: 543 \| Загрузок: 357 \| Источник: center-dm.ru \| Рейтинг: 5.0/1

Всего комментариев: 0