Olá amigos, hoje trago um tutorial com várias formas de estilizar o nick dos membros..

Então vamos la!

Podemos fazer por JQuery ou por CSS, eu vou mostrar como fazer em ambas as opções:

CSS

---

Adicionando uma estrela ou qualquer pequena imagem ao nick do usuário

Código:

a[href="/u1"] {
background: rgba(0, 0, 0, 0) url('https://cdn1.iconfinder.com/data/icons/fatcow/16/award_star_bronze_3.png') no-repeat;
padding: 0 0 3px 17px;
}

Analise o código

a[href="/u1"] {
background: rgba(0, 0, 0, 0) url('https://cdn1.iconfinder.com/data/icons/fatcow/16/award_star_bronze_3.png') no-repeat;
padding: 0 0 3px 17px;
}

Troque o /u1 pelo ID do usuário.
E a URL por alguma imagem que você queira.

O resultado será semelhante a este


Algumas imagens para você usar




Ps: O processo de edição de todos é o mesmo, basta mudar o ID do usuário e a URL da imagem..

Imagem de fundo no nick do usuário

Código:

a[href="/u1"] {
background: rgba(0, 0, 0, 0) url('http://img338.imageshack.us/img338/5646/52502626.gif');
}

Este efeito ficara passando a seguinte imagem no fundo do nick do usuário


Deixando o nome do usuário em negrito

Código:

a[href="/u1"] {
font-weight:bold;
}

Colocando uma linha 'riscando' o nome do usuário (geralmente usado em usuário banidos)

Código:

a[href="/u1"] {
text-decoration: line-through;
}

Ps: Para adicionar uma cor no nick basta utilizar a propriedade 'color' do CSS

Código:

a[href="/u1"] {
color: #f00;
}

Adicionando efeito neon no nick do usuário

Código:

a[href="/u1"] {
text-shadow: #00569C 0 0 5px;
}

Espero que gostem

Olá!

Confesso já conhecer todos, mas será de grande ajuda para os que estão começando!
Existe outros, como o 'text-decoration: underline' (fica com uma linha embaixo), 'text-decoration: overline' (fica com uma linha em cima)

Até!

Sim sim, são bem básicos, mas talvez ajude uma galera que ta começando xD

@Wagner'

E com isso você ganha reputação, pois membros que não conhecem, podem gostar e lhe agradecer!

Melhor do que conhecer e não passar adiante...

JS