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

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


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

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

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

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

FastFud
Юзер

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

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

zip
Юзер

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
Юзер

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

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

zip
Юзер

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
Юзер

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

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

FastFud
Юзер

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

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

FastFud
Юзер

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
Юзер

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

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

FastFud
Юзер

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
Юзер

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
Юзер

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

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

FastFud
Юзер

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

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

zip
Юзер

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

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

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

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

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

FastFud
Юзер

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

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

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

zip
Юзер

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
Юзер

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

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

zip
Юзер

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

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

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

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

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

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

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

FastFud
Юзер

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

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

zip
Юзер

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

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

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

zip
Юзер

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

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

FastFud
Юзер

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

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

zip
Юзер

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

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

zip
Юзер

zip - 2 мая 2015 23:44 -

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

FastFud
Юзер

FastFud - 2 мая 2015 23:56 -


zip
Юзер

zip - 5 мая 2015 23:37 -

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

FastFud
Юзер

FastFud - 5 мая 2015 23:51 -

Конечно.

zip
Юзер

zip - 5 мая 2015 23:58 -

вот: сайт

FastFud
Юзер

FastFud - 6 мая 2015 00:03 -

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

zip
Юзер

zip - 6 мая 2015 00:10 -

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

FastFud
Юзер

FastFud - 6 мая 2015 00:13 -

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

zip
Юзер

zip - 6 мая 2015 00:17 -

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

FastFud
Юзер

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
Юзер

zip - 6 мая 2015 00:28 -

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

FastFud
Юзер

FastFud - 6 мая 2015 00:30 -

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

zip
Юзер

zip - 6 мая 2015 00:35 -

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

zip
Юзер

zip - 6 мая 2015 00:37 -

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

zip
Юзер

zip - 6 мая 2015 00:39 -

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

zip
Юзер

zip - 6 мая 2015 00:45 -

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

zip
Юзер

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
Юзер

zip - 6 мая 2015 01:09 -

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

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

zip
Юзер

zip - 6 мая 2015 01:15 -

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

FastFud
Юзер

FastFud - 6 мая 2015 07:14 -

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

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

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

наверх