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

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

Андрей
Оцените автора
Добавить комментарий

  1. Ruslan

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

    <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"});
    });
    });
    
    Ответить
    1. Андрей автор

      спасибо за совет. я сделал так: создал файл в папке 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
        Ответить
        1. Ruslan
          	
          
          
          
          
          Ответить
        2. Ruslan

          https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js

          Ответить
  2. Андрей автор

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

    <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"});
    });
    });
    

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

    Ответить
  3. Андрей автор

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

    в смысле в header.php

    Ответить
    1. Ruslan

      можно на сайт посмотреть?

      Ответить
    2. Ruslan

      ну сообсвенно нашлась ошибка:
      надо выставить для ссылок
      id=»css-white»
      id=»css-screen»

      Ответить
      1. Андрей автор

        Спасибо, работает. Но как оказалось нужно поработать над стилями :) . Ещё раз респект и уважуха.

        Ответить
  4. Андрей автор

    http://bel-web.ru/

    Логин: admin
    Логин: *******

    Там директория с сайтом закрыта через хостинг, пока от посторонних глаз.

    Ответить
    1. Андрей автор
      	Пароль: *******
      Ответить
      1. Ох не выкладывали бы вы пароли вот так вот в общий доступ…

        Ответить
        1. Андрей автор

          Cпасибо за корректировку ;)

          Ответить
  5. antonator

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

    Ответить