Переключатель стилей - Stylesheet Switcher

Stylesheet Switcher - это переключатель стилей шаблона блога в реальном времени, т.е. без перезагрузки страницы. Вообще, это довольно старый jQuery плагин, и в каких только движках он не использовался.
Реализация простая: на основе базового css создаётся несколько разных файлов со стилями, прописываются в </head> как альтернативные с уникальным title, по которому с помощью html кода и скрипта будут переключаться.

Пример для Blogger, разукрасим ссылки (тег а):

<link rel="alternate stylesheet" type="text/css" href="http://planeta.omg-linux.ru/docs/blogger_scripts/alternate_css/blogger-a.css" title="styles1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="http://planeta.omg-linux.ru/docs/blogger_scripts/alternate_css/blogger0.css" title="styles2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="http://planeta.omg-linux.ru/docs/blogger_scripts/alternate_css/blogger-b.css" title="styles3" media="screen" />

Сразу скажу, что я предварительно вынес все стили из шаблона Blogger'а в один файл...

Здесь мы видим стили:

• blogger-a.css - где я изменил цвет ссылок на маженту и зелёный при касании
• blogger0.css - цвет ссылок стандартный серый, дефолт
• blogger-b.css - цвет ссылок синий и мажента при касании

И как я говорил, у каждого уникальный атрибут title: styles1, styles2, styles3.

К ним я прописал ссылку на скрипт styleswitch.js:

<script src="styleswitch.js" type="text/javascript">
</script>

И сами переключалки, которые при помощи html можно оформить, как угодно душе:

<ul>
<li><a class="styleswitch" href="#" rel="styles1">Мажента</a></li>
<li><a class="styleswitch" href="#" rel="styles2">Серый</a></li>
<li><a class="styleswitch" href="#" rel="styles3">Циан</a></li>
</ul>

Но атрибуты должны соответствовать title в ссылках на стили (см. выше) и классу styleswitch, привязанному к скрипту.

Демо:

• Мажента
• Серый
• Циан

Таким образом, при помощи скрипта styleswitch можно подменять стили и, к примеру, увеличивать текст, менять размеры виджетов, подсвечивать ссылки и т.д. Возможности не ограничены.

Разработчик.