Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Шаблоны (TPL) » Как для каждого отдельного стиля css, сделать разный цвет виджета?

Как для каждого отдельного стиля css, сделать разный цвет виджета?

zip 28.04.2015 Шаблоны (TPL), Стили (CSS) 3644

вопрос

У меня на сайте несколько стилей, переключается путем смены style.css. Вот такой у меня вопрос можно ли сделать, чтоб виджет В Контакте под каждый стиль был определенного цвета.

Вот собственно сам скрипт виджета:

<script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 0, width: "auto", height: "290", color1: 'FFFFFF', color2: '#DF314D', color3: '#DF314D'}, моя группа);
    </script>

где уже указаны цвета color1, color2, color3

Как с помощью css или же может другим путем, задать для каждого стиля свой цвет. Ну, наверное вы меня поняли.

Ответа пока нет

43 комментария

Юзер

141

zip - 2015-03-2328 апреля 2015 22:10 - #43952

Скрипт у меня установлен в правой колоночке, и при смены стиля css меняется цвет колонок, а вот как сделать чтобы вместе с ним и менялся цвет самого виджета ВК.

Юзер

1599

FastFud - 2015-03-2328 апреля 2015 22:15 - #43953

У меня на сайте несколько стилей, переключается путем смены style.css.

Можно по подробнее? каким образом - вообще было бы не плохо увидеть пример.

Юзер

141

zip - 2015-03-2328 апреля 2015 22:32 - #43956

FastFud, Вот таким способом:

<img style="cursor:pointer;" src="{THEME}/images/red.png" onclick="setDynCSS('{THEME}/style/style.css')">  
<img style="cursor:pointer;" src="{THEME}/images/blue.png" onclick="setDynCSS('{THEME}/style/blue.css')">
<img style="cursor:pointer;" src="{THEME}/images/green.png" onclick="setDynCSS('{THEME}/style/green.css')">

Юзер

1599

FastFud - 2015-03-2328 апреля 2015 22:34 - #43957

Функцию setDynCSS мне самому написать ?)

Юзер

141

zip - 2015-03-2328 апреля 2015 22:36 - #43959

Цитата: FastFud

Функцию setDynCSS мне самому написать ?)

<link id="dyncss" rel="stylesheet" type="text/css" href="">  
<script type="text/javascript">  
function setDynCSS(url) {  
if (!arguments.length) {  
url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1];  
if (!url) return '';  
}  
document.getElementById('dyncss').href = url;  
var d = new Date();  
d.setFullYear(d.getFullYear() + 1);  
document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');  
return url;  
}  
setDynCSS();  
</script>

Юзер

sanderart - 2015-03-2328 апреля 2015 22:34 - #43958

Можно через инспектор кода посмотреть, для каких элементов в коде виджета присваивается данный цвет и в файлах стилей прописать принудительно другие цвета через !important

Юзер

1599

FastFud - 2015-03-2328 апреля 2015 22:37 - #43961

Что находится в iframe - нельзя скрыть/удалить и т.п

Юзер

1599

FastFud - 2015-03-2328 апреля 2015 23:49 - #43964

<link id="css" rel="stylesheet">
<div class="changeStyles">
    <button data-color1="c00000" data-color2="cdeb8e" data-color3="ea5507" data-style="{THEME}/styles/style1.css">Styles№1</button>
    <button data-color1="c00000" data-color2="cdeb8e" data-color3="ea5507" data-style="{THEME}/styles/style2.css">Styles№2</button>
    <button data-color1="c00000" data-color2="cdeb8e" data-color3="ea5507" data-style="{THEME}/styles/style3.css">Styles№2</button>
</div>
<div id="vk_groups">
    <script type="text/javascript">
        VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 20003922);
    </script>
</div>
<script>
    function widget(a,b,c){
        VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: a, color2: b, color3: c}, 20003922);
    }
    $(function(){
        $('button').each(function(){
            $(this).click(function(){
                var $data = JSON.stringify($(this).data()),
                    $p = JSON.parse($data);
                    $('#vk_groups').remove();
                    $('body').append('<div id="vk_groups"></div>');
                    $('#vk_groups').html(widget($p['color1'],$p['color2'],$p['color3']));
                    $('#css').attr('src', widget['style']);
                    $.cookie('widget', $data, { expires: 365 * 10 });
            });
        });
        var cookieValue = JSON.parse($.cookie("widget"));
        if (cookieValue){
            $('#vk_groups').remove();
            $('body').append('<div id="vk_groups"></div>');
            $('#vk_groups').html(widget(cookieValue['color1'],cookieValue['color2'],cookieValue['color3']));
            $('#css').attr('src', cookieValue['style']);
        }
    });
</script>

Юзер

141

zip - 2015-03-2329 апреля 2015 00:16 - #43965

FastFud, Спасибо ) только еще не разобрался куда все это пихать и как подогнать.

Юзер

1599

FastFud - 2015-03-2329 апреля 2015 00:22 - #43967

main.tpl (дизайн кнопок с параметрами настройте под себя)

<div class="cs"><button data-color1="c00000" data-color2="cdeb8e" data-color3="ea5507" data-style="{THEME}/styles/style1.css">Styles№1</button>
    <button data-color1="c00000" data-color2="cdeb8e" data-color3="ea5507" data-style="{THEME}/styles/style2.css">Styles№2</button>
    <button data-color1="c00000" data-color2="cdeb8e" data-color3="ea5507" data-style="{THEME}/styles/style3.css">Styles№3</button>
</div>
<div id="block_vk">
<div id="vk_groups"> <!---Изначально показываем виджет группы--->
    <script type="text/javascript">
        VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 20003922);
    </script>
</div></div>

jQuery (вставьте код в любой js файл подключенный к шаблону)

function widget(a,b,c){
        VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: a, color2: b, color3: c}, 20003922);
    }
    $(function(){
        $('.cs button').each(function(){
            $(this).click(function(){
                var $data = JSON.stringify($(this).data()),
                    $p = JSON.parse($data);
                    $('#vk_groups').remove();
                    $(''#block_vk'').append('<div id="vk_groups"></div>');
                    $('#vk_groups').html(widget($p['color1'],$p['color2'],$p['color3']));
                    $('#css').attr('href', widget['style']);
                    $.cookie('widget', $data, { expires: 365 * 10 });
            });
        });
        var cookieValue = JSON.parse($.cookie("widget"));
        if (cookieValue){
            $('#vk_groups').remove();
            $('#block_vk').append('<div id="vk_groups"></div>');
            $('#vk_groups').html(widget(cookieValue['color1'],cookieValue['color2'],cookieValue['color3']));
            $('#css').attr('href', cookieValue['style']);
        }
    });

Юзер

141

zip - 2015-03-2329 апреля 2015 00:51 - #43969

FastFud,

Запихал код в jQuery

Кнопки у меня в правой колонке сверху, сделал так:

 <div class="cs">
<button data-color1="#fff" data-color2="#DF314D" data-color3="#DF314D" data-style="{THEME}/style/style.css"><img style="cursor:pointer;" src="{THEME}/images/red.png" onclick="setDynCSS('{THEME}/style/style.css')"></button>
<button data-color1="#fff" data-color2="#0067C0" data-color3="#0067C0" data-style="{THEME}/style/blue.css"><img style="cursor:pointer;" src="{THEME}/images/blue.png" onclick="setDynCSS('{THEME}/style/blue.css')"></button>
<button data-color1="#fff" data-color2="#7DAF27" data-color3="#7DAF27" data-style="{THEME}/style/green.css"><img style="cursor:pointer;" src="{THEME}/images/green.png" onclick="setDynCSS('{THEME}/style/green.css')"></button>
</div>

А виджет мне нужен в правой колонке примерно посередине, сделал так:

<div id="block_vk">
<div id="vk_groups"> <!---Изначально показываем виджет группы--->
    <script type="text/javascript">
        VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 20003922);
    </script>
</div></div>

Видимо что-то сделал я не так, ничего не работает (

Юзер

141

zip - 2015-03-2329 апреля 2015 01:08 - #43970

У меня при переключении стилей, страница не обновляется. Поэтому скрипта ВК нету. После обновления страницы он появляется, нужного цвета. А можно сделать как-то, чтоб без обновлении страницы работало?

Юзер

1599

FastFud - 2015-03-2329 апреля 2015 01:11 - #43971

1. Уберите onclick с изображений
2. Можно увидеть сайт ?

Юзер

141

zip - 2015-03-2329 апреля 2015 01:42 - #43973

FastFud, Сайт показать не получится, т.к он работает только у нас в регионе.

Почти разобрался. Если убираю onclick виджет меняет цвет, но сам стиль не переключается, ладно с этим разберусь.

Мне осталось разобраться только почему виджет выводится в main.tpl в самом низу под футером? а не где мне нужно в боковой колонке. right.tpl

Код виджета я ведь указываю в right.tpl а не в main.tpl

Юзер

1599

FastFud - 2015-03-2329 апреля 2015 08:21 - #43976

но сам стиль не переключается

$('#css').attr('href', widget['style']);

замените на

$('#css').attr('href', $p['style']);

Юзер

141

zip - 2015-03-2329 апреля 2015 03:23 - #43974

FastFud, Скажите Пожалуйста, как вывести чтоб отображался виджет в боковой колонке? а то в самом низу под футером показывает. А так вам большое спасибо, за помощь. Очень помогли, все работает.

Пробовал уже так:

Создал отдельный js и подключил в боковой колонке right.tpl

где должен быть виджет, сделал так:

<script type="text/javascript" src="{THEME}/js/vk.js"></script>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>

Кнопки в боковой колонке прописал сверху где мне было нужно:

<div class="cs">
<button data-color1="#fff" data-color2="#DF314D" data-color3="#DF314D" data-style="{THEME}/style/style.css"><img style="cursor:pointer;" src="{THEME}/images/red.png" onclick="setDynCSS('{THEME}/style/style.css')"></button>
<button data-color1="#fff" data-color2="#0067C0" data-color3="#0067C0" data-style="{THEME}/style/blue.css"><img style="cursor:pointer;" src="{THEME}/images/blue.png" onclick="setDynCSS('{THEME}/style/blue.css')"></button>
<button data-color1="#fff" data-color2="#7DAF27" data-color3="#7DAF27" data-style="{THEME}/style/green.css"><img style="cursor:pointer;" src="{THEME}/images/green.png" onclick="setDynCSS('{THEME}/style/green.css')"></button>
</div>

Все равно выводится под футером:

Юзер

1599

FastFud - 2015-03-2329 апреля 2015 08:22 - #43977

По картинкам сказать ничего не могу.

Юзер

141

zip - 2015-03-2329 апреля 2015 21:24 - #44015

А нельзя ли сделать к примеру так:

Создать разные tpl туда запихать сам скрипт виджета с разными цветами.

В css создать класс к примеру .vk

В нужном месте прописать этот класс где будет отображаться виджет.

<div class="vk">Здесь будут выводится разные tpl для каждого стиля разные</div>

Но вот как сделать, чтоб css выводило этот tpl?

Для style1 чтоб выводила vk1.tpl для style2 vk2.tpl

Возможно ли такое?

Юзер

1599

FastFud - 2015-03-2329 апреля 2015 22:19 - #44019

Это будет очень глупо!

Юзер

141

zip - 2015-03-2330 апреля 2015 00:00 - #44025

Цитата: FastFud

Это будет очень глупо!

Почему же глупо? Ведь делают даже для отдельных категорий разные tpl и даже шаблоны. Ваш вариант очень хорош, но что мне сделать с виджетом, который не отображается в нужном месте? а залазеет под футер.

Юзер

141

zip - 2015-03-2330 апреля 2015 00:18 - #44026

Ведь это дело не в самом виджете и не в настройках DLE или шаблоне.
Стандартный виджет, отображается нормально и там где нужно. Ведь я все сделал так как вы написали, и виджет отбражается не там где нужно. Значить здесь дело-то в вашем коде, который вы написали.

Юзер

1599

FastFud - 2015-03-2330 апреля 2015 00:45 - #44027

#block_vk

id блока в котором появится виджет.

Юзер

141

zip - 2015-03-2330 апреля 2015 01:16 - #44028

FastFud, Я конечно вас замучил, но можно как-то по подробнее?
#block_vk прописать в css Но, как и где указывать id. Можно хотя бы пример привести?

Юзер

141

zip - 2015-03-232 мая 2015 23:44 - #44112

FastFud, Помогите, уж до конца раз начали. Ничего не получается. Как правильно сделать объясните пожалуйста. Разве это так трудно?

Юзер

1599

FastFud - 2015-03-232 мая 2015 23:56 - #44113

Пример

Юзер

141

zip - 2015-03-235 мая 2015 23:37 - #44178

Все равно, ну ни как не получается (
Если поставлю шаблон на другой хостинг, где будет доступен сайт. Поможете мне в этом?

Юзер

1599

FastFud - 2015-03-235 мая 2015 23:51 - #44179

Конечно.

Юзер

141

zip - 2015-03-235 мая 2015 23:58 - #44180

вот: сайт

Юзер

1599

FastFud - 2015-03-236 мая 2015 00:03 - #44182

1. Уберите onclick с картинок.
2. В скрипте

$('.cs button').each(function(){

а у вас в html

<buton ...

надо

<button ..

Юзер

141

zip - 2015-03-236 мая 2015 00:10 - #44183

Исправил, но теперь цвет переключается только на виджете, и то он залез куда-то под комментарии. А стили перестали переключаться вообще.

Юзер

1599

FastFud - 2015-03-236 мая 2015 00:13 - #44184

В скрипте заменить

#css 
на
#dyncss

Юзер

141

zip - 2015-03-236 мая 2015 00:17 - #44185

Заменил, теперь вместе со стилем переключается. Но как вытащить виджет, чтоб в колонке отображался нормально?
А то он где-то под колонкой почему-то.

Юзер

1599

FastFud - 2015-03-236 мая 2015 00:22 - #44186

<div class="side-block">
    <div class="block-title chat-title"><h3>Группа VK</h3></div>
    <div class="block-contentt" id="block_vk">
        <div id="vk_groups"> <!---Изначально показываем виджет группы--->
            <script type="text/javascript">
                VK.Widgets.Group("vk_groups", {mode: 0, width: "auto", height: "290", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 20003922);
            </script>
        </div>
    </div>  
    <div class="block-contentt">
    </div>  
</div>

Юзер

141

zip - 2015-03-236 мая 2015 00:28 - #44187

Все равно не вылезает (

Юзер

1599

FastFud - 2015-03-236 мая 2015 00:30 - #44188

Уберите все стили #block_vk

Юзер

141

zip - 2015-03-236 мая 2015 00:35 - #44190

Ура появился! Но что-то ширина виджета не регулируется.

Юзер

141

zip - 2015-03-236 мая 2015 00:37 - #44191

пишу width: "290", height: "290" а она не меняется

Юзер

141

zip - 2015-03-236 мая 2015 00:39 - #44192

а вот поставил width: "auto",

Юзер

141

zip - 2015-03-236 мая 2015 00:45 - #44193

Спасибо вам Огромнейшее за помощь, давайте за работу вам переведу хоть немножко money напишите в личку данные.

Юзер

141

zip - 2015-03-236 мая 2015 01:08 - #44194

теперь из-за этих скриптов:

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

перестала работать кнопка edit удалить и редактировать статью

Юзер

141

zip - 2015-03-236 мая 2015 01:09 - #44195

Убираю вот этот:

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

работает

ставлю обратно, не работает

Юзер

141

zip - 2015-03-236 мая 2015 01:15 - #44197

А они вообще-то и не нужны оказывается )
Все работает. Ура! Спасибо еще раз вам Огромнейшее.

Юзер

1599

FastFud - 2015-03-236 мая 2015 07:14 - #44200

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Эту строку лучше не удалять, иначе не будут сохранятся куки и соответственно стили виджета тоже не сохранятся.

Как для каждого отдельного стиля css, сделать разный цвет виджета?

Ответа пока нет

43 комментария

Похожие вопросы

Вывод title под соответствующей картинкой

Автообновление DIV блока через Javascript

Как починить модальное окно

Не отправляет форму. Быстрая регистрация.

Цвета строк

Как правильно подключить JavaScript слайдера.

Модальные окна в DLE 10.3

Как вывести просмотры определенной новости ?

Как сделать адаптивный слайдер через custom?