Personalizar campo de prêmios

[YouTube3]

Detalhes da questão

Endereço do fórum: http://familytudo2.forumeiros.com
Versão do fórum: PunBB

Descrição

Boa tarde,

Olá, eu olhei "2" tutoriais de como colocar medalhas para os membros.
Realmente os dois tutoriais que olhei ficarão errados em meu fórum.

Os dois tutoriais que olhei:
https://ajuda.forumeiros.com/t35486-
https://ajuda.forumeiros.com/t17049-

Eu queria que ficassem assim porem não ficarão:
https://i.imgur.com/pY5quK1.jpg

Enfim eu tenho os próprios ícones que peguei de um outro fórum.

Por exemplo, quando o membro completasse um ano no fórum,
ele ganharia o ícone de um ano no fórum automaticamente entende?
Se ele se apresentasse ele ganharia o ícone de apresentação automaticamente enfim.

Meus ícones:

Apresentação: https://i.imgur.com/RxY4JO5.jpg
Medalha de um Ano: https://i.imgur.com/l6c63jc.gif
Palmeiras: https://i.imgur.com/Nc8J2np.png
Santos: https://i.imgur.com/rN8T5ui.png
São Paulo: https://i.imgur.com/90uCiLp.png
Flamengo: https://i.imgur.com/zw2fnS8.png
Vasco: https://i.imgur.com/Iu8Frst.png
Corinthians: https://i.imgur.com/OraKpHo.png

Até mais.

[Maori]

Olá!

Poderia nos fornecer a imagem de como eles ficaram ?

[YouTube3]

Olá,

Aqui está: https://i.imgur.com/t3bdtt9.jpg

Quero deixa-lo assim:



Se for ver bem embaixo da reputação tem uns quadradinhos, é dentro desses quadrados está os prêmios.

[Maori]

Amigo, mas imagens que você tentou colocar lá, são do mesmo tamanho ?

[YouTube3]

Não era porem redimensionei, e está tudo no mesmo tamanho agora.

[Maori]

Se você quiser deixar como a do exemplo que você e mostrou aí, terá que tirar essas frases!

[YouTube3]

Sim porem se eu tiro as frases os ícones desaparece. 
Eu quero deixar exatamente como está neste fórum: http://invitesexpress.omeuforum.net/

[while]

Olá, tentei fazer o mais parecido possível.

Adicione esse código em sua folha de estilo css:

Código:

.pun .user .user-info img {
    background: none repeat scroll 0 0 #FFF;
    border: 1px solid #D8D8D8;
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    height: 30px;
    margin-bottom: 5px;
    padding: 1px;
    vertical-align: middle;
    width: 30px;
}
div.user-info > div:nth-child(7), div.user-info > div:nth-child(8) {font-size:0px;}
div.user-info > div:nth-child(8) {margin-top:-47px;background:none!important;margin-left:40px;border:none!important;margin-bottom:10px;}
div.user-info > div:nth-child(7) {margin-top:10px;background:none!important;border:none!important;}

Resulta?
Até mais.

[YouTube3]

O campo da "Reputação" Sumiu é ficou um quadrado abaixo do avatar.
Se for possível botar os ícones dentro daquele quadrado porem lá embaixo entende?



1° Dúvida, Eu criei os campos dos ícones em "Zona de Texto" está certo?
Até mais.

[while]

É um tanto complicado, o que fode demais seria esses textos, como bem dito pelo Paladinos, faz com que meu teste se complique.

Faça o seguinte, acesse:

Painel de Controle -> Usuarios & Grupos -> Usuarios -> Perfis

E nesse campo de prêmios clique em configurar, e altere essa opção aqui: Tipo de visualização
deixe em ícone.

Depois troque o css passado por este:

Código:

.pun .user .user-info img {
    background: none repeat scroll 0 0 #FFF;
    border: 1px solid #D8D8D8;
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    height: 30px;
    margin-bottom: 5px;
    padding: 1px;
    vertical-align: middle;
    width: 30px;
}

Depois de feito isto me avise no tópico para eu ver o resultado, e fazer novos testes.
Até mais.

[YouTube3]

Ele já está em Tipo de Visualização: ícone.

Está configurado assim não sei se está certo botei em Zona de Texto:



Ali em visualização está marcado mensagens porem ele aparece no perfil também:

[Harleen]

Olá, experimente configurar os campos dessa forma

Para a Medalha:

Apresentação:

Para os times:

Resultado no perfil e nas mensagens:

Até mais

[YouTube3]

Fiz como você pediu porem sem resultado.
Quero que eles ficam um do lado do outro é continua um embaixo do outro.
É também eu marco a opção Visualização: Marco mensagens ela vai para o perfil.

[PrisoN†BreaK]

Crie um novo campo e preencha como este:
https://imgur.com/NGrsxN5
Após isso, salve.

Vá em seu perfil e preencha como aqui:

https://imgur.com/XgUvCBu

As imagens devem fica dentro do [img][/img].

Resultado:

https://imgur.com/5tAZbbL

O meu não ficou ajustado o tamanho da imagem corretamente pois precisa de um código CSS para que isso aconteça, e não tenho em minha folha.

[Harleen]

Olá, nesse campo medalha de um ano, deixe a Descrição e URL do ícone vazios, não esqueça também de deixar o Separador em Nenhum como na imagem que postei acima, depois vá no perfil do usuário e preencha as informações,
veja no print: http://prntscr.com/cipwuq

No tópico: http://prntscr.com/ciq03b

Deixe-os também depois de todos os campos, assim : http://prntscr.com/ciq2gs

Até mais

[YouTube3]

Bom Apresentação é Um ano no Fórum eu botei uma imagem certo?
É no time botei lista de imagem fiz como você disse.

Porem no meu ele não fica um do lado do outro ele fica um embaixo do outro.

[Harleen]

Verifique se o Separador está em Quebra de linha ou outro, caso esteja, altere para Nenhum de todos os campos, pois nos meus testes funciona, veja http://prntscr.com/ciqwut

Caso ainda não funcione, libere para Convidados.

Até mais

Editado
Veja nos prints como eu fiz

http://prntscr.com/cir3f5
http://prntscr.com/cir3ow
http://prntscr.com/cir3ye

[YouTube3]

Sim está em nenhum porem ele fica embaixo do outro.
Já liberei para os convidados até.

[Cepheus]

Adicione no seu css:

Código:

.post_field + br + .post_field + br + .post_field + br + .post_field, .post_field + br + .post_field + br + .post_field + br + .post_field +  .post_field, .post_field + br + .post_field + br + .post_field + br + .post_field +  .post_field + .post_field,.post_field + br + .post_field + br + .post_field + br + .post_field +  .post_field + .post_field + .post_field{
border: 0px solid #DDD;
border-left: 0px solid #DDD;
margin-bottom:0px;
padding: 4px;
text-align: center;
float: left;
}

[YouTube3]

Funciono porem tem como botar eles dentro de um quadradinho?
É se for possível centralizar os prêmios.

Ficou assim: https://i.imgur.com/9BPmJjY.jpg

Tem como deixar assim dentro dos quadrados: https://i.imgur.com/LlBGYLM.jpg

até mais.

[PrisoN†BreaK]

Adicione esse código em sua folha de estilo:

Código:

.pun .user .user-info .label:empty + img {
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  background: #fff;
  border: 1px solid #d8d8d8;
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  height: 30px;
  margin-bottom: 5px;
  padding: 1px;
  vertical-align: middle;
  width: 30px;
}

[YouTube3]

Deu certo apenas mais 2 coisas, se for possível juntar mais os ícones.
É ali onde está marcado de vermelho juntar mais também está muito afastado.

[while]

Olá, adicione mais esse código em sua folha de estilo css:

Código:

.pun .user .user-info .label:empty + img {margin-right:-4px;margin-bottom:-1px;}

OBS: Margin-bottom seria para diminuir/aumenta o espaço debaixo dos icones, e o margin-right pra distanciar/aproximar mais o icone que está do lado direito.

Até mais.

[YouTube3]

Deu certo apenas mais uma dúvida.

É possível a pessoa se apresentar é receber o ícone de apresentação.
Automaticamente em seu perfil no caso nas postagens?

[while]

Impossível autor, somente você alterando manualmente pelo painel.

Até mais.

[YouTube3]

Obg pode fechar.

[while]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".