Você não está conectado. Conecte-se ou registre-se

[Modificar] Visualização Quantidade de Reputações

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

Júnior Duarte

avatar
Membro elite


  • Descrição:

Olá galera, atualmente utilizo ícones para as Reputações nos tópicos. 

Gostaria de modificar a forma com que a quantidade de votos positivos ou negativos são mostrados.
Na forma que está agora aparece uma barra verde com a porcentagem e numero de votos recebidos, acredito que seja o padrão do forumeiros.

Gostaria da mesma forma visualizada aqui na BS, apenas a visualização, os ícones e a forma de atribuir a reputação com positivos e negativos seja mantida, apenas que lugar da barra verde aparece a quantidade. Veja no exemplo abaixo.

Atualmente a visualização está assim:



Olham como a barra verde da reputação aparece depois de atribuída uma reputação ao tópico. Gostaria que essa barra, apenas ela, virasse assim como na imagem abaixo:



Conto com a ajuda de vocês. hehehe

  • Informações:



Fórum:http://invitesexpress.omeuforum.net/Versão:PUNBB

Ver perfil do usuário

Je4n

avatar
Membro ativo

Veja (Não é exatamente igual): http://www.bestskins.net/t6146-tutorial-botao-curtir-nas-mensagens



{WASD}
Ver perfil do usuário

Júnior Duarte

avatar
Membro elite

Olá amigo, obrigado, mas não é isso que quero, não quero mudar o atual sistema, quero apenas modificar a aparência da visualização da quantidade de votos que o tópico recebeu, da barra verde para o do exemplo na imagem
Júnior Duarte escreveu:Gostaria da mesma forma visualizada aqui na BS, apenas a visualização, os ícones e a forma de atribuir a reputação com positivos e negativos seja mantida, apenas que lugar da barra verde aparece a quantidade.

.

Ver perfil do usuário

MzS

avatar
Membro ativo

Se foi o que eu entendi, vamos lá:

Acesse o Painel de Controle  Módulos  HTML e Javascript  "Aba" Gestão de códigos JavaScripts.

Crie um novo JS com investimento em todas as páginas e adicione o seguinte código:

Código:
/*
* Código: Like System
* Data de criação: 18/07/2014
* Atualização: 19/07/2015
* Autor: Daemon
* Versão: 1.3
* Veja mais em: http://ajuda.forumeiros.com
* Não distribuir, ou remover os créditos do autor
*/
function d_like_system() {
  $('head').append(
  '<style type="text/css">' +
  '.like_post {' +
  '  float: right;' +
  '  list-style: none;' +
  '  margin-right: 3px;' +
  '}' +
  '.like_post .qtd {' +
  '  background-color: #333;' +
  '  color: #fff;' +
  '  font-size: 13px;' +
  '  padding: 0 5px;' +
  '  border-radius: 3px;' +
  '  font-weight: 700;' +
  '  margin-left: 3px;' +
  '  -moz-border-radius: 3px;' +
  '  -webkit-border-radius: 3px;' +
  '}' +
  '.like_post .plus {' +
  '  color: green;' +
  '}' +
  '.like_post .minus {' +
  '  color: red;' +
  '}' +
  '.like_button img {' +
  '  margin-bottom: -3px;' +
  '}' +
  '.like_button {' +
  '  padding: 3px;' +
  '  -moz-border-radius: 3px;' +
  '  margin-right: 5px;' +
  '  cursor: pointer;' +
  '  -moz-box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset!important;' +
  '  -webkit-border-radius: 3px;' +
  '  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset!important;' +
  '  background: #e4e4e4 url(http://i.imgur.com/lvfV1wd.png) repeat-x 0 0!important;' +
  '  border: 1px solid #a6a6a6;' +
  '  border-bottom-color: #979797!important;' +
  '  border-radius: 3px;' +
  '  box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset!important;' +
  '}' +
  '.BS_disabled .like_button {' +
  '  cursor: default;' +
  '  opacity: 0.5;' +
  '}' +
  '</style>'
  );
  // Imagens de reputação
  var rep_UP = 'http://i.imgur.com/YCo2xVa.png',
      rep_DOWN = 'http://i.imgur.com/TzlArci.png';

  for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                var plus = 0,
                    minus = 0,
                    barra = $('.vote-bar', vote)[0],
                    botao = $('.vote-button', vote)[0];                     
                if (barra) {
                    var numbarra = barra.title.match(/\d+/g);
                    plus = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    minus = Math.round(parseInt( numbarra[1] ) - plus);
                }

                botao = botao ? '<li><span onclick="lsVoto(\'' + botao.firstChild.href + '\',this);" class="like_button"><img src="' + rep_UP + '" alt="+"><span class="qtd">' + plus + '</span></span><span onclick="lsVoto(\'' + botao.nextSibling.nextSibling.firstChild.href + '\',this);" class="like_button"><img src="' + rep_DOWN + '" alt="-"><span class="qtd">' + minus + '</span></span></li>' : '<li class="BS_disabled"><span class="like_button"><img src="' + rep_UP + '" alt="+"><span class="qtd">' + plus + '</span></span><span class="like_button"><img src="' + rep_DOWN + '" alt="-"><span class="qtd">' + minus + '</span></span></li>';

                var htmlFinal = '<ul class="like_post">' + botao + '</ul>';

    $('.postbody', vote.parentNode.parentNode.parentNode.parentNode).after( htmlFinal );
  }
  x.remove();
};
function lsVoto(b,a) {
  a.onclick = '#';
    $.get(b, function() {
    var c = a.lastChild,
        b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
        c.innerHTML = c.innerHTML.replace(/\d+/,b);
        a.parentNode.className += ' BS_disabled';
    });
}
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
      d_like_system();
  }
}


Atenciosamente,
Equipe BestSkins.





Olá
Leia as regras.
Leia os termos de uso
Ver perfil do usuário

Júnior Duarte

avatar
Membro elite

Opa amigo @MzS obrigado, mas vou esperar o nosso amigo @Je4n postar um que ele me mostrou.

Ver perfil do usuário

Je4n

avatar
Membro ativo

Adicione o seguinte JS com investimento nos tópicos:
Código:
/*
* Código: Like System
* Data de criação: 18/07/2014
* Atualização: Original em 19/07/2015 / Edições em 09/08/2015
* Autor: Daemon 
* Edição/Atualização de código: Je4n
* Versão: 1.3.1
* Veja mais em: http://ajuda.forumeiros.com
* Não distribuir, ou remover os créditos do autor
*/
function d_like_system() {
  $('head').append(
  '<style type="text/css">' +
  '.like_post {' +
  '  float: right;' +
  '  list-style: none;' +
  '  margin-right: 3px;' +
  '  margin-bottom: 13px;' +
  '}' +
  '.like_post .qtd {' +
  '  color: #fff;' +
  '  font-size: 13px;' +
  '  padding: 3px 5px;' +
  '  border-radius: 3px;' +
  '  font-weight: 700;' +
  '  margin-left: 5px;' +
  '  -moz-border-radius: 3px;' +
  '  -webkit-border-radius: 3px;' +
  '}' +
  '.qtd.verde {' +
  '  background-color: green;' +
  '}' +
 '.qtd.vermelho {' +
  '  background-color: red;' +
  '}' +
  '.like_post .plus {' +
  '  color: green;' +
  '}' +
  '.like_post .minus {' +
  '  color: red;' +
  '}' +
  '.like_button {' +
  '  padding: 5px;' +
  '  -moz-border-radius: 3px;' +
  '  margin-right: 5px;' +
  '  margin-bottom: 5px;' +
  '  border-color: rgba(0,0,0,.1);' +
  '  border-radius: 3px;' +
  '  border-style: solid;' +
  '  border-width: 1px;' +
  '  cursor: pointer;' +
  '  -webkit-border-radius: 3px;' +
  '  background-color: #f4f4f4;' +
  '  border-radius: 3px;' +
  '}' +
  '.like_button:hover {' +
  '  background-color: #EAEAEA;' +
  '}' +
  '.BS_disabled .like_button {' +
  '  cursor: default;' +
  '  opacity: 0.6;' +
  '}' +
  '</style>'
  );
  // Códigos de reputação (Font Awesome) Atualizado por WASDev Fórum
  var rep_UP = 'fa fa-thumbs-up',
      rep_DOWN = 'fa fa-thumbs-down';

  for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                var plus = 0,
                    minus = 0,
                    barra = $('.vote-bar', vote)[0],
                    botao = $('.vote-button', vote)[0];                      
                if (barra) {
                    var numbarra = barra.title.match(/\d+/g);
                    plus = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    minus = Math.round(parseInt( numbarra[1] ) - plus);
                }

                botao = botao ? '<li><span onclick="lsVoto(\'' + botao.firstChild.href + '\',this);" class="like_button"><i class="' + rep_UP + '"></i><span class="qtd verde">' + plus + '</span></span><span onclick="lsVoto(\'' + botao.nextSibling.nextSibling.firstChild.href + '\',this);" class="like_button"><i class="' + rep_DOWN + '"></i><span class="qtd vermelho">' + minus + '</span></span></li>' : '<li class="BS_disabled"><span class="like_button"><i class="' + rep_UP + '"></i><span class="qtd verde">' + plus + '</span></span><span class="like_button"><i class="' + rep_DOWN + '"></i><span class="qtd vermelho">' + minus + '</span></span></li>';

                var htmlFinal = '<ul class="like_post">' + botao + '</ul>';

    $('.postbody', vote.parentNode.parentNode.parentNode.parentNode).after( htmlFinal );
  }
  x.remove();
};
function lsVoto(b,a) {
  a.onclick = '#';
    $.get(b, function() {
    var c = a.lastChild,
        b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
        c.innerHTML = c.innerHTML.replace(/\d+/,b);
        a.parentNode.className += ' BS_disabled';
    });
}
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
      d_like_system();
  }
}
Agora vamos adicionar a Font-Awesome no seu fórum.

Siga esses atalhos: Templates > Geral > overall_header


Adicione o seguinte código
Código:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
em baixo de:
Código:
<meta http-equiv="content-style-type" content="text/css" />

Exemplo ilustrativo:


É isso. salve e publique seu template.



{WASD}
Ver perfil do usuário

Júnior Duarte

avatar
Membro elite

Opa @Je4n ficou bom demais heim. Tem como deixar ele no mesmo lugar da Reputação padrão? La onde estava a antiga fixo, ele se move com o texto.

Ver perfil do usuário

Je4n

avatar
Membro ativo

Troque o Js por esse (Não pude testar, mas creio que está correto):
Código:
/*
* Código: Like System
* Data de criação: 18/07/2014
* Atualização: Original em 19/07/2015 / Edições em 09/08/2015
* Autor: Daemon
* Edição/Atualização de código: Je4n
* Versão: 1.3.1
* Veja mais em: http://ajuda.forumeiros.com
* Não distribuir, ou remover os créditos do autor
*/
function d_like_system() {
  $('head').append(
  '<style type="text/css">' +
  '.like_post {' +
  '  float: right;' +
  '  list-style: none;' +
  '  margin-top: 14px;' +
  '}' +
  '.like_post .qtd {' +
  '  color: #fff;' +
  '  font-size: 13px;' +
  '  padding: 3px 5px;' +
  '  border-radius: 3px;' +
  '  font-weight: 700;' +
  '  margin-left: 5px;' +
  '  -moz-border-radius: 3px;' +
  '  -webkit-border-radius: 3px;' +
  '}' +
  '.qtd.verde {' +
  '  background-color: green;' +
  '}' +
 '.qtd.vermelho {' +
  '  background-color: red;' +
  '}' +
  '.like_post .plus {' +
  '  color: green;' +
  '}' +
  '.like_post .minus {' +
  '  color: red;' +
  '}' +
  '.like_button {' +
  '  padding: 8px;' +
  '  -moz-border-radius: 3px;' +
  '  margin-right: 5px;' +
  '  margin-bottom: 5px;' +
  '  border-color: rgba(0,0,0,.1);' +
  '  border-radius: 3px;' +
  '  border-style: solid;' +
  '  border-width: 1px;' +
  '  cursor: pointer;' +
  '  -webkit-border-radius: 3px;' +
  '  background-color: #f4f4f4;' +
  '  border-radius: 3px;' +
  '}' +
  '.like_button:hover {' +
  '  background-color: #EAEAEA;' +
  '}' +
  '.BS_disabled .like_button {' +
  '  cursor: default;' +
  '  opacity: 0.6;' +
  '}' +
  '</style>'
  );
  // Códigos de reputação (Font Awesome) Atualizado por WASDev Fórum
  var rep_UP = 'fa fa-thumbs-up',
      rep_DOWN = 'fa fa-thumbs-down';

  for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                var plus = 0,
                    minus = 0,
                    barra = $('.vote-bar', vote)[0],
                    botao = $('.vote-button', vote)[0];                      
                if (barra) {
                    var numbarra = barra.title.match(/\d+/g);
                    plus = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    minus = Math.round(parseInt( numbarra[1] ) - plus);
                }

                botao = botao ? '<li><span onclick="lsVoto(\'' + botao.firstChild.href + '\',this);" class="like_button"><i class="' + rep_UP + '"></i><span class="qtd verde">' + plus + '</span></span><span onclick="lsVoto(\'' + botao.nextSibling.nextSibling.firstChild.href + '\',this);" class="like_button"><i class="' + rep_DOWN + '"></i><span class="qtd vermelho">' + minus + '</span></span></li>' : '<li class="BS_disabled"><span class="like_button"><i class="' + rep_UP + '"></i><span class="qtd verde">' + plus + '</span></span><span class="like_button"><i class="' + rep_DOWN + '"></i><span class="qtd vermelho">' + minus + '</span></span></li>';

                var htmlFinal = '<ul class="like_post">' + botao + '</ul>';

    $('.postmain', vote.parentNode.parentNode.parentNode.parentNode).after( htmlFinal );
  }
  x.remove();
};
function lsVoto(b,a) {
  a.onclick = '#';
    $.get(b, function() {
    var c = a.lastChild,
        b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
        c.innerHTML = c.innerHTML.replace(/\d+/,b);
        a.parentNode.className += ' BS_disabled';
    });
}
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
      d_like_system();
  }
}



{WASD}
Ver perfil do usuário

Júnior Duarte

avatar
Membro elite

Olá amigo o código não funciona. A parte dos likes sumiu.

Ver perfil do usuário

Je4n

avatar
Membro ativo

Adicione esse: http://pastebin.com/UGnekt4Q



{WASD}
Ver perfil do usuário

Júnior Duarte

avatar
Membro elite

Olá amigo agora funcionou perfeitamente. Obrigado pela ajuda, vc é 10.

Ver perfil do usuário

MzS

avatar
Membro ativo

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]





Olá
Leia as regras.
Leia os termos de uso
Ver perfil do usuário

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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