[Tutorial] Diferenciar posts dos grupos

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Admin
Admin
Administrador
Tempo Online : 250d 6h 21m 59s
Mensagens : 693
Reputação : 4
https://bestweb.forumeiro.com

MensagemAdmin Seg Out 03, 2016 10:23 pm

[Tutorial] Diferenciar posts dos grupos MdPTpkB
Autor: Daemon
Funcionalidade: Todas as versões

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

Primeiro iremos aceder em painel de controle :seta: módulos :seta: html & javascript :seta: gestão dos códigos javascript :seta: 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:
[Tutorial] Diferenciar posts dos grupos MbWcBrx
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.

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissões neste sub-fórum
Não podes responder a tópicos