Автор

02 01.2018
Смена стиля по времени суток и по дате

Смена стиля по времени суток и по дате


Буквально перед новым годом задался целью автоматизировать свой сайт, а именно сделать так чтобы с 15 декабря до 15 января работал один стиль CSS, а в остальное время другой!

Чётко того что именно мне надо было не нашел, но нашел вот такой вариант смены стиля по времени суток!

Итак, что нам потребуется. Во-первых, возьмите из папки вашей темы файл style.css и создайте с него 4 копии с такими названиями: styles_zakat.css, styles_rassvet.css, styles_den.css, styles_noch.css.
Вы можете сразу же внести изменения по вкусу в каждый стиль, если вдруг непонятен будет транслит:
styles_zakat.css - закат,
styles_rassvet.css - рассвет,
styles_den.css - день,
styles_noch.css - ночь.

Залейте все эти файлы в папку css вашего шаблона. 

Дублировать весь файл не обязательно! Можно оставить свой "дефолтный" который будет прописан самый первый, а потом скриптом подгружать именно нужные изменения!)

 

JavaScript

Подключаем скрипт

<script type="text/javascript">// <![CDATA[
function change(css)
{document.write('<link href=\"\/templates\/_ваш стиль_\/css\/styles'+css+'.css\" rel=\"stylesheet\">');}
var h=(new Date()).getHours();
if (h > 23 || h <7) change('_noch');//ночь
if (h > 6 && h < 12) change('_rassvet');//утро
if (h > 11 && h < 19) change('_den');//день
if (h > 18 && h < 24) change('_zakat');//вечер
// ]]></script>

Вот собственно и всё! Скрипт работает как надо! Но моей задачей было смена основного дизайна на новогодний. В принципе больших изменений в скрипте делать не надо. Вот мой пример:

<script type="text/javascript">
function change(css)
{document.write('<link href=\"\/templates\/_ваш стиль_\/css\/styles'+css+'.css\" rel=\"stylesheet\">');}
var now = new Date(),
month = now.getMonth(),
day = now.getDate();
if( (month == 11 && day >=15) || (month == 0 && day <= 15) ) change('_novogodniy');
if( (month == 0 && day >=16) || (month == 11 && day <= 14) ) change('_osnovnoy');
</script>

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеJS

10 04.2013
Смена стиля по времени суток и по дате

Слайдер с различными эффектами переходов (7 различных эффектов, в том числе 3D). Адаптер представляет собой легкий контент-слайдер, простой интерфейс для разработчиков и создания 2D или 3D слайд анимации переходов.
Добавлена поддержка 3D для webkit и Mozilla, всех других браузерах будет запасной вариант изящно простой fade перехода при использовании 3D-эффекты.
Все 2D переходы между слайдами были протестированы в IE6+, и всех других современных браузерах.


28 11.2014
Смена стиля по времени суток и по дате

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


31 03.2013
Смена стиля по времени суток и по дате

Красивый дизайн всегда положительно сказывается на его репутации. Ведь не секрет, если дизайн плох, то и находиться на таком ресурсе не вызывает интереса. Недавно в одном из премиум шаблонов заметил интересное меню, которое отлично вписывается в темный дизайн сайта. Эта навигация весьма привлекательная, и меня она заинтересовала. Одним из преимуществ такого меню является то, что оно написано полностью на css. Идея меню состоит в том, что ползунок, который находиться над верхней частью меню, плавно скользит к активным пунктам навигации.


25 01.2018
Смена стиля по времени суток и по дате

Тенденции в области инфографического дизайна 2018, безусловно, будут следовать правилам графического дизайна 2018 года. Однако инфографика имеет эту специфическую и обязательную функцию, которую вы должны иметь в виду при проектировании: информации.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close