Switch Background Color как реализовать переключение style css…

Автор Андрей Опубликовано 11.05.2011 Обновлено 27.12.2016

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Switch Background Color – как реализовать переключение style.css в своей теме? например как в теме Renova. У меня тема для которой я разработал 2 стиля, 1 белый и соответственно контрастный – чёрный, но как сделать что бы пользователи могли сами переключать?

Андрей

Оцените автора

Добавить комментарий

Ruslan 11.05.2011 в 21:45

кнопки переключения:

<a href="#red" rel="nofollow">Red</a>
<a href="#blue" rel="nofollow">Blue</a>
<a href="#green" rel="nofollow">Green</a>

JQuery скрипт который прописывает в head.


$(document).ready(function() {
// red
$("#css-red").click(function() {
$("link[rel=stylesheet]").attr({href : "red.css"});
});

// blue
$("#css-blue").click(function() {
$("link[rel=stylesheet]").attr({href : "blue.css"});
});

// green
$("#css-green").click(function() {
$("link[rel=stylesheet]").attr({href : "green.css"});
});
});

Ответить

Андрей автор 11.05.2011 в 23:34
спасибо за совет. я сделал так: создал файл в папке js
```
switcher.js
```
далее прописал код:
```
$(document).ready(function() {
// black
$("#css-black").click(function() {
$("link[rel=stylesheet]").attr({href : "/wp-content/themes/Kin/css/screen.css"});
});
 
// white
$("#css-white").click(function() {
$("link[rel=stylesheet]").attr({href : "/wp-content/themes/Kin/css/skins/white.css"});
});
});
```
Вставил в header.php
```
<script type="text/javascript" src="/js/switcher.js">
```
далее в шаблон
```
<a href="#black" rel="nofollow">black </a>

<a href="#white" rel="nofollow">white </a>
```
, но ничего не выходит, где ошибка?
Ответить
1. Ruslan 12.05.2011 в 08:34
  
  Ответить
  1. Ruslan 12.05.2011 в 08:35
    Ответить
  2. Ruslan 12.05.2011 в 08:35
    
    https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js
    
    Ответить

Андрей автор 12.05.2011 в 10:47

Подключены такие:

<script type="text/javascript" src="/js/jquery.js">
<script type="text/javascript" src="/js/jquery.ui.js">
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.0.js">
<script type="text/javascript" src="/js/jquery.validate.js">
<script type="text/javascript" src="/js/custom.js">

но самое интересное что я прописывал и таким образом:

$(document).ready(function() {
// screen
$("#css-screen").click(function() {
$("link[rel=stylesheet]").attr({href= "/css/screen.css"});
});
 
// white
$("#css-white").click(function() {
$("link[rel=stylesheet]").attr({href= "/css/skins/white.css"});
});
});

Тоже ничего не вышло :(

Ответить

Андрей автор 12.05.2011 в 10:50

но самое интересное что я прописывал и таким образом:

в смысле в header.php

Ответить
1. Ruslan 12.05.2011 в 14:40
  
  можно на сайт посмотреть?
  
  Ответить
2. Ruslan 12.05.2011 в 21:54
  
  ну сообсвенно нашлась ошибка:
  надо выставить для ссылок
  id=”css-white”
  id=”css-screen”
  
  Ответить
  1. Андрей автор 13.05.2011 в 08:56
    
    Спасибо, работает. Но как оказалось нужно поработать над стилями :) . Ещё раз респект и уважуха.
    
    Ответить
Андрей автор 12.05.2011 в 16:05
http://bel-web.ru/
```
Логин: admin
```
```
Логин: *******
```
Там директория с сайтом закрыта через хостинг, пока от посторонних глаз.
Ответить
1. Андрей автор 12.05.2011 в 16:06
```
	Пароль: *******
```
  Ответить
  1. 15.05.2011 в 16:13
    
    Ох не выкладывали бы вы пароли вот так вот в общий доступ…
    
    Ответить
    1. Андрей автор 17.05.2011 в 20:42
      
      Cпасибо за корректировку ;)
      
      Ответить
antonator 20.01.2013 в 11:32

Подскажите как это реализовать без JS.

Ответить