Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Шаблоны (TPL) Как для каждого отдельного стиля css, сделать разный цвет виджета?

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


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

вопрос
У меня на сайте несколько стилей, переключается путем смены 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)

zip
129 | 7

zip - 28 апреля 2015 22:10 - Юзер

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

FastFud
50

1599 | 588

FastFud - 28 апреля 2015 22:15 - Юзер

У меня на сайте несколько стилей, переключается путем смены style.css.
Можно по подробнее? каким образом - вообще было бы не плохо увидеть пример.

zip
129 | 7

zip - 28 апреля 2015 22:32 - Юзер

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')">

FastFud
50

1599 | 588

FastFud - 28 апреля 2015 22:34 - Юзер

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

zip
129 | 7

zip - 28 апреля 2015 22:36 - Юзер

Цитата: 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
36 | 6

sanderart - 28 апреля 2015 22:34 - Юзер

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

FastFud
50

1599 | 588

FastFud - 28 апреля 2015 22:37 - Юзер

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

FastFud
50

1599 | 588

FastFud - 28 апреля 2015 23:49 - Юзер

<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>

zip
129 | 7

zip - 29 апреля 2015 00:16 - Юзер

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

FastFud
50

1599 | 588

FastFud - 29 апреля 2015 00:22 - Юзер

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']);
        }
    });

zip
129 | 7

zip - 29 апреля 2015 00:51 - Юзер

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>
Видимо что-то сделал я не так, ничего не работает (

zip
129 | 7

zip - 29 апреля 2015 01:08 - Юзер

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

FastFud
50

1599 | 588

FastFud - 29 апреля 2015 01:11 - Юзер

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

zip
129 | 7

zip - 29 апреля 2015 01:42 - Юзер

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

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

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

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

FastFud
50

1599 | 588

FastFud - 29 апреля 2015 08:21 - Юзер

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

$('#css').attr('href', widget['style']);
замените на
$('#css').attr('href', $p['style']);

zip
129 | 7

zip - 29 апреля 2015 03:23 - Юзер


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>
Все равно выводится под футером:


FastFud
50

1599 | 588

FastFud - 29 апреля 2015 08:22 - Юзер

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

zip
129 | 7

zip - 29 апреля 2015 21:24 - Юзер

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

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

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

В нужном месте прописать этот класс где будет отображаться виджет.
<div class="vk">Здесь будут выводится разные tpl для каждого стиля разные</div>
Но вот как сделать, чтоб css выводило этот tpl?

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

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

FastFud
50

1599 | 588

FastFud - 29 апреля 2015 22:19 - Юзер

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

zip
129 | 7

zip - 30 апреля 2015 00:00 - Юзер

Цитата: FastFud
Это будет очень глупо!

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

zip
129 | 7

zip - 30 апреля 2015 00:18 - Юзер

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

FastFud
50

1599 | 588

FastFud - 30 апреля 2015 00:45 - Юзер

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

zip
129 | 7

zip - 30 апреля 2015 01:16 - Юзер

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

zip
129 | 7

zip - 2 мая 2015 23:44 - Юзер

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

FastFud
50

1599 | 588

FastFud - 2 мая 2015 23:56 - Юзер


zip
129 | 7

zip - 5 мая 2015 23:37 - Юзер

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

FastFud
50

1599 | 588

FastFud - 5 мая 2015 23:51 - Юзер

Конечно.

zip
129 | 7

zip - 5 мая 2015 23:58 - Юзер

вот: сайт

FastFud
50

1599 | 588

FastFud - 6 мая 2015 00:03 - Юзер

1. Уберите onclick с картинок.
2. В скрипте
$('.cs button').each(function(){
а у вас в html
<buton ...
надо
<button ..

zip
129 | 7

zip - 6 мая 2015 00:10 - Юзер

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

FastFud
50

1599 | 588

FastFud - 6 мая 2015 00:13 - Юзер

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

zip
129 | 7

zip - 6 мая 2015 00:17 - Юзер

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

FastFud
50

1599 | 588

FastFud - 6 мая 2015 00:22 - Юзер

<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>

zip
129 | 7

zip - 6 мая 2015 00:28 - Юзер

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

FastFud
50

1599 | 588

FastFud - 6 мая 2015 00:30 - Юзер

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

zip
129 | 7

zip - 6 мая 2015 00:35 - Юзер

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

zip
129 | 7

zip - 6 мая 2015 00:37 - Юзер

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

zip
129 | 7

zip - 6 мая 2015 00:39 - Юзер

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

zip
129 | 7

zip - 6 мая 2015 00:45 - Юзер

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

zip
129 | 7

zip - 6 мая 2015 01:08 - Юзер

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

<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 удалить и редактировать статью

zip
129 | 7

zip - 6 мая 2015 01:09 - Юзер

Убираю вот этот:
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
работает

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

zip
129 | 7

zip - 6 мая 2015 01:15 - Юзер

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

FastFud
50

1599 | 588

FastFud - 6 мая 2015 07:14 - Юзер

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
Эту строку лучше не удалять, иначе не будут сохранятся куки и соответственно стили виджета тоже не сохранятся.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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