Переключатель стилей дизайна

Сегодня хотел бы поделиться одним очень полезным скриптом - это переключатель стилей или Switch Stylesheet. Делая этот блог, я не раз слышал, что многим людям не удобно читать текст на тёмном фоне, глаза режет и всё такое... но мне нравится тёмный дизайн и менять фон мне никак не хотелось, вот и вспомнил, что я где-то видел сайт, на котором кнопкой можно было менять оформление. Короче, пришлось озаботиться раскопками скрипта, который бы мог изменять дизайн. Дело оказалось не таким простым, как казалось. Нашел много разных скриптов, но один не пашет, другой заставляет страницу перезагружаться, третий создает еще одну дублирующую страницу... ничего из этого меня не устраивало. И вот, наконец, нашел именно то, что нужно. Простой скрипт, который по одному клику меняет CSS стили.

Делается это очень просто:

1. Загружаете скрипт styleswitch.js в корень своего сайта.

2. Вставляете ссылку на этот скрипт между тегами <head></head> ниже ссылки на ваш основной CSS стиль:

  1. <script src="styleswitch.js" type="text/javascript">   
  2.   
  3. /***********************************************  
  4. * Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)  
  5. * This notice MUST stay intact for legal use  
  6. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more  
  7. ***********************************************/   
  8.   
  9. </script>  

3. Вставляете ссылки переключения стилей в тело:

  1. <a href="javascript:chooseStyle('none', 60)" checked="checked">Default style</a>   
  2. <a href="javascript:chooseStyle('blue-theme', 60)">Blue theme</a>   
  3. <a href="javascript:chooseStyle('brown-theme', 60)">Brown theme</a>  

Вот примерно так всё вместе это должно выглядеть в коде:

  1. <head>   
  2.   
  3. <link rel="stylesheet" type="text/css" href="default.css" />   
  4. <link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="user.css" />   
  5. <link rel="alternate stylesheet" type="text/css" media="screen" title="brown-theme" href="user2.css" />   
  6.   
  7. <script src="styleswitch.js" type="text/javascript">   
  8. /***********************************************  
  9. * Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)  
  10. * This notice MUST stay intact for legal use  
  11. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more  
  12. ***********************************************/   
  13. </script>   
  14.   
  15. </head>   
  16.   
  17. <body>   
  18.   
  19. <a href="javascript:chooseStyle('none', 60)" checked="checked">Default style</a>   
  20. <a href="javascript:chooseStyle('blue-theme', 60)">Blue theme</a>   
  21. <a href="javascript:chooseStyle('brown-theme', 60)">Brown theme</a>   
  22.   
  23. </body>   
  24. </html>  

Как это работает можно увидеть на этом блоге, кликаем по этим ссылкам →

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

1. Sparklette

 

2. Kineticshadows

 

3. Kulturbanause

 

4. Webstaze

 

5. Popurls

 

6. Urbanchip

 

7. Wish tree

 

8. Mixoart

 

9. Ps-designstudio

 

10. Marius Roosendaal

 

11. Diegovalobra

 

12. Switch Display Options

 

Интересная статья? Нажми →

Не знаешь что такое RSS? Читай → здесь   

Не стесняйтесь оставлять комментарии ↓   

  Категория: Полезное • Просмотров: 16540 • Добавил: Gorus •
 
          Отзывы
#7
Provenzano [Материал] * 18 Апр 2011
Все я разобрался
#6
Provenzano [Материал] * 18 Апр 2011
Не могу подключить переключатель на всех страницах своего сайта хотя все страницы идентичны, посоветуйте как можно исправить проблему вот сайт http://partyfreak.ucoz.ru/
#5
Ekaterina [Материал] * 15 Окт 2009
Спасибо огромное! Понятно даже мне, хотя с wordpressom только неделю знакома и сайтами раньше не занималась. Спасибо!
#4
GrandTA [Материал] * 01 Авг 2009
Очень полезный скрипт, я возьму в свой арсенал. Спасибо!
#3
Александр [Материал] * 26 Июл 2009
Вещь стоящая, обязательно заберу себе в закладки.

Нашел ее и у тебя на сайте. Вот только вид переключателя вводит в заблуждение.

Квадраты лучше заменить на «радио» (реальные или рисованные — не важно), ИМХО.
А то смотришь, фон «темный», а по переключателю кажется, что ты на «светлом».
#2
Tyler [Материал] * 02 Июн 2009
Да, видел уже не раз похожие скрипты. Но тут есть одно НО. Если вы хотите изменить дизайн кардинально (при переключателях), нужно весь каркас писать в css. В ином случае сможете изменять только некоторые части (фон, рамки и т.п. и т.д.)
Ответ: Совершенно с вами согласен))
#1
RomB [Материал] * 09 Май 2009
Чувак, ты шикарно ведешь блог!
Ответ: Спс smile
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
   
   
На сайте: 1
Посетители: 1
Пользователи: 0
 
 
 
Комментарии

 Заебал....А в другом городе есть проститутки? Славик » 28 Дек 2013
 Але , вы хоть когда пиздите коды , смотрите , что пиздите ?
Найдёте такую стоку в вашем коде - приз !!!!
В коде замените "адрес_Вашего_сайта"
А если я ещё и файлы в папк Чук и Гек » 04 Июн 2013
 у кого есть хороший юрист знакомый или просто скиньте контакты по семейным делам? дайте контакт адекватного адвоката » 08 Май 2013
 Most powerful&cost effective SEO and website traffic service in world get up to 100’000 forum backlinks now!

Your webgrabber.clan.su website will get thousands of visitors/day using supe web traffic » 14 Ноя 2012
 А вы второй кнопкой на облаке нажмите и посмотрите куда ведут первые две ссылки... Первая на сайт голых девок(ладно хоть девки красивые :) ), а второй у меня нод32 сразу заблокировал... Hevel » 28 Окт 2012
 Хороший ресурс)) Темы интересные и дизайн красивый). Liska » 03 Мар 2012
 Олтичная статья, мне нравитяс, достойно. vipgod » 10 Фев 2012
 хорошее начало NenModechen » 23 Янв 2012
 На каком конструкторэ лучше регистрировать сайт Etnos » 15 Янв 2012
 спасио) кирилл кирилл » 13 Янв 2012
 спасибо!! cool кирилл кирилл » 13 Янв 2012
 Сделал на сайте http://zakladki.3dn.ru/ все как описано, открывается обычное облако в строчку. В чем причина? person » 27 Сен 2011
 
 
 
 
 
 
 
 
 
 
 
   Главная • Галерея сайта
 
Designed by Gorus © - 2026
Rambler's Top100 Рейтинг@Mail.ru MyCounter - счётчик и статистика (посетителей и хитов сегодня) HotLog WOlist.ru - каталог качественных сайтов Рунета