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

Сегодня хотел бы поделиться одним очень полезным скриптом - это переключатель стилей или 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? Читай → здесь   

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

  Категория: Полезное • Просмотров: 16441 • Добавил: Gorus •
 
          Отзывы
1 2 »
#11
Johnot [Материал] * 23 Фев 2013
Excellent:
Many are needed to plant and water what has been planted now that the faith has spread so far and there are so many people... No matter who plants or waters, God gives no harvest unless what is planted is the faith of Peter and unless he agrees to his teachings. (c)Thomas Becket "http://idipic.com/category/philisophy" - page
#10
Besexoxynop [Материал] * 20 Дек 2012
After getting more than 10000 visitors/day to my website I thought your webgrabber.clan.su website also need unstoppable flow of traffic...

Use this BRAND NEW software and get all the traffic for your website you will ever need ...

= = > > http://mass-autopilot-traffic.net

In testing phase it generated 867,981 visitors and $540,340.

Then another $86,299.13 in 90 days to be exact. That's $958.88 a
day!!

And all it took was 10 minutes to set up and run.

But how does it work??

You just configure the system, click the mouse button a few
times, activate the software, copy and paste a few links and
you're done!!

Click the link BELOW as you're about to witness a software that
could be a MAJOR turning point to your success.

= = > > http://mass-autopilot-traffic.net
#9
DwellBibSable [Материал] * 14 Ноя 2012
After getting more than 10000 visitors/day to my website I thought your webgrabber.clan.su website also need unstoppable flow of traffic...

Use this BRAND NEW software and get all the traffic for your website you will ever need ...

= = > > http://mass-autopilot-traffic.com

In testing phase it generated 867,981 visitors and $540,340.

Then another $86,299.13 in 90 days to be exact. That's $958.88 a
day!!

And all it took was 10 minutes to set up and run.

But how does it work??

You just configure the system, click the mouse button a few
times, activate the software, copy and paste a few links and
you're done!!

Click the link BELOW as you're about to witness a software that
could be a MAJOR turning point to your success.

= = > > http://mass-autopilot-traffic.com
#8
Glumurcerpels [Материал] * 26 Сен 2012
If you want to make $20-$50/hour and up to $3500/month of your time working at
home part-time then this is the most important message you’re ever going to read...

It may sound hard to believe, but it's true. There are thousands of companies out there who are willing to pay for your opinions regarding their products. This is an important part of product research, and they rely on people just like you for your honest opinion!

Imagine getting paid for doing things like:

- Trying out new menu items from popular restaurants
- Take short surveys about new cars that are coming out soon
- Give your opinion about new clothing and shoe designs
But here's a problem, it's very hard to find out best survey site and you probably can waste too much time,
but I just stumbled up website http://get-surveys-for-money.com where this guy Jack revealed his secret source where he registered and taking surveys in his free time and earning $265 within 12h and $1440 just within 2 weeks

Click Here To read this amazing story :
http://get-surveys-for-money.com
#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-10 11-11
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
   
   
На сайте: 1
Посетители: 1
Пользователи: 0
 
 
 
Комментарии

 锘縋etaling Street

Located at the heart of the original Kuala Lumpur Chinatown, Petaling Street is a well known tourist destination. Historically, Chinatown was a popular place among locals jquamovn » 13 Июл 2014
 FISH-EMPIRE.NET - игра с выводом реальных денег. Старт проекта 31.03.2014.

Для ознакомления нажмите по ссылке: http://fish-empire.net/

Наши Особенности: Свободная статистик FishEi » 13 Апр 2014
 Заебал....А в другом городе есть проститутки? Славик » 28 Дек 2013
 Поставляем Грунт-эмаль дугостойкую ЭКП-9303ГС (красно-коричневую, серую), а также вы можете купить Cтеклотекстолитовую трубку ТСЭФ ГОСТ 12496-88 в Москве, Санкт-Петербурге, Нижнем-Новгороде, Самаре, Е Весь спектр диэлектриков » 16 Июл 2013
 Amazing film! TSP absolutely killed it in 2010 and now I would like to go ski. I first saw this in 8th grade around Halloween, i thought it was form of scary, while using aunts poisoning innocent dead WarafuthLah » 17 Июн 2013
 Але , вы хоть когда пиздите коды , смотрите , что пиздите ?
Найдёте такую стоку в вашем коде - приз !!!!
В коде замените "адрес_Вашего_сайта"
А если я ещё и файлы в папк Чук и Гек » 04 Июн 2013
 у кого есть хороший юрист знакомый или просто скиньте контакты по семейным делам? дайте контакт адекватного адвоката » 08 Май 2013
 jwTlq http://collectionsacguess.weebly.com - sac à main guess OppKyj MypBam http://boutiqueisabelmarant.weebly.com - boutique isabel marant DvnZgy DqoVin http://isabelmarantprix.weebly.com - isabel ma sale Intended for Dummies » 12 Апр 2013
 Нужна была помощь специалиста и я искал юридический центр! После чего с трудом обнаружил на http://www.consalt-centr.ru - юридический центр в Московской области
. просмотрел их веб сайт и оформ Netdruriruilm » 09 Мар 2013
 Подбор текстов неплохой, помещу сайт в закладки. Zubair » 28 Фев 2013
 Excellent:
Many are needed to plant and water what has been planted now that the faith has spread so far and there are so many people... No matter who plants or waters, God gives no harvest unl Johnot » 23 Фев 2013
 Наткнулся на ссылку: http://srub-dizain.ru/articles/94-profilirovanniybrus - купить профилированный брус от производителя
и я стал задумываться о постройке нового дома! Мне как раз хотелось куп QuogsAffege » 16 Фев 2013
 
 
 
 
 
 
 
 
 
 
 
   Главная • Галерея сайта
 
Designed by Gorus © - 2024
Rambler's Top100 Рейтинг@Mail.ru MyCounter - счётчик и статистика (посетителей и хитов сегодня) HotLog WOlist.ru - каталог качественных сайтов Рунета