Mudar cor de cabeçalho

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Mudar cor de cabeçalho

Mensagem por juleic1123 em 11/08/14, 04:50 am

Oi, eu queria que meus membros puzessem o fórum da sua cor favorita. é possivel eles escolherem a cor que quiserem do site? 
avatar

juleic1123
Usuário destaque

Masculino
Inscrito dia : 04/05/2011
Mensagens : 594
Pontos Ativos : 836

Ver perfil do usuário http://www.online-winxclub.com/forum

Resolvido Re: Mudar cor de cabeçalho

Mensagem por Hancki em 11/08/14, 05:54 am

Olá!

Eu tenho essa mesma ferramenta no meu fórum, então repasso o código: (créditos ao Kyo Panda)
Código:
$(function() {
  var deferreds, color;
  deferreds = [];
  if (!$.cookie) {
    deferreds.push($.getScript('http://illiweb.com/rsc/43/frm/jquery/cookie/jquery.cookie.js'));
  }
  $.when.apply(null, deferreds).then(function() {    
    $('#right').append(
      '<div class="module main">' +
        '<div class="main-head">' +
          '<div class="h3">Escolha sua cor</div>' +
        '</div>' +
        '<div class="main-content color-chooser clearfix"><table class="coresforum"><tr><td>' +
          '<a style="display: block; height: 40px; width: 40px; background-color: #4575B4;" href="javascript:void(0)"></a></td>' +
          '<td><a style="display: block; height: 40px; width: 40px; background-color: #75B445;" href="javascript:void(0)"></a></td>' +
          '<td><a style="display: block; height: 40px; width: 40px; background-color: #815381;" href="javascript:void(0)"></a></td>' +
          '<td><a style="display: block; height: 40px; width: 40px; background-color: #E24C4C;" href="javascript:void(0)"></a></td>' +
          '<td><a style="display: block; height: 40px; width: 40px; background-color: #14A085;" href="javascript:void(0)"></a></td>' +
        '</tr></table></div>' +
      '</div>'
    );
    $('.color-chooser a').on('click', function() {
      $.cookie('color-chooser', $(this).css('background-color'));
      location.reload(0);
    });
  });
  if (document.cookie.indexOf('color-chooser') !== -1) {
    var cookies, parts, key, value;
    cookies = document.cookie.split(';');
    $.each(cookies, function() {
      parts = this.split('=');
      key = $.trim(parts[0]);
      value = $.trim(parts[1]);
      if (key === 'color-chooser') {
        $('<style>', {
          text: '.pun .frm .frm-buttons input, a.button1, a.button2, button.button2, input.button1, input.button2, input[type="button"] { border: 1px solid  ' + decodeURIComponent(value) + '  !important; } .pun .frm .frm-buttons input, a.button1, a.button2, button.button2, input.button1, input.button2, input[type="button"], #separar, .topicHot, p.paging a[href*="/t"], th.tcl, th.tcr, thead .tc1, thead .tc2, thead .tc3, thead .tc4, #backTopo, .entry-content p:not(:empty), .main .main-head { background-color: ' + decodeURIComponent(value) + ' !important; } a.forumName { color: ' + decodeURIComponent(value) + ' !important; } table#topo #pun-navlinks a:hover {border-bottom: 3px solid ' + decodeURIComponent(value) + '  !important; }'
        }).appendTo('body');
      }
    });
  }
});
Este código adiciona um widget, abaixo dos widget que já tem! Neste caso no lado direito.
Podemos coloca-lo de outra forma, como quiser, mas com o mesmo princípio.
Também temos que escolher que cores quer que existam para ser possível serem mudadas e onde quer que as cores mudem. É esta a parte mais delicada.

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum