Мануал по внедрению дизайна в PHP-FUSION

«Мануал по внедрению дизайна в PHP-FUSION»

Вашему вниманию предлагается «Мануал по внедрению дизайна в PHP-FUSION». Это мануал для веб-мастеров. Мануал удобен тем, что вся нужная информация собрана в одном файле, достаточно просто скачать мануал.

Где скачать обновление мануала

Скачать обновления данного мануала можно в категории Мануалы для разработчиков «PHP-Fusion», а другую информацию по PHP-Fusion можно найти в разделе [+] CMS «PHP-Fusion» для разработчиков на Vveb.ws

Что Вы думаете о таком мануале?

Мне будут очень интересны Ваши замечания и дополнения по данному мануалу (их Вы можете написать в комментариях к скачиваемому файлу). Дальше мануал будет развиваться и дополняться.

Что бы Вы хотели увидеть в мануале?

Какие возникли вопросы?

Что расписать подробнее?

Расскажите пользователям своего сайта о таком мануале

Если у Вас есть свой сайт, Вы може поставить ссылку, например такую:

Мануалы по PHP-Fusion от Vveb.ws

<a href="http://vveb.ws/viewpage.php?page_id=10" target="_blank">&laquo;Мануалы по PHP-Fusion от Vveb.ws</a>

И посетители Вашего сайта всегда смогут прочесть интересную информацию в одном файле. Вам не нужно копировать страницы моего сайта на свой, вставлять ссылку на источник, следить за обновлениями. Вы можете просто поставить ссылку на сайт, где мануал(ы) можно скачать.


1) Установка готовых тем оформления

1. Как мне сменить тему оформления?

Установка шаблона в php-Fusion

  1. Скачиваем и распаковываем архив с шаблоном.
  2. Загружаем распакованную папку с файлами шаблона на сервер в папку /themes/.
  3. Авторизуемся в панели администратора.
  4. Переходим в раздел “Администрирование системы” -> “Главные установки” => Схема сайта.
  5. В разделе “Главные установки” в поле “Схема сайта” выбираем закачанный шаблон. в выпадающем меню будет список доступных тем оформления.
  6. После того, как выберете цветовую схему (шаблон), нажмите на кнопку “Сохранить установки”.

2. Как мне добавить тему оформления?

- Вам необходимо имеющуюся папку с файлами темы добавить в каталог themes,

- Далее проделайте все действия с вопроса №1 данной темы!

3. После смены темы оформления на сайте белая страница?

- проверте расположение файлов в папке с темой оформления, зачастую бывает что после извлечения темы из архива получается папка в папке. например был архив Similitude06.zip после распаковке получилось Similitude06/Similitude06/файлы_темы

- ошибка регистра: данная ошибка бывает изза FTP клиентов. Например у Вас на компьютере есть папка с темой Similitude06 после загрузки через FTP темы на сервер может оказаться следующее similitude06

- папка с файлами темы содержит битые (поврежденные) файлы. Для решения данной проблемы залейте в папку с установленной темой заведомо рабочие файлы от любой темы.

4. Я настроил сайт на локальном сервере, залил на хостинг и теперь белая страница, что делать?

- Скорее всего ошибка регистра: данная ошибка бывает из-за FTP клиентов. Например у Вас на компьютере есть папка с темой Similitude06 после загрузки через FTP темы на сервер может оказаться следующее similitude06

источник 1: Форум PHP-Fusion SF ---> [FAQ] Установка тем оформления

источник 2: pronets.ru - Установка шаблона в php-Fusion


2) Как устроены темы оформления в PHP-Fusion?

Общая схема сайта

Начнем с самой общей информации: сайт на основе PHP-Fusion состоит из пяти основных частей: заголовка (header), левой и правой части (left & right side), подвала (footer) и центральной части, находящейся по середине между четырьмя остальными.

В состав заголовка входит все, что вы видите на странице от самого верха и до строчки со ссылками и датой, включительно. Подвал это пространство внизу сайта, где содержатся копирайты и встроенный счетчик. Левая и правая часть - это узкие квертикальные колонки по бокам, содержащие панели, (Небольшие таблички сходного вида, но каждая со своим заголовком, содержимым и предназначением. Например панель "Навигация", панель "Мини-чат") расположенные одна под другой.

Надо заметить, что эти колонки существуют постольку, поскольку существуют панели расположенные в них. Как вы знаете, администратор может удалять, добавлять панели, временно отключать видимость и регулировать доступ к панелям для разных групп пользователей. Так вот если администратор отключит все панели правой колонки, то колонка, как бы, исчезнет (безо всякого вмешательства в программный код!). Или еще пример: допустим, в левой колонке администратор расположил только панели с доступом "пользователь". Тогда незарегистрированный гость увидит сайт с одной (правой) колонкой и не даже не будет подозревать, что зарегистрированный пользователь видит этот сайт с двумя колонками.

Из чего состоит тема

Каждая тема для сайта на основе PHP-Fusion представляет собой отдельную папку, расположеную в папке themеs. Название папки задает одновременно и название темы, которое открывается в списке выбора тем в "главных настройках" и в пользовательском профиле. Например присутствие на вашем сайте папки themes/Similitude приводит к появлению в этом списке темы "Similitude", если вы создадите папку themes/My_Theme, в этот список добавится тема "My_Theme". Но, как вы догадываетесь, просто создать папку недостаточно. Нужно ее чем-то наполнить. Чем же?

Внутри папки с вашей темой обязательно должен находиться файл theme.php, это главный файл темы. В принципе, можно этим и ограничиться, но обычно в этой папке лежит еще файл style.css, папки images и forum. Мы еще вернемся к этим файлам и папкам, а пока просто скажем, что style.css содержит определения стилей (внешнего вида элементов сайта), в папке images лежат графические файлы используемые в дизайне (всякие точечки, квадратики, фоны, распорки для таблиц), в папке forum лежат графические изображения кнопок форума ("new thread", "edit" и т.д.).

Мы сказали, что theme.php - главный файл темы, почему мы его так назвали и что внем должно находиться мы скоро увидим, а пока разебермся, как движок работает с темой.

Как движок работает с темой

Основная задача движка - вывести из базы данных некую информацию на страничку, задача темы при этом - обеспечить желаемый внешний вид этого вывода. Как мы уже видели, сайт на PHP-Fusion имеет блочную структуру. Есть два больших блока имеющих самостоятельное устройство заголовок и подвал. И есть левая/правая колонки, а так же центр, содержание и вид которых определяется наличием, внешним видом и содержанием более мелких блоков.

Что я имею в виду? Обратите внимание: заголовок и подвал выглядят одинаково на всех страницах сайта, а содержимое центра, естественно изменяется. Хотя левая и правая колонки тоже обычно одинаковы на всех страницах, но тем не менее мы легко можем изменить их содержимое, убрав или добавив панель. Если присмотреться, можно увидеть, что панели живут не только в боковых колонках, что в центральной части содержимое тоже обычно заключено в панели. Или таблицы.

Основной принцип устройства HTML состоит в том, что существую теги открывающие (<table>) и закрывающие (</table>). Идея темы состоит в дальнейшем развитии этого принципа: мы выделяем фрагмент HTML-кода образущий начало целого блока (например: "<table><tr><td>") и фрагмент закрывающего кода: "</td><tr></table>", а между ними можем разместить любое содержимое. В данном случае получается простая таблица с одной ячейкой.

Тепеперь ответим на главный вопрос этой части, как же движок работает с темой?

В общем случае это выглядит так: сначала движок вызывает функцию, написанную на языке PHP, которая "рисует" начало блока (HTML-код), затем движок выводит содержимое данного блока а затем вызывает функцию "рисования" завершающей части блока. Врочем, некоторые функции самостоятельно рисуют и начало, и конец, и встраивают содержимое в середину. Главное, что этими функциями создается обрамление для содержимого страницы или отдельного блока.

Откуда же движок знает, что и когда ему рисовать? Ответ на этот вопрос раскроет нам и тайну содержимого файла theme.php.

Содержимое theme.php

Все функции, отвечающие за "рисование" элементов оформления сайта находятся в файле theme.php. Именно оттуда, по мере надобности, движок вызвает эти функции. В настоящий момент этих функци всего 11. Во всех темах они имеют одинаковые названия и ОБЯЗАТЕЛЬНО, все 11 штук, должны быть описаны в файле theme.php. Об их назначени можно судить по их названиям, так что сложностей возникать не должно. Вот эти 11 функций:

function render_header($header_content) - эта функция рисует заголовок сайта. Она вызывается из файла (если вам это интересно) subheader.php, где в качестве параметра ей передается код логотипа сайта. Если хотие изменить внешний вид шапки, надо изменить эту функцию в файле theme.php, если хотите вместо логотипа выводить что-то другое, или добавить в шапку код банера - изменяйте параметр вызова данной функции в subheader.php.

function render_footer($license=false) - эта функция выводит подвал сайта, со всеми копирайтам, счетчиками и прочим.

function render_news($subject, $news, $info) - определяет внешний вид каждой новости, грубо говоря - рисует вокруг текста новости таблицу, код которой задается в тексте функции и пририсовывает строчку "автор", "дата", "просмотры" и все такое.

function render_article($subject, $article, $info) - делает в точности то же самое, но для статей (отсюда вывод - статьи могут внешне достаточно сильно отличаться от новостей!).

function openside($title) - выводит открывающую, верхнюю часть панели (прямоугольного блока, размещаемого (обычно, но не только) в боковых колонках. В качестве $title передается заголовок панели.

function closeside() завершает панель, начатую предыдущей функцией. Между вызовами функция выводится содержимое панели.

Для понимания применения этих двух функций, попытайтесь из Панели админинстратора создать новую панель и посмотрите на предложенный вам шаблон кода.

function opensidex($title,$state="on") и

function closesidex() - делают то же самое, что две предыдущие функции, только панель получается хитрая - она может закрываться и раскрываться. Если при вызове функции в качестве второго параметра передается строка "on", панель будет изначально открыта, если "off" - закрыта. ОБратите внимание функции должны обязательно использоваться попарно. То есть если вызывается openside(), то в конце обязательно надо вызвать closeside(), если opensidex(), то в конце - closesidex().

function opentable($title) и

function closetable() начинают и завершают таблицу в которую обычно помещается ВСЕ содержимое центральной части. На Ваших собственных страницах никто не мешает вам использовать любое количество попарных вызовов этих функций для формирования смысловых блоков. В этом случае пригодится последняя функция:

function tablebreak() - код выводимый этой функцией разделяет блоки сайта (обычно выводя между ними пустую таблицу, отсюда и название).

Обобщение

Итак, мы рассмотрели все 11 функций файла themes.php. Для тех кто не врубился: именно эти функции рисуют на странице все элементы дизайна. Дизайнерский код прописан прямо в этих функциях и выводится оператором PHP echo. пример:

echo "<table align='center' cellspacing='0' cellpadding='0' width='100%'>

<tr><td>Что-то там..</td></tr></table>";

Движок на основных страницах, существующих на сайте сразу после установки, вызывает эти функции самостоятельно. Если вы создаете свою собственную страницу или панельку, об их вызове Вы должны позаботиться сами.

Зачем нужен файл style.css

Для управления внешним видом страницы, кроме файла theme.php, PHP-Fusion использует файл style.css. Если первый файл управляет структурой, как бы "чертами лица" страницы, то второй отвечает за "макияж" - цвета фона, текста, заголовков, ссылок, размер шрифта и все такое прочее.

В файле style.css располагаются описания различных стилей используемых на страницах сайта. Большинство из них имеют стандартные, общие для всех тем названия. Самы простой и эффективный способ разобраться с тем какой стиль за что отвечает, это открыть страничку сайта в браузере и посмотреть в ее исходный HTML-код. Оттуда и можно заключить следующее (содрано с php-fusion.co.uk):

body {

(...)

}

- определяет общий вид темы (шрифт по умолчанию, размер, отступы и т.д.)

a {

(...)

}

a:hover {

(...)

}

a.side {

(...)

}

a:hover.side {

(...)

}

a.white {

(...)

}

a:hover.white {

(...)

}

- от этих стилей зависит облик и поведение ссылок на Вашем сайте

hr {

(...)

}

hr.side-hr {

(...)

}

- устанавливает размеры и цвет линй выводимых тэгом by <hr>

.button {

(...)

}

- фон, шрифт, окантовка кнопок.

.textbox {

(...)

}

- внешний вид полей ввода (пароля, например)

.main-bg {

(...)

}

.side-border-left {

(...)

}

.side-border-right {

(...)

}

- здесь задаем отступы от границ (в пикселах) от верха, низа, левой и правой границ

.tbl-border {

(...)

}

.tbl {

(...)

}

.tbl1 {

(...)

}

.tbl2 {

(...)

}

- тут определяется облик таблиц сайта, какие, например, используются на страницах форума

.quote {

(...)

}

- внешний вид процитированного (на форуме) текста

.poll {

(...)

}

- это часть относится к голосованиям

.comment-name {

(...)

}

- внешний вид в котором будут представлени ники авторов комментариев

.shoutboxname {

(...)

}

.shoutbox {

(...)

}

.shoutboxdate {

(...)

}

- определяет шрифт, цвета ников и даты в мини-чате

.small {

(...)

}

.small2 {

(...)

}

- облик текста отмеченного, как small или small2

.gallery {

(...)

}

.gallery img {

(...)

}

.gallery:hover img {

(...)

}

img.activegallery {

(...)

}

- определеяет цвета рамок, и границы фотоальбома.

Вот основные используемые стили. В принципе тема может использовать и свои собсвенные, которые в этом случае слудет добавить в тот же файл style.css.

Но внешний вид элементов дизайна определяется не только стилевыми таблицами, часто необходима графика, как же быть?

Графические элементы темы (картинки)

Все графические файлы, используемые в теме складываются в её же подпапку images и извлекаются оттуда функциями описанными в theme.php следующи способом:

<img src='".THEME."images/nav-left.gif'>

То есть с использованием определенной (без Вашего участия) в глобальном модуле константы, указывающей путь к текущей теме.

Графика форума

Графика форума сваливается в подпапку forum. Имейте в виду - тут речь идет только о кнопках ( все прочее - в images). Расстановка кнопок на нужный места производится движком автоматически, на основании "говорящих" предопределенных названий файлов. Загляните в любую тему и сами все поймете.

Несколько дополнительных деталей

В начало темы добавлется неколько строк для предотвращения прямого вызова скрипта, для подключния файла со вспомогательными функциямии описания переменных, кторые определяют, например ширину сайта в целом и его отдельных колонок, чтобы не расползались, а так же цвет фона всей страницы и текста по умолчанию:

if (!defined("IN_FUSION")) { header("Location: ../../index.php"); exit; }

require_once INCLUDES."theme_functions_include.php";

// theme settings

$body_text = "#000000";

$body_bg = "#FFFFFF";

$theme_width = "100%";

$theme_width_l = "170";

$theme_width_r = "170";

Затем они используются в функциях:

function render_header($header_content) {

global $theme_width,$settings;

echo "<table align='center' style='background-image:url(".THEME."images/header-center.gif)' border='0' cellpadding='0' cellspacing='0' width='$theme_width'>";

echo "<tr><td width='15'><img src='".THEME."images/header-left.gif' width='22' height='82'></td>";

Разработчики сняли часть рутинной работы с программиста/дизайнера темы предоставив для использования несколько готовых функций (начиная c PHP-Fusion v6.00.300), они описаны в файле который мы подключили методом require_once. Это функции вывода даты, копирайтов, нижней части новостей (автор, дата, комментарии), ссылок в заголовке сайта и других. Теперь не обязательно прописывать вручную вывод этих данных.

С полным списком этих функций можно ознакомиться прсмотрев файл includes/theme_functions_include.php:

showsublinks($sep="·",$)

showsubdate()

newsposter($info,$sep="",$)

newsopts($info,$sep,$)

articleposter($info,$sep="",$)

articleopts($info,$sep)

openform($item_type,$item_id)

closeform($item_type,$item_id)

showcopyright($)

showcounter()

panelbutton($state,$bname)

Эти функци появились недавно но их можно и нужно использовать в ваших темах. Примеры их использования можно подглядеть в темах Prime, Phoenix, Showcase, Similitude и Simplicity.

Заключение

Не знаю, что еще вам рассказать, поэтому - краткое резюме:

Тема это папка с файлами. Файл theme.php в ней является скриптом написанным на PHP и содержащим описание функций, которые может вызывать для отображения сайта главный движок. При выводе используется служебная графика из папки images, и стили описанные в файле style.css. Кнопки форума берутся из папки forum, их назанчение определяется по названиям файлов.

http://www.towson.ru/readarticle.php?article_id=1

др. источники:
omna.info
sport.kraslan.ru,
pronets.ru - Устройство тем в php-Fusion,
rus-phpfusion.com - Устройство тем в Php-Fusion


3) Изменение приветствия сайта

Для того, чтобы изменить приветствие сайта:

  1. Авторизуемся в панели администратора.
  2. Переходим в раздел “Администрирование системы” -> “Главные установки”.
  3. В разделе “Главные установки” в поле “Приветствие сайта” введите новое приветствие сайта или оставьте пустым, если не нужно.

pronets.ru - Изменение приветствия сайта


4) Кнопки под шапкой

Вопрос:
Как можно вместо обычных ссылок под шапкой вставить картинки-кнопки?
Обычно под шапкой ссылки навигации, мне нужно сделать туда картинки-кнопки.

Ответ:

Вот пример тебе,вставляй эту таблицу по центу и добавь еще сколько хочушь картинок

<div align='center'>
<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<td width='74'><p align='center'><font size='1'></a>
<a title='Написать E-mail письмо администрации сайта!' href='".BASEDIR."contact.php'>
<img src='".THEME."images/resimli_menu/iletisim.gif' border='0' width='32' height='32' /><br><b>
Написать нам</b></a></font></p>
</td>
<td width='74'><p align='center'><font size='1'></a>
<a title='Часто задаваемые вопросы!' href='".BASEDIR."faq.php'>
<img src='".THEME."images/resimli_menu/bilgi.gif' border='0' width='32' height='32' /><br><b>
F.A.Q</b></a></font></p>
</td>
</table>

Это пример с моего сайта www.amxserv.net

источник: http://rus-phpfusion.com/forum/viewthread.php?forum_id=6&thread_id=1696&pid=13737


5) Как встроить флешку в шапку темы?

Вариант 1: echo

можешь попробовать так - пишешь

echo "здесь вставляешь свой код html";

только код внутри не должен содержать кавычки двойные, замени их на одинарные или ставь перед каждой кавычкой обратный слэш \ (пример смотрите ниже)

Вариант 2: разрыв PHP

Для того чтобы что-то вставить html код в PHP необходимо разрывать его

?> html код <?php

Вариант 3: header.php

тогда можно вставить этот же код в header.php

после строчки

echo "<script type='text/javascript' src='".INCLUDES."jquery.js'></script>\n";

вставь

echo "<embed src='Адрес Flash' pluginspage='http://www.macromedia.com/
shockwave/download/' type='application/x-shockwave-flash'
width='100%' height='100%'>
</embed>";

Вариант 4: include или require

вынести код шапки в отдельный файл, если он большой

include("./themes/default/top.htm");

источник: http://php-fusion7.ru/forum/viewthread.php?thread_id=691


Как сделать разный шаблон для админки и сайта?

Я хочу рассказать о том, как я сделал разный шаблон для админки и сайта.

Я сделал сложный дизайн, вместо 3 колонок сделал 7. Я сделал оригинальный дизайн для PHP-Fusion 6 SF для сайта http://blacksotnya.com/ , но мне пришлось увеличить количество ячеек в основной таблице (левая, правая и центральная) с трёх до 7ми (дополнительные ячейки текстур между ними). Для сайта в хэдэдре и футэре я сделал таблицу нормально. Но таблица на 7 стоблцов начинается в хэдэре, а заканчивается в футэре.

Я изменил столбцы в side_left.php и side_right.php, ну и, разумеется, theme.php

Естественно, в админке всё съехало. Админка рассчитана на обычный трёхколоночный дизайн.

Встал вопрос: как сделать для админки и для сайта разные шаблоны ? например, поставить для админки любой стандартный шаблон, если дизайн сайта сильно отличается от стандартного.

1) Я создал новые файлы для стиля админки

subheader-adm.php - копии оригинальных

maincore-adm.php - копии оригинальных

themes/Paradox/theme-adm.php - это файл любого стандартного трёхколоночного шаблона для админки

themes/Paradox/styles-adm.css - это файл любого стандартного трёхколоночного шаблона для админки

ну и естественно папку [images] для админки можно переименовать, или переименовать картинки для стиля админки

2) В файлах

subheader-adm.php

maincore-adm.php

и ВО ВСЕХ ФАЙЛАХ PHP папки [administration]

надо заменить:

styles.css | —> | styles-adm.css
theme.php | —> | theme-adm.php
subheader.php | —> | subheader-adm.php
maincore.php | —> | maincore-adm.php

можно через автозамену

названия данных файлов встречаются, например, так:

THEMES.$userdata['user_theme']."/theme-adm.php"

или строки 10-20 (начало php-файла)

require_once "../maincore-adm.php";

require_once BASEDIR."subheader-adm.php";

или в теле файла

моя статья на rus-phpfusion.com - «Как я сделал разный шаблон для админки и сайта»


Эффект прозрачности для изображений

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

Приведу пример реализации данного, достаточно интересного и необычного эффекта без помощи javascript а исключительно на CSS.

1. Открываем /themes/ваш_шаблон/styles.css

2. Добавляем в самом низу:

#banners a img {

opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);

}

#banners a:hover img {

opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);

}

3. Все картинки, которые хотим сделать с эффектом прозрачности заключаем в div:

<div id="banners">Картинки желаемые</div>

P.S. Нашел на одном сайте поддержки(не фужин). На фужине не проверял, но думаю будет работать все равно.

http://php-fusion7.ru/forum/viewthread.php?thread_id=615


Кроссбраузерная подсветка счетчиков

Все мы видели счетчики, которые подсвечиваются при наведении мышки, в основном эффект достигается с помощью использования фильтров и работает только в IE. Неужели нет простого и надежного способа заставить этот эффект работать во всех браузерах.

Первый раз когда я увидел это вопрос на форуме, я подумал об использовании полупрозрачных png. Должен признать, что я был не прав, многие браузеры поддерживают свойства позволяющие придать прозрачность элементам разметки.

Очень простой способ

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

a:hover img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +,
Safari 1.2+, Opera 9 */
filter: alpha(opacity=60); /* IE 5.5+*/
}

Самый простой вариант. Выглядит одинаково в IE, Opera, FireFox. Пример использования, можно увидеть тут.

Для тех, у кого не в меру фантазия

Если вы хотите сделать со счетчиком что-то очень оригинальное можете все таки использовать полупрозрачные png.

Изменения, которые мы должны внести в код счетчика, выделены цветом, как видите немного.

Разрыв строки обозначен символом »

<!--begin of Top100 logo--> <div class="counter"><a href="http://top100.rambler.ru/top100/"> <img src="http://top100-inferno.rambler.ru/%20»<br%20/>top100/banner-88x31-rambler-gray2.gif" alt="" /> alt="Rambler's Top100" width="88" height="31" border="0"/></a><!--end of Top100 logo -->

Дальше нам нужно разместить span над изображением счетчика и в качестве фона использовать маску, которую мы только что создали.

div.counter {
position:relative; // чтобы span позиционировался
// относительно этого элемента
width:88px;
height:31px;
}

.counter a { display:block; }

.counter a span {
position:absolute; // используем абсолютное
// позиционирование чтобы разместить
// span над изображением счетчика
top:0px;
left:0px;
width:88px;
height:31px;
display:none; // скрываем span
background:url(mask.png);
}

.counter a:hover span {
display:block; // показываем span
// при наведении мышки на счетчик
}

* html .counter a:hover span {
display:none; // IE6 не поддерживает полупрозрачные png…
}

* html .counter a:hover img {
filter: alpha(opacity=60); // …заменяем их фильтром
}

Более интересный эффект к сожалению в IE6 не работает, но поскольку пользователи уже начали понемногу переходить на IE7 и другие нормальные браузеры, то этот вариант тоже имеет право на существование.Пример использования, можно увидеть тут.

pronets.ru - Кроссбраузерная подсветка счетчиков