Nick com icone

Detalhes da questão

Endereço do fórum: http://policia-militar-sf.forumeiros.com/forum
Versão do fórum: phpBB3

Descrição

olá eu gostaria de saber como colocar um ícone de arvore de natal no meu nick como esse aqui > http://prntscr.com/hmgwup

Tenho aqui uma sugestão:

para staffs (membros em grupos)

CSS:

Código:

a[href*="/u"] strong {[size=16][/size]
    background: url("http://i39.servimg.com/u/f39/17/95/88/56/xmas_t10.png") no-repeat scroll 0 0%, url("http://i39.servimg.com/u/f39/17/95/88/56/backro10.gif") repeat scroll 0 0 rgba(0, 0, 0, 0);[size=16][/size]
    color: green;[size=16][/size]
    font-weight: bold;[size=16][/size]
    padding-left: 19px;[size=16][/size]
}[size=16][/size]
em {[size=16][/size]
    font-style: normal;[size=16][/size]
}[size=16][/size]
.color_red {[size=16][/size]
    color: #d81e1e;[size=16][/size]
}[size=16][/size]
.color_green {[size=16][/size]
    color: #1a9132;[size=16][/size]
}

JS (investimento em todas as páginas)

Código:

$(document).ready(function() {[size=16][/size]
    doChristmas();[size=16][/size]
    [size=16][/size]
    setTimeout(function() { doChristmas(); }, 1000);[size=16][/size]
});[size=16][/size]
function doChristmas() {[size=16][/size]
    $('a[href*="/u"] strong').each(function(){[size=16][/size]
        var letters = $(this).text().split('');[size=16][/size]
        $(this).text('');[size=16][/size]
        for(var i = 0; i < letters.length; i++){[size=16][/size]
            if(i % 2 == 0){[size=16][/size]
                $(this).append('<em class="color_red">' + letters[i] + '</em>');[size=16][/size]
            }else{[size=16][/size]
                $(this).append('<em class="color_green">' + letters[i] + '</em>');[size=16][/size]
            }[size=16][/size]
        }[size=16][/size]
    });[size=16][/size]
}

ou membros

Código:

a[href*="/u"] {[size=16][/size]
    background: url("http://i39.servimg.com/u/f39/17/95/88/56/xmas_t10.png") no-repeat scroll 0 0%, url("http://i39.servimg.com/u/f39/17/95/88/56/backro10.gif") repeat scroll 0 0 rgba(0, 0, 0, 0);[size=16][/size]
    color: green;[size=16][/size]
    font-weight: bold;[size=16][/size]
    padding-left: 19px;[size=16][/size]
}

não entendi oque eu edito no codigo de grupo pq eu coloquei de membro ficou assim

http://prntscr.com/hmi3mi

Veja essa mensagem do Shek nesse tópico.

https://ajuda.forumeiros.com/t109174-rank-em-css#765766

Até mais

Harleen escreveu:Veja essa mensagem do Shek nesse tópico.

https://ajuda.forumeiros.com/t109174-rank-em-css#765766

Até mais

minha pergunta tem nada haver com rank mais de boa!

Então, vou simplificar alguns códigos que você, que poderá usar:

Com fontawesome ( tree icon ), usado para os grupos/usuários do mesmo.

Código:

div [style*="cor do grupo"]::before{
  content: '\F1BB ';
  font-family: FontAwesome;
  font-size: 10.5px;
  margin-right: 4px;
  vertical-align: middle;
  }

Demo ver

Pôr o ícone somente a um ou a mais usuários:

Código:


a[href*="/uID"] {
    background: url("http://i39.servimg.com/u/f39/17/95/88/56/xmas_t10.png") no-repeat scroll 0 0%, url("http://i39.servimg.com/u/f39/17/95/88/56/backro10.gif") repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: green;
    font-weight: bold;
    padding-left: 19px;
}

@Edit

http://prntscr.com/hmi3mi

para tira um dos ícones, vá ao js, e remova o campo background: code ;

codigos não estão funcionando como pode ver na imagem abaixo

http://prntscr.com/hmmoz5

ranzatti escreveu:codigos não estão funcionando como pode ver na imagem abaixo

http://prntscr.com/hmmoz5

Qual deles você está a usar?

Pedxz escreveu:

ranzatti escreveu:codigos não estão funcionando como pode ver na imagem abaixo

http://prntscr.com/hmmoz5

Qual deles você está a usar?

esse aqui abaixo e me diga uma coisa no seu primeiro codigo do grupo cade o link da imagem do efeito?

Código:

a[href="/uID]:: before {
background: url("http://i39.servimg.com/u/f39/17/95/88/56/xmas_t10.png") no-repeat scroll 0 0%;
}

ranzatti escreveu:

Pedxz escreveu:

ranzatti escreveu:codigos não estão funcionando como pode ver na imagem abaixo

http://prntscr.com/hmmoz5

Qual deles você está a usar?

esse aqui abaixo e me diga uma coisa no seu primeiro codigo do grupo cade o link da imagem do efeito?

Código:

a[href="/uID]:: before {
background: url("http://i39.servimg.com/u/f39/17/95/88/56/xmas_t10.png") no-repeat scroll 0 0%;
}

No caso a imagem é o Icon Awesome
http://fontawesome.io/icons/

No outro código onde está ID você têm que pôr um id do usuário ou deixar só [/u]

Então como podemos ver na minha folha CSS está tudo certo o codigo mais não funciona

http://prntscr.com/hmn9ds

Como que você consegue complicar um código tão simples?

Código:

a[href*="/uID"] strong {
    background: url("http://i39.servimg.com/u/f39/17/95/88/56/xmas_t10.png") no-repeat scroll 0 0%;
    padding-left: 17px;
    padding-top: 2px;
}

Edite como quiser os padding.


Abraço Rene o/

Olá!

Retire todos os códigos fornecidos anteriormente. Feito isto, crie um novo JS com investimento em todas as páginas com o seguinte código:

Código:

jQuery(document).ready(function(){jQuery('a[href="/uID"]').before('<img src="http://i39.servimg.com/u/f39/17/95/88/56/xmas_t10.png">')});

Modifique o ID para o desejado. Por exemplo o senhor, se for o fundador será u1.

Att!

Então Gaara fica bugado olha a imagem abaixo

http://prntscr.com/hmp2g1

xDominiC_. escreveu:Tenho aqui uma sugestão:

para staffs (membros em grupos)

CSS:

Código:

a[href*="/u"] strong {[size=16][/size]
    background: url("http://i39.servimg.com/u/f39/17/95/88/56/xmas_t10.png") no-repeat scroll 0 0%, url("http://i39.servimg.com/u/f39/17/95/88/56/backro10.gif") repeat scroll 0 0 rgba(0, 0, 0, 0);[size=16][/size]
    color: green;[size=16][/size]
    font-weight: bold;[size=16][/size]
    padding-left: 19px;[size=16][/size]
}[size=16][/size]
em {[size=16][/size]
    font-style: normal;[size=16][/size]
}[size=16][/size]
.color_red {[size=16][/size]
    color: #d81e1e;[size=16][/size]
}[size=16][/size]
.color_green {[size=16][/size]
    color: #1a9132;[size=16][/size]
}

JS (investimento em todas as páginas)

Código:

$(document).ready(function() {[size=16][/size]
    doChristmas();[size=16][/size]
    [size=16][/size]
    setTimeout(function() { doChristmas(); }, 1000);[size=16][/size]
});[size=16][/size]
function doChristmas() {[size=16][/size]
    $('a[href*="/u"] strong').each(function(){[size=16][/size]
        var letters = $(this).text().split('');[size=16][/size]
        $(this).text('');[size=16][/size]
        for(var i = 0; i < letters.length; i++){[size=16][/size]
            if(i % 2 == 0){[size=16][/size]
                $(this).append('<em class="color_red">' + letters[i] + '</em>');[size=16][/size]
            }else{[size=16][/size]
                $(this).append('<em class="color_green">' + letters[i] + '</em>');[size=16][/size]
            }[size=16][/size]
        }[size=16][/size]
    });[size=16][/size]
}

ou membros

Código:

a[href*="/u"] {[size=16][/size]
    background: url("http://i39.servimg.com/u/f39/17/95/88/56/xmas_t10.png") no-repeat scroll 0 0%, url("http://i39.servimg.com/u/f39/17/95/88/56/backro10.gif") repeat scroll 0 0 rgba(0, 0, 0, 0);[size=16][/size]
    color: green;[size=16][/size]
    font-weight: bold;[size=16][/size]
    padding-left: 19px;[size=16][/size]
}

Remova isto e uso somente o js que a @Gaaratsu fez

então eu fiz exatamente oque o @Gaaratsu fez está meio bugado como na imagem ao lado > http://prntscr.com/hmp2g1

Substitua por este querido:

Código:

jQuery(function(){jQuery('a[href="/uID"]:contains("SEU_NOME_DE_USUÁRIO")').before('<img src="http://i39.servimg.com/u/f39/17/95/88/56/xmas_t10.png">')});

Procure no código acima o "ID" e "SEU_NOME_DE_USUÁRIO" - Substitua para o seu id e seu nome de usuário exatamente como está no fórum.

Se quiser adicionar antes e depois do nome de usuário, substitua o código por este:

Código:

jQuery(function(){jQuery('a[href="/uID"]:contains("SEU_NOME_DE_USUÁRIO")').before('<img src="http://i39.servimg.com/u/f39/17/95/88/56/xmas_t10.png">')});
jQuery(function(){jQuery('a[href="/uID"]:contains("SEU_NOME_DE_USUÁRIO")').after('<img src="http://i39.servimg.com/u/f39/17/95/88/56/xmas_t10.png">')});

Com as mesmas alterações citadas logo acima!

Att!

Agora sim ficou legal obrigado novamente podem fechar!