portfoliopost
FDteam-portf
freepost
Скрипт смены автоматической окраски дизайна в зависимости от времени суток или месяца.
Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.Описание
Этот скрипт предполагает наличие общей разметки у всех установленных стилей, смену стилевых настроек отдельных элементов (как правило, это цвета фона, шрифта и рамок, картинки бэкграунда - см. пример таких дизайнов в скриншоте выше) в зависимости от времени суток.Схож со скриптом Установка нескольких стилей в "свой стиль" без подгрузки файлов (по сути, является его предком), однако отличается тем, что варианты окраски дизайна меняются автоматически, в зависимости от того, во сколько посещается форум или сайт. (Скрипт ориентируется на часовой пояс пользователя.)
На сервисе mybb.ru и его партнёрах код скрипта устанавливается в блок "HTML верх" (в разделе "Формы"):
На других платформах код может быть установлен в поле, поддерживающее html-код. Требуется подключение библиотеки jQuery выше места расположения данного кода!
Дневной стиль, используемый по умолчанию, пишется как обычно, без указания стилевого класса, и размещается в полях "своего стиля" (или в в другом месте, где находятся css-коды вашего дизайна). Для изменения настроек отдельных элементов ночного стиля нужно добавить эти настройки в стиль ниже основных с добавлением в начало селектора класса .night.
Допустим, вы собираетесь использовать два стиля: дневной и ночной с классом .night. По умолчанию пишем "дневной" стиль. Все его настройки прописываются как обычно. По умолчанию вы прописываете фон и цвет шрифта для какого-то элемента так, как он должен выглядеть в дневном стиле. Для примера возьмём блок объявления:
Для того, чтобы эти параметры изменились в ночном стиле, дописываем чуть ниже, добавив в начало селектора класс .night:
Исключение составляет элемент body, для него стилевой селектор будет выглядеть так: body.night {}.
Временной промежуток, во время которого устанавливается ночная окраска, находится в сточке скрипта:
if (totd<5||totd>=21) $('body').addClass('night');
То есть, чтобы изменить время, когда у вас будет ночь, достаточно поменять цифры красным (они обозначают часы).
Если нужно больше двух вариантов перекрасок в течение суток, используем такой скрипт:
В нём используется 4 класса: .morning, .day, .evening, .night для разных промежутков времени. Классов может быть больше или меньше, но нужно учитывать временные промежутки, все неучтённые часы получают класс .night:
else $('body').addClass('night');
Если нужна автоматическая смена дизайна в зависимости от времени года, используйте этот скрипт:
Месяца обозначаются цифрами и считаются от нуля до 11: Январь - 0, февраль - 1, март - 2, апрель - 3, май - 4, июнь - 5, июль - 6, август - 7, сентябрь - 8, октябрь - 9, ноябрь - 10, декабрь - 11.
ВАЖНО! Если у вас уже установлены скрипты, изменяющие класс body в зависимости от действий пользователя (например, Установка нескольких стилей в "свой стиль" без подгрузки файлов) - можно поменять селектор в скрипте с body на html или #pun_wrap, чтобы скрипты не конфликтовали, пересекаясь на одном элементе. Помните, что выбранный вами селектор, которому будет присваиваться нужный для стилизации класс, должен находиться в разметке выше места расположения скрипта!
- Подпись автора
Отвечаю на вопросы вот здесь | Мой блог
"Никогда не сомневайтесь в себе и любите каждую свою работу, даже если она кажется вам грязью на окне. Через это окно люди смотрят на мир, тогда как разводы замечаете только вы." © Николай Ободников. "Лиллехейм. Волчий ветер