Хак Хак для DLE Cookie Style

Тема в разделе "DLE", создана пользователем mishiko, 12 мар 2014.

Информация :
Актуальная версия DataLife Engine 11.1
( Final Release v.11.1 | Скачать DataLife Engine | Скачать 11.1 demo )
Нужно ли обновляться | Как обновиться | Изменения в шаблонах
> Нет русских символов <
[Приватная тема DLE (Все подробности в ЛС к модератору раздела)]

Версии 10.0 и ниже - уязвимы!

Локализации | F.A.Q. | Внешний вид
Правила раздела | Правила форума
Обсуждение хайда карается баном!
В каждом сообщении указывайте версию DLE, которого они касаются!
Модераторы: killoff
  1. mishiko

    mishiko Создатель

    Регистр.:
    5 сен 2011
    Сообщения:
    254
    Симпатии:
    101
    cascading-style-sheets-css-logo.png

    Cookie Style - это возможность сделать кнопку смену всего оформления, фона, расцветки панелей или дизайна на основе стилей CSS с сохранением информации в Cookie. Любой ваш пользователь сможет после установки выбрать сам оформление сайта.
    Это пример создания разных дополнительных стилей для сайта ДЛЕ с использованием JS скриптов. Позволяющий на пользовательской стороне выбрать стиль пользователем, который больше понравится гостю сайта.

    Установка хак для DLE Cookie Style:
    в JS/ папке создать файл foot_global.js и в него поместить код

    Код:
    //<![CDATA[
    
    var manual_or_random = "manual" //"manual" - ручной, "random" - случайный
    var randomsetting = "3 days" //"eachtime" - смена каждый раз, "sessiononly" - смена каждой сессия, "x days" (заменить х на желаемое число) . Применяется только, если режим является случайным.
    
    //////// Код ниже нет необходимости редактировать /////////
    function getCookie(Name) {
        var re = new RegExp(Name + "=[^;]+", "i");
        if (document.cookie.match(re))
        return document.cookie.match(re)[0].split("=")[1]
        return null
    }
    function setCookie(name, value, days) {
        var expireDate = new Date()
        var expstring = (typeof days != "undefined") ? expireDate.setDate(expireDate.getDate() + parseInt(days)) : expireDate.setDate(expireDate.getDate() - 5)
        document.cookie = name + "=" + value + "; expires=" + expireDate.toGMTString() + "; path=/";
    }
    function deleteCookie(name) {
        setCookie(name, "moot")
    }
    function setStylesheet(title, randomize) {
        var i, cacheobj, altsheets = [""]
        for (i = 0;
        (cacheobj = document.getElementsByTagName("link")[i]); i++) {
            if (cacheobj.getAttribute("rel").toLowerCase() == "alternate stylesheet" && cacheobj.getAttribute("title")) {
                cacheobj.disabled = true
                altsheets.push(cacheobj)
                if (cacheobj.getAttribute("title") == title)
                cacheobj.disabled = false
            }
        }
        if (typeof randomize != "undefined") {
            var randomnumber = Math.floor(Math.random() * altsheets.length)
            altsheets[randomnumber].disabled = false
        }
        return (typeof randomize != "undefined" && altsheets[randomnumber] != "") ? altsheets[randomnumber].getAttribute("title") : ""
    }
    function chooseStyle(styletitle, days) {
        if (document.getElementById) {
            setStylesheet(styletitle)
            setCookie("mysheet", styletitle, days)
        }
    }
    function indicateSelected(element) {
        if (selectedtitle != null && (element.type == undefined || element.type == "select-one")) {
            var element = (element.type == "select-one") ? element.options : element
            for (var i = 0; i < element.length; i++) {
                if (element[i].value == selectedtitle) {
                    if (element[i].tagName == "OPTION")
                    element[i].selected = true
                    else
                    element[i].checked = true
                    break
                }
            }
        }
    }
    if (manual_or_random == "manual") {
        var selectedtitle = getCookie("mysheet")
        if (document.getElementById && selectedtitle != null)
        setStylesheet(selectedtitle)
    } else if (manual_or_random == "random") {
        if (randomsetting == "eachtime") setStylesheet("", "random")
        else if (randomsetting == "sessiononly") {
            if (getCookie("mysheet_s") == null)
            document.cookie = "mysheet_s=" + setStylesheet("", "random") + "; path=/"
            else setStylesheet(getCookie("mysheet_s"))
        } else if (randomsetting.search(/^[1-9]+ days/i) != -1) {
            if (getCookie("mysheet_r") == null || parseInt(getCookie("mysheet_r_days")) != parseInt(randomsetting)) {
                setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting))
                setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting))
            } else setStylesheet(getCookie("mysheet_r"))
        }
    }
    //]]>
    в /main.tpl
    перед закрывающимся тегом
    Код:
    </head>
    прописать (обязательно ниже всех остальных файлов css)
    Код:
    <!--Cookie стиль-->
    <link rel="alternate stylesheet" type="text/css" media="screen" title="green-theme" href="{THEME}/style/style-green.css" disabled="">
    <link rel="alternate stylesheet" type="text/css" media="screen" title="blye-theme" href="{THEME}/style/style-blye.css" disabled="">
    <link rel="alternate stylesheet" type="text/css" media="screen" title="red-theme" href="{THEME}/style/style-red.css" disabled="">
    <link rel="alternate stylesheet" type="text/css" media="screen" title="yellow-theme" href="{THEME}/style/style-yellow.css" disabled="">
    <!--Cookie стиль-->
    перед закрывающимся тегом
    Код:
    </body>
    в main.tpl добавить
    Код:
    <script type="text/javascript" src="{THEME}/js/foot_global.js"></script>
    в любом месте или нужном вашего шаблона ДЛЕ добавляете следующий код

    Код:
      <div id="settings">
                <a class="colorbox colororange" href="javascript:chooseStyle('none', 60)"></a>
                <a class="colorbox colorgreen" href="javascript:chooseStyle('green-theme', 60)"></a>
                <a class="colorbox colorblye" href="javascript:chooseStyle('blye-theme', 60)"></a>  
                <a class="colorbox colorred" href="javascript:chooseStyle('red-theme', 60)"></a>  
                <a class="colorbox coloryellow" href="javascript:chooseStyle('yellow-theme', 60)"></a>  
              </div>
    в style/styles.css прописать

    Код:
    /** Смена стилей **/
    #settings{border: 1px solid;display: block;font-size: 0;line-height: 0;}
    #settings .colorbox{display: inline-block;margin: 8px;height: 27px;width: 27px;}
    #settings .colororange{background: #f60;}
    #settings .colorgreen{background: #0C0;}
    #settings .colorblye{background: #08C;}
    #settings .colorred{background: #F00;}
    #settings .coloryellow{background: #FFF500;}
    в папке style/ создать файлы

    style-green.css
    style-blye.css
    style-red.css
    style-yellow.css

    и в них прописывать доп стили которые и будут изменять на пользовательском уровне
     

    Вложения: