Css para reputação

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

Resolvido Css para reputação

Mensagem por aemdia6 em 19/03/14, 11:01 pm

Qual é minha questão:
Olá, gostaria de deixar a reputação do meu desse jeito ó:



Vlw..

Endereço do meu fórum:
http://xgamesaem.forumclan.com

Versão do fórum:
PHPBB3


Última edição por aemdia6 em 26/03/14, 09:20 am, editado 1 vez(es)
avatar

aemdia6
Usuário avançado

Masculino
Inscrito dia : 26/07/2013
Mensagens : 307
Pontos Ativos : 474

Ver perfil do usuário http://xgamesaem.forumclan.com/

Resolvido Re: Css para reputação

Mensagem por Alex Habilidade em 20/03/14, 12:17 am

Olá,

Crie uma nova página JavaScript com investimento nos tópicos e coloque o código abaixo:
Código:

    $(document).ready(function() {
    $(".pun .post .user").each(function(){
    $(this).html($(this).html().replace(/<span class="label/g,'<dd><div class="post_field"><span class="label'));
    });
    $('.user-info .post_field:contains("Reputação")').each(function() {
    var rep = $(this).text().match(/\d+/g);
    $(this).addClass('reputation');
    $(this).append('<span class="title" style="font-weight:normal"></span>');
    if(rep == 0) {
            $(this).find('.title').text('Neutro');
            $(this).addClass('zero');
    }
    else if(rep >= 1 && rep < 5) {
            $(this).find('.title').text('Iniciante');
    }
    else if(rep >= 5 && rep < 10) {
            $(this).find('.title').text('Membro ativo');
    }
    else if(rep >= 10) {
            $(this).find('.title').text('Excelente');
    }
    });
    });

Entendendo o código...
Localize esta parte do código:
Código:

else if(rep >= 1 && rep < 5) {
        $(this).find('.title').text('Iniciante');
}

- Isso significa que membros com reputação igual ou maior que 1, e menor do que 5 terão o título de iniciante. Onde está escrito :contains("Reputação") se aplicará o efeito. Se o seu campo de reputação estiver com outro nome, basta mudar no código nesta parte.


Após isso, adicione o código abaixo em sua folha CSS:
Código:

/*FÓRUM BESTSKIN*/
    .reputation {
      background-color: rgb(141, 177, 62)!important;
      background-image: url(http://i38.servimg.com/u/f38/17/31/71/58/highli10.png);
      border-radius: 3px;
      color: rgb(255, 255, 255);
      font-weight: bold;
      display: block;
      margin: 0 auto;
      margin-bottom: 3px;
      padding: 3px 7px;
      max-width: 125px;
      text-align: center;
      text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px;
      background-position: 0px 1px;
      background-repeat: repeat no-repeat;
    }
    .reputation.zero {
      background-color: rgb(16, 16, 16)!important;
      color: rgb(255, 255, 255);
    }

E salve!
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Css para reputação

Mensagem por aemdia6 em 20/03/14, 12:50 am

Olá amigo, ficou bom, só teve esse erro aqui ó:
vlw
avatar

aemdia6
Usuário avançado

Masculino
Inscrito dia : 26/07/2013
Mensagens : 307
Pontos Ativos : 474

Ver perfil do usuário http://xgamesaem.forumclan.com/

Resolvido Re: Css para reputação

Mensagem por aemdia6 em 22/03/14, 12:26 pm

Olá alguem, ajuda aew...  Tive uma idéia!  vlw...
avatar

aemdia6
Usuário avançado

Masculino
Inscrito dia : 26/07/2013
Mensagens : 307
Pontos Ativos : 474

Ver perfil do usuário http://xgamesaem.forumclan.com/

Resolvido Re: Css para reputação

Mensagem por Hancki em 22/03/14, 02:10 pm

Olá!

Substitua os códigos acima por estes!
JS:
Código:
$(document).ready(function() {
$(".pun .post .user").each(function(){
$(this).html($(this).html().replace(/<span class="label/g,'<dd><div class="post_field"><span class="label'));
});
$('.user-info .post_field:contains("Reputação")').each(function() {
var rep = $(this).text().match(/\d+/g);
$(this).addClass('reputation');
$(this).append('<span class="title" style="font-weight:normal"></span>');
if(rep == 0) {
        $(this).find('.title').text('Neutro');
        $(this).addClass('zero');
}
else if(rep >= 1 && rep < 5) {
        $(this).find('.title').text('Iniciante');
}
else if(rep >= 5 && rep < 10) {
        $(this).find('.title').text('Membro ativo');
}
else if(rep >= 10) {
        $(this).find('.title').text('Excelente');
}
});
});
CSS:
Código:
.reputation {
  background-color: rgb(141, 177, 62)!important;
  background-image: url(http://i38.servimg.com/u/f38/17/31/71/58/highli10.png);
  border--radius: 3px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  display: block;
  margin: 0 auto;
  margin-bottom: 3px;
  padding: 3px 7px;
  max-width: 125px;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px;
  background-position: 0px 1px;
  background-repeat: repeat no-repeat;
}
.reputation.zero {
  background-color: rgb(16, 16, 16)!important;
  color: rgb(255, 255, 255);
}
Testei aqui e deu OK!

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

Resolvido Re: Css para reputação

Mensagem por aemdia6 em 22/03/14, 03:03 pm

Olá, ficou do mesmo jeito, dá uma olhadinha...


http://xgamesaem.forumclan.com/t53-ultimaterx-se-apresentando


vlw. Muito feliz
avatar

aemdia6
Usuário avançado

Masculino
Inscrito dia : 26/07/2013
Mensagens : 307
Pontos Ativos : 474

Ver perfil do usuário http://xgamesaem.forumclan.com/

Resolvido Re: Css para reputação

Mensagem por aemdia6 em 24/03/14, 04:14 pm

Up!  Muito feliz
avatar

aemdia6
Usuário avançado

Masculino
Inscrito dia : 26/07/2013
Mensagens : 307
Pontos Ativos : 474

Ver perfil do usuário http://xgamesaem.forumclan.com/

Resolvido Re: Css para reputação

Mensagem por Kyo Panda em 24/03/14, 04:21 pm

Troque o código CSS por esse:

Código:
dd > .reputation {
  background-color: rgb(141, 177, 62)!important;
  background-image: url(http://i38.servimg.com/u/f38/17/31/71/58/highli10.png);
  border--radius: 3px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  display: block;
  margin: 0 auto;
  margin-bottom: 3px;
  padding: 3px 7px;
  max-width: 125px;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px;
  background-position: 0px 1px;
  background-repeat: repeat no-repeat;
}
dd > .reputation.zero {
  background-color: rgb(16, 16, 16)!important;
  color: rgb(255, 255, 255);
}

dd > .reputation span {
  color: #fff !important;
}

Créditos ao Hancki, pois minha alteração foi pífia.

Abraços. Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Css para reputação

Mensagem por aemdia6 em 24/03/14, 04:29 pm

olá, tem como deixar do mesmo jeito do fórum que indiquei acima, que cada membro tem uma cor especifica , por exemplo: excelente uma cor, membro ativo outra cor, membro neutro ou cor diferente e etc.. caso não entenda o que eu quero falar , acessa o link de onde eu vi esse efeito que dá pra entender melhor, vlw amigoo...  Muito feliz
avatar

aemdia6
Usuário avançado

Masculino
Inscrito dia : 26/07/2013
Mensagens : 307
Pontos Ativos : 474

Ver perfil do usuário http://xgamesaem.forumclan.com/

Resolvido Re: Css para reputação

Mensagem por aemdia6 em 25/03/14, 05:08 pm

up! Rindo 
avatar

aemdia6
Usuário avançado

Masculino
Inscrito dia : 26/07/2013
Mensagens : 307
Pontos Ativos : 474

Ver perfil do usuário http://xgamesaem.forumclan.com/

Resolvido Re: Css para reputação

Mensagem por Kyo Panda em 26/03/14, 09:11 am

@aemdia6 escreveu:olá, tem como deixar do mesmo jeito do fórum que indiquei acima [...]

Com o Javascript que está a utilizar, não. Triste
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Css para reputação

Mensagem por aemdia6 em 26/03/14, 09:17 am

Ok funcionou mesmo... eu que não tinha reparado ainda... vlw mesmo , Muito obrigado;;  Muito feliz 
avatar

aemdia6
Usuário avançado

Masculino
Inscrito dia : 26/07/2013
Mensagens : 307
Pontos Ativos : 474

Ver perfil do usuário http://xgamesaem.forumclan.com/

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