Css para reputação

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

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!

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

Olá alguem, ajuda aew...    vlw...

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

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


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


vlw. 

Up!  

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.

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...  

up!  

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

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

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