Personalizar o fundo do nome do usuário

Qual é minha questão:
Olá pessoal,

Estou modificando um pouco o perfil do tópico do meu fórum. Agora só quero fazer mais uma mudança, mas não estou conseguindo fazê-la. Alguém poderia me ajudar?

Gostaria de colocar um background atrás no nome do usuário. A imagem abaixo ilustra como se encontra o perfil atualmente (2) e como eu gostaria que ficasse (1):


Eu tentei acrescentar o código abaixo no CSS, mas o problema é que a imagem só aparecia numa pequena região atrás do nome. Então pensei que talvez tivéssemos que criar uma table atrás do nome, nas proporções da imagem que eu quero adicionar (181px x 27px). Desse modo a imagem aparecerá por inteiro.

Código:

.name{
background-image: url('http://i.imgur.com/thLdlWU.png');
}

Sugestões para fazer isso?

Obrigado,
Kvothe

Endereço do meu fórum:
http://landofhaeron.forumeiros.com

Versão do fórum:
PHPBB2

Olá,

Tente usar este colega:

Código:


.name a strong {
background: url('http://i.imgur.com/thLdlWU.png')!important;
padding: 10px;
}


Olá Alex,

Quase funcionou, o resultado foi esse:

Até mais,
Kvothe

Olá,

Troque o CSS passado a cima por esse:

Código:


.name a strong {
    background: url("http://i.imgur.com/thLdlWU.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    padding-bottom: 47px;
    padding-left: 47px;
    padding-right: 47px;
    padding-top: 10px !important;
}


Resultado:


Cordiais Saudações;
Alex!

Olá Alex!

Fiz uma pequena alteração no padding e ficou perfeito (63px). No entanto, há um problema: a class utilizada é .name e ela não aparece apenas no perfil o tópico, acabo de perceber também que quando se visualiza os tópicos de um fórum, a coluna "Autor" também fica com essa imagem.

Há como por apenas no perfil? Eu vi que o id dessa class é 18, tem algo a ver?

Olá,

Substitua o código por este:

Código:


.post .name a strong {
    background: url("http://i.imgur.com/thLdlWU.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    padding-bottom: 47px;
    padding-left: 47px;
    padding-right: 47px;
    padding-top: 10px !important;
}


Perfeito amigo!

Última pergunta: saberia me dizer por que há uma diferença nos usuários da imagem abaixo?


Muito obrigado pela ajuda,
Kvothe

Olá

O senhor se refere na grossura da fonte?
Caso seja isso , tente este código abaixo:

Código:


.post .name a strong {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-weight: normal !important;
}


Cordiais Saudações;
Alex!

Olá,

Na verdade, me referia a imagem que colocamos atrás do nome. Se reparar, no usuário de cima, a imagem não aparece por completo, enquanto que no de baixo sim.

Até mais,
Kvothe

Descobri que essa variação se dá devido a diferença entre os nomes dos usuários. Portanto esse código não será muito viável. Será que há algum modo de deixar o tamanho fixo? Para que a imagem fique sempre a mesma?

Talvez criando a table que eu lhe disse, ou algo do tipo..

Obrigado,
Kvothe


Estava fuçando neste site e consegui encontrar um modo de fazer com que a imagem apareça sempre por inteiro. Funcionou com o código abaixo:

Código:

/*--------BG - Nome do usuário [post]--------*/
.post .name {
background: url("http://i.imgur.com/GCM32zn.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
width:187px;
height:33px;
border:0px;
margin-bottom: -15px;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}

Só encontrei uma falha, que não é muito preocupante, mas que se possível, gostaria de arrumar com a ajuda de vocês. Há um espaço entre o nome e os ícones, e esse espaço varia dependendo do navegador a se utilizar (Mozilla ou Chrome). A imagem abaixo mostra o que ocorre:


Sugestões para melhorar o código e evitar esse errinho?

Obrigado,
Kvothe

UP

@Kvothe
Olá, até tem como resolver sim, mas sinceramente: Nunca achei o Google Chrome um navegador! Nada contra pois nem uso...
Sempre com problemas aqui e ali, atualmente tem problemas com o editor de CSS do fórum, várias discrepâncias entre coordenadas com outros navegadores...

Mas isso é uma briga entre gigantes, um pouco sem sentido e desleal, até porque cada um quer ter/fazer seu próprio padrão de regras e nenhum chega a um consenso em conjunto, só o básico!

Se ainda sim desejares compatibilizar as coordenadas, saiba que ao poucos um padrão estará sendo estabelecido e com isso um único trecho de código funcionará em todos de forma igual.

Farei testes e retorno em seguida,

JS

Eu entendo perfeitamente o seu ponto. Depois do problema com o CSS eu parei de usar o Chrome e ando usando mais os Firefox.

O que me preocupa é o fato de esses navegadores serem os mais utilizadados e, portanto, é bem possível que muitos de meus membros utilizem um ou outro. É por isso que gostaria de compatibilizar.

Mas, enfim, se for algo complicado, não será necessário, até porque não esta ruim em nenhum dos navegadores, só acho que no Chrome a distância esteja um pouco exagerada.

Obrigado novamente pela sua atenção,
Kvothe

UP (só para não fecharem o tópico)

Se não houver solução, podem fechar aqui   

Obrigado pela ajuda e atenção,
Kvothe

Kvothe escreveu:Se não houver solução, podem fechar aqui   

Obrigado pela ajuda e atenção,
Kvothe

Olá amigo!

Em se tratando disso existe sim uma solução, peço que aguarde mais um pouco até que possamos resolver ok?

Até mais,

JS

Tudo bem,

Obrigado!