Diferenciar posts dos grupos

Nome do Arquivo: Diferenciar posts dos grupos
Autor: Daemon
Funcionalidade: Todas as versões
Categoria: Recursos BestSkins

Olá, neste tutorial iremos ensina-los a diferenciar a postagem de cada grupo como na imagem acima.

Primeiro iremos aceder em painel de controle módulos html & javascript gestão dos códigos javascript criar um novo javascript

Título: A sua escolha
Investimento: Nos tópicos
Código:

Código:

$(function(){
function staff(e) {
("retorna a 0 se não for definido, 'adm' se for administrador, 'mod' se for moderador");
   var span = e.getElementsByTagName('span')[0];
   if(!span) return 0;
   var cor = span.getAttribute('style');
("FF0000 a cor hexadecimal do grupo administradores ao qual iremos adicionar a variável");
   return cor ? { 'FF0000' : 'adm', '000099' : 'mod' }[ cor.match(/#([\w\d]+)/)[1].toUpperCase() ] : 0;
};
for(var post = $('.post'), i = 0, p; (p = post[i++]); ) {
    var user = $('.author a, .name, .user a[href^="/u"]', p)[0]
    , userStatus = staff(user);

    if(userStatus == 'adm') p.className += ' admin';
    if(userStatus == 'mod') p.className += ' moderador';
}
});

Vamos entender o código.
Vejamos esta parte do código:

Código:

return cor ? { 'FF0000' : 'adm', '000099' : 'mod' }

Ou seja, para o grupo que tiver a cor "FF0000" será adicionado a variável "adm", e o grupo de cor "000099" será adicionado a variável "mod".
Assim iremos adicionar uma classe para cada variável, veja:

Código:

if(userStatus == 'adm') p.className += ' admin';
if(userStatus == 'mod') p.className += ' moderador';

Depois basta irmos a folha de css e adicionar o efeito ao post de cada grupo:

Código:

.post.admin {
background: #ffd9d9;
}
.post.admin .user .user-ident .user-basic-info, .post.admin .user .user-info {
background: #d9f5ff;
}

Podemos até adicionar uma imagem personalizada para o post do grupo, veja:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Código:

.post.admin {
background-image: url(http://imgur.com/PF0HMMi.png);
background-position: 100% 35px;
background-repeat: no-repeat;
}

Este código também pode ser utilizado para outras funções com pequenas edições.


Qualquer dúvida em relação a este tutorial crie um tópico de mesmo nome.

Acho que muita gente vai adorar esse tutorial. Daemon não para

Muito bom ema!
Jájá posto outro tutorial de um efeito usando esse código ai ^^

Olá,

Epico t.t
So to com Preguiça de colocar todos os Grupos kk'

Muito Bom gostei e estarei usado.

Abraços!

Olá,

No meu não funcionar,
A 1 Primeira vez ele Bugo t.t
Agora na 2 n quer entra o Codigo

~Rafra escreveu:Olá,

No meu não funcionar,
A 1 Primeira vez ele Bugo t.t
Agora na 2 n quer entra o Codigo

Ele fez a edição hoje tente novamente.

Abraços!

Efeito realmente interessante, assim que me sobrar um tempinho estarei dando uma olhada..

Ótimo código, parabéns.