).
Чего мы пытаемся достичь?
Нам нужно простейшее сообщение в заголовке форума. Вам, как администратору форума, наверняка не раз было нужно известить пользователей форума о чем-то важном. Например, временная недоступность форума, изменения в правилах форума, новые установленные на форуме моды и т.д. Тема, созданная на форуме как глобальное объявление, не всегда удовлетворяет этим нуждам. Вместо создания такой темы можно использовать цветное сообщение в заголовке форума, которое будет отлично видно каждому пользователю форума и сразу же привлечет к себе внимание. Пользователь имеет возможность закрыть это сообщение, и больше оно для данного пользователя отображаться не будет.
Подготовка.
Для начала вам, конечно же, нужен любой текстовый редактор, поддерживающий редактирование файлов в кодировке UTF-8 без BOM. Еще вам понадобится архивчик, содержащий картинки, изображающие крестик, используемый для закрытия глобального объявления, а так же файл, ответственный за хранение информации о просмотре объявления.
Шаг 1. Редактирование HTML.
Первым делом нам надо задействовать jQuery, а после этого прописать глобальное объявление.
Открываем
/styles/prosilver/template/overall_header.html. Находим:Код: Выделить всё
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>Код: Выделить всё
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>jquery.min.js и скопировал его в ту же папку, где лежит файл jquery.cookie.js, чтобы каждый раз не тянуть его заново с сайта Гоогла. Но это как кому нравится.Объявление в самом верху форума.
Все в том же файле
/styles/prosilver/template/overall_header.html находим:Код: Выделить всё
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">Код: Выделить всё
<div class="global-notice notice-top green">
<strong>Внимание:</strong> это глобальное объявление о таком-то событии.
<a class="cross" href="#">Закрыть</a>
</div>Объявление под шапкой форума.
И снова в файле
/styles/prosilver/template/overall_header.html находим:Код: Выделить всё
<a name="start_here"></a>Код: Выделить всё
<br />
<div class="global-notice green">
<strong>Внимание:</strong> это глобальное объявление о таком-то событии.
<a class="cross" href="#">Закрыть</a>
</div>Шаг 2. Редактирование CSS.
Нам необходимо описать несколько цветовых схем для глобального объявления. В данном примере представлены четыре основные цветовые схемы. Обладая элементарными знаниями в CSS, вы можете добавить свои собственные цветовые схемы.
Открываем файл
/styles/prosilver/theme/colours.css, находим:Код: Выделить всё
input.disabled {
color: #666666;
}Код: Выделить всё
.global-notice {
padding: 12px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin-bottom: 10px;
border: 1px solid;
-moz-box-shadow: inset 0 -1px #FFFFFF;
}
.global-notice strong {
color: #000000;
}
.notice-top {
border-top: none;
border-left: none;
border-right: none;
margin-top: -12px;
}
.blue {
background-color: #e5f4ff;
border-color: #a7cee2;
color: #004b90;
}
.red {
background-color: #ffe5e5;
border-color: #e2a8a8;
color: #900000;
}
.green {
background-color: #e4ffdf;
border-color: #b8dfb8;
color: #3a6e31;
}
.yellow {
background-color: #fdffe5;
border-color: #dfe2a7;
color: #678801;
}
.cross {
float: right;
width: 12px;
height: 12px;
background: no-repeat 50% bottom;
text-indent: -9999px;
display: block;
outline: none;
}
.blue .cross {
background-image: url("{T_THEME_PATH}/images/blue-cross.gif");
}
.red .cross {
background-image: url("{T_THEME_PATH}/images/red-cross.gif");
}
.green .cross {
background-image: url("{T_THEME_PATH}/images/green-cross.gif");
}
.yellow .cross {
background-image: url("{T_THEME_PATH}/images/yellow-cross.gif");
}Шаг 3. Задействование jQuery.
Сделаем так, чтобы глобальное объявление пропадало не моментально, а с эффектом угасания, а так же убедимся в том, что объявление не появится снова после обновления страницы.
Открываем файл
/styles/prosilver/template/overall_header.html, ищем:Код: Выделить всё
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>Код: Выделить всё
<script type="text/javascript">
$(document).ready(function() {
$("a.cross").click(function() {
$(".global-notice").fadeOut();
$.cookie('noticeState', 'hidden', { expires: 3, path: '/'});
});
var noticeState = $.cookie('noticeState');
if(noticeState == 'hidden') {
$(".global-notice").hide();
};
});
</script>Важная информация.
Данный скрипт достаточно прост, поэтому может быть использован только один раз. Единственный способ использовать скрипт для отображения нескольких сообщений одновременно (причем без использования эффекта угасания при нажатии крестика) — не использовать крестик для закрытия сообщений. Нужно просто убрать соответствующие строки кода, отвечающие за этот крестик. Предполагается, что глобальные объявления являются временными, поэтому по умолчанию установлена планка в 3 дня для их истечения и автоматического пропадания из поля зрения. Число дней можно увеличить или уменьшить в файле
overall_header.html:Код: Выделить всё
$.cookie('noticeState', 'hidden', { expires: 3, path: '/'});overall_header.html:Код: Выделить всё
<div class="global-notice notice-top green"></div>Примечание.
Я не являюсь изначальным автором этой модификации. Я просто перевел оригинальную статью на русский язык, добавив соответствующее этому форуму оформление. Оригинал статьи находится здесь.
