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

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

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

вопрос
У меня на сайте несколько стилей, переключается путем смены 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>
Эту строку лучше не удалять, иначе не будут сохранятся куки и соответственно стили виджета тоже не сохранятся.
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

 18.06.2012 lexa21reg  Общие вопросы по вёрстке, Шаблоны (TPL), Хаки
 17.03.2013 websot  Шаблоны (TPL)
 20.03.2013 zodigan  Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL)
 01.04.2013 pippak  Шаблоны (TPL)
 20.08.2013 DarkneZ  Шаблоны (TPL), Стили (CSS)
 13.08.2014 wor92  Общие вопросы, Шаблоны (TPL), jQuery
 15.09.2014 G-3p  Шаблоны (TPL)
 24.02.2015 akafaus  Шаблоны (TPL)
 23.03.2015 Kaleb  Шаблоны (TPL), jQuery
  • Jigurda | Как в description вставить значение доп. ... 2
    Фото Jigurda
    Jigurda
    Как в description вставить значение доп.поля?
    Сегодня, 10:54
    Немного не то. Нужно не заменить, а добавить к уже имеющемуся description свой текст с доп.полями
  • lutskboy | Как в description вставить значение доп. ... 2
    Фото lutskboy
    lutskboy
    Как в description вставить значение доп.поля?
    Вчера, 21:51
    https://sandev.pro/web/159-fullstory-metatags-by-sander.html
  • derebas | Как реализовать кнопку "Поделиться" как ... 1
    Фото derebas
    derebas
    Как реализовать кнопку "Поделиться" как на Плей Маркете?
    Вчера, 09:39
    Ну если на скорую руку то примерно так
    <style>
.sociallinks {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.sociallinks-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.social-container {
    display: flex;
    align-items: center;
}
.social-container > div {
    margin-left: 10px;
}

h2, p {
    margin: 5px 0;
}
.social {
  padding-top: 20px;
}
.social img {
  margin: 10px;
}
.sharebtn {
  padding-top: 20px;
  width: 100%;
}
.sharebtn_area {
  border: 1px solid black;
  height: 40px;
}
.sharebtn input[type="text"] {
  width: 70%;
  border: none;
  height: 95%;
}
.sharebtn button {
  width: 25%;
  height: 95%;
  border: none;
  background-color: #fff;
}
</style>
<button id="opensociallinksBtn">Поделиться</button>

<div id="mysociallinks" class="sociallinks">
  <div class="sociallinks-content">
    <span class="close">×</span>
    <div class="social-container">
        <img src="{image-1}" alt="Icon" width="30" height="30">
        <div>
            <h2>{title}</h2> 
            <p>Поделиться</p> 
        </div>
    </div>
    <div class="social">
        <a href="https://api.whatsapp.com/send/?text={full-link}"><img src="whatsapp.png" alt="WhatsApp" width="30" height="30"></a>
        <a href="https://www.facebook.com/sharer/sharer.php?u={full-link}"><img src="facebook.png" alt="Facebook" width="30" height="30"></a>
        <a href="https://twitter.com/intent/post?url={full-link}"><img src="twitter.png" alt="Twitter" width="30" height="30"></a>
        <a href="https://www.instagram.com/share?url={full-link}"><img src="instagram.png" alt="Instagram" width="30" height="30"></a>
    </div>
    <div class="sharebtn">
      <div class="sharebtn_area">
        <input type="text" id="inputText" value="{full-link}" readonly="true">
        <button id="copyBtn">Поделиться <img src="share.png" width="10px" alt="Share Icon"></button>
      </div>
    </div>
  </div>
</div>

<script>
var sociallinks = document.getElementById("mysociallinks");
var opensociallinksBtn = document.getElementById("opensociallinksBtn");
var closeBtn = document.getElementsByClassName("close")[0];
var copyBtn = document.getElementById("copyBtn");
var inputText = document.getElementById("inputText");

opensociallinksBtn.onclick = function() {
  sociallinks.style.display = "block";
}

closeBtn.onclick = function() {
  sociallinks.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == sociallinks) {
    sociallinks.style.display = "none";
  }
}

copyBtn.onclick = function() {
  inputText.select();
  document.execCommand("copy");
}
</script>
  • doktorpull | GeoIP - показ информации в зависимости о ... 1
    Фото doktorpull
    doktorpull
    GeoIP - показ информации в зависимости от страны посетителя сайта
    17-04-2024, 21:53
    Отличный модуль, хорошо работает. Рекомендую этого автора, так как заказывал у него несколько собственных разработок. Человек знает свое дело.
  • Gordi | Telegram Sender 12
    Фото Gordi
    Gordi
    Telegram Sender
    16-04-2024, 15:47
    купил. Модуль классный! Автору большая признательность!
  • TeraMoune | Как вывести тайтл и дискрипшен по маске ... 1
    Фото TeraMoune
    TeraMoune
    Как вывести тайтл и дискрипшен по маске в категориях?
    14-04-2024, 00:36
    Ну например вот так: https://lazydev.pro/product/12-dle-seo.html
  • zawibis | Как настроить редирект на внешние сайты? 1
    Фото zawibis
    zawibis
    Как настроить редирект на внешние сайты?
    13-04-2024, 14:53
    Нашёлся ответ.
    Нужно в настройках группы отключить параметр

    Автоматическая замена ссылок [url] в тег [leech]
    При включении данной опции все ссылки, которые пользователь публикует в теге [url], будут автоматически заменены на защищенные ссылки тега [leech]
  • TeraMoune | Как решить проблему с /xfsearch/значение ... 5
    Фото TeraMoune
    TeraMoune
    Как решить проблему с /xfsearch/значение?
    12-04-2024, 11:53
    Это не прикол, просто dle позволяет искать новости как по значению так и с указанием конкретного поля для этого значения. И если у вас стоят метрики на сайте то достаточно любому человеку открыть ссылку и убрать в ней что-то, если сайт при новом url вернёт статус 200 то метрики захотят этот url запомнить.
  • komosa | Как решить проблему с /xfsearch/значение ... 5
    Фото komosa
    komosa
    Как решить проблему с /xfsearch/значение?
    11-04-2024, 22:34
    А вот прикол то в том, что это коснулось только author
  • lutskboy | Как решить проблему с /xfsearch/значение ... 5
    Фото lutskboy
    lutskboy
    Как решить проблему с /xfsearch/значение?
    11-04-2024, 22:31
    может быть не один только author. и другие поля. как знать куда перенаправлять
наверх