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

+57
3.76K
Доброго времени суток!
Я начинаю свой блог самым первым постом и надеюсь он вас порадует! :)
Здесь я покажу вам скрипт, который и сама использую. Это скрипт смены стиля. Мой пост — продолжение ЭТОЙ темы. Я решила всё-таки сделать не смену шапки, а смену разных стилей, переписав найденный мой коротенький Java скриптик. Это коротенькое и быстрое решение. Так же специально для сообщества я выкладываю файл с нарисованными специально для этого поста шапками сайта. :)
Вам подойдёт этот способ, если вы хотите сменить в зависимости от времени ТОЛЬКО style.css(в нём лежит большая часть стилей, но...). Если вам нужна полная смена дизайна — этот скрипт не для вас, к сожалению (можно его, конечно, дублировать для каждого 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 вашего шаблона.

Далее открываем template.php.
Находим строчку:
  1. <link href="/templates/_ваш стиль_/css/styles.css" rel="stylesheet" type="text/css" />
И меняем её на такой код:
  1. <script type="text/javascript">
  2. <!--
  3. function change(css)
  4. {document.write('<link href=\"\/templates\/_ваш стиль_\/css\/styles'+css+'.css\" rel=\"stylesheet\"');}
  5. var h=(new Date()).getHours();
  6. if (h > 23 || h <7) change('_noch');//ночь
  7. if (h > 6 && h < 12) change('_rassvet');//утро
  8. if (h > 11 && h < 19) change('_den');//день
  9. if (h > 18 && h < 24) change('_zakat');//вечер
  10. //-->
  11. </script>
  12.  
  13. <link href="/templates/_ваш стиль_/css/styles.css" rel="stylesheet" type="text/css" />
УДОБНОЕ альтернативное решение отpivua):
Дублировать весь файл не обязательно! Можно оставить свой "дефлотный" который будет прописан самый первый, а потом скриптом подгружать именно нужные изменения!)
В итоге макароны получаются одинаковы, но править и добавлять изменения намного удобней, так как файлы содержат только то что мы изменяем!)

Не забудьте сменить везде имя шаблона в коде с _ваш стиль_ на название папки вашего шаблона!!!

Всё готово!😊Теперь ваши стили будут меняться в зависимости от времени суток!
А теперь вот вам мой сюрприз! Исходники шапок в .PSD формате, эксклюзивно для пользователей моего любимого движка!

Налетайте! СКАЧАТЬ

Открыть файлы можно с помощью программы Adobe Photoshop CS6. Если у вас нет такой программы или вы испытываете трудности при открытии пишите в ЛС!


Яндекс-деньги: 410011522482623
0
vitalson9 vitalson9 9 лет назад #
не скачиваются стили sad
0
Azura Azura 9 лет назад #
Ой-ой-ой! Сейчас!
0
Azura Azura 9 лет назад #
Готово, это я с недосыпу. :)))
0
vitalson9 vitalson9 9 лет назад #
бывает smile
0
vitalson9 vitalson9 9 лет назад #
а CS5 откроет?
0
vitalson9 vitalson9 9 лет назад #
сам себе отвечаю открывает
0
CyberMan CyberMan 9 лет назад #
эти стили для дефолтного шаблона?)
+1
vitalson9 vitalson9 9 лет назад #
для любого просто копируйте свой стиль и меняйте названия
styles_zakat.css - закат,
styles_rassvet.css - рассвет,
styles_den.css - день,
styles_noch.css - ночь.
0
Дмитрий Дмитрий 9 лет назад #
Нарядно! Пойду плроплюсую)))
+2
Azura Azura 9 лет назад #
Спасибо! :)
0
eoleg eoleg 9 лет назад #
+
Azura , а прибедняетесь, ничего не знанию, не понимаю! :=)
0
Azura Azura 9 лет назад #
С нуля я ничего не могу))))) Спасибо. smile Я, как видите, рисую лучше)))))
0
reload reload 9 лет назад #
Azura:
возьмите из папки вашей темы файл style.css и создайте с него 4 копии
Дублировать весь файл не обязательно! Можно оставить свой "дефлотный" который будет прописан самый первый, а потом скриптом подгружать именно нужные изменения!)
В итоге макароны получаются одинаковы, но править и добавлять изменения намного удобней, так как файлы содержат только то что мы изменяем!)
0
Azura Azura 9 лет назад #
Так прекрасно, давайте ваш комментарий введу в пост, чтоб не потерялся :)
0
FreeLancer FreeLancer 9 лет назад #
А не лучше ли использовать PHP в шаблоне?

Нафиг этот лишний яваскрипт? У меня на сайте сделано на PHP, 4 варианта шапки - (день, ночь, утро, вечер)
+1
Azura Azura 9 лет назад #
Кому как удобнее, кому как хочется. Я не встретила ни одного решения здесь, своим вы не делитесь. На пхп я не пишу, т.к. не умею. Так пусть пользователи, которые не пишут на ПХП порадуются этому варианту.
+2
reload reload 9 лет назад #
FreeLancer:
Нафиг этот лишний яваскрипт?
Чего лишний?) очень даже удобно!) так ведь не только шапку можно менять, а вообще все стили!) и самое удобное что все изменения лежат в отдельных файлах!)
И если доработать, то можно вообще на весь год расписать по всем праздникам)) с добавлением всяких украшалок)

Ясно что путей реализации всегда больше одного, но тут каждый выбирает по своим знаниям и потребностям!)
0
TheSteek TheSteek 9 лет назад #
Ето я туплю или у вас ошибка?

23-7
6-12
11-19
18-24

сначало утро до 12 по день начинается в 11:)
0
Azura Azura 9 лет назад #
Ага, с расчётами у меня всегда плохо было)))) Спасибо,поправила :)))
0
vitalson9 vitalson9 9 лет назад #
у вас вечер с if (h > 18 && h < 24) change('_zakat');//вечер
а ночь с if (h > 23 || h <7) change('_noch');//ночь
утро с if (h > 6 && h < 12) change('_rassvet');//утро
так и должно быть?
0
fgvyguyu fgvyguyu 9 лет назад #
Первый пост и очень нужный. Безусловно +
pivua):
И если доработать, то можно вообще на весь год расписать по всем праздникам)) с добавлением всяких украшалок)
Хорошая идея!
0
fgvyguyu fgvyguyu 9 лет назад #
Первый пост и очень нужный. Безусловно +
pivua):
И если доработать, то можно вообще на весь год расписать по всем праздникам)) с добавлением всяких украшалок)
Хорошая идея!
0
fgvyguyu fgvyguyu 9 лет назад #
Блин из за инета получился дубль(((
-1
Azura Azura 9 лет назад #
Ничего страшного, благодарю!:) Я, честно, старалась, чтоб лицом в грязь не ударить и правда людей порадовать, отблагодарить, внести свою лепту в развитие системы... :)
0
vitalson9 vitalson9 9 лет назад #
поставил после того как вы поправили пост с числами и вот что получилось

футер залез на основное меню
0
Azura Azura 9 лет назад #
Хм... Поменяйте тогда числа обратно, хотя мне кажется что-то не то со стилями у вас... У меня была почти такая же вещь, но тогда когда я меняла только айдишники по времени суток. Мне кажется от чисел обозначающих время не должно так корёжить... Ща проверила всё работает у меня с новыми числами! Проверяйте, возможно один из стилей недозалился у вас. И через файр-баг проверьте какой сейчас стоит. Время на компе поменяйте, и снова проверьте. Если сменился стиль - скрипт работает и ошибок не даёт! Перезалейте копии стилей и проверяйте сами стили. Вот. :)
0
vitalson9 vitalson9 9 лет назад #
дело было в смене чисел
0
OldSchool OldSchool 9 лет назад #
Спасибки, забрал, плюсую...
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.