Adicionando uma borda colorida ao post de usuários de determinado grupo

Relembrando a primeira mensagem :

Nome do Arquivo: Adicionando uma borda colorida ao post de usuários de determinado grupo
Autor: Wagner
Funcionalidade: PunBB
Categoria: Recursos de Outros Autores

Olá pessoal, aproveitando o código repassado pelo joelson a mim em uma postagem eu fiz um mod para que possamos implementar em nossos fóruns! Trata-se de adicionar uma borda para a postagem de determinados usuários que sejam de determinados grupos e.e

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Vejam:

Código:

$(function(){
 //cor do grupo
    jColor = "#BF3131";
 //seleciona a cor do grupo e adiciona uma borda ao redor daquela postagem, fique atento ao primeiro seletor ali ".username", ele pode variar de fórum para fórum, basta você verificar!
 $('.username span[style="color:'+jColor+'"]').parents('.post').css({
 //largura das bordas || os valores são definidos assim: superior direita inferior esquerda || ou seja, temos todas as bordas com 0px de largura a não ser a borda esquerda que tem 5px de largura!
 'border-width':'0 0 0 5px',
 //aqui colocamos a cor da borda na mesma cor do grupo, caso queira por uma cor especial troque o "jColor" por " '#COR EM RGB' " (note que está entre aspas simples!
 'border-color':jColor,
 //estilo da borda, você ainda pode alterar o valor para outros como dashed, dotted, double, groove e etc...
 'border-style':'solid'
//caso queira adicionar mais propriedades ao post do grupo, coloque uma vírgula logo depois de 'solid' e adicione as propriedades logo em seguida!
 });

});

O código esta todo comentado para que seja feita a estilização!


Instalando:
Crie um Javascript com investimento nos tópicos com o código passado acima.

Configuração:
Vou tentar explicar cada parte do código para facilitar para o pessoal que não está sabendo usar..

Logo no começo do código temos o seguinte:

Código:

var jColor = "#BF3131";

Como está escrito no comentário do código, ai você deve inserir a cor do grupo que deseja que seja modificado..
Digamos, se a cor dos administradores é vermelha ([Tens de ter uma conta e sessão iniciada para poderes visualizar este link]), basta inserir essa cor ali!

Logo em seguida temos o seguinte:

Código:

$('.username span[style="color:'+jColor+'"]').parents('.post')

O que ele faz é relativamente simples.
Nos fóruns que eu testei (versão PunBB), o nome do usuário ficava em uma class chamada ".username"
Notem que na própria BS é assim:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Notem também que eu marquei o span que fica dentro da class username, vejam que é ele que tem o atributo "color='#000'", e é através disso que selecionamos o usuário que é membro de determinado grupo..
Confiram se está assim no fórum de vocês também..

O resto é tudo configurações CSS, nos próprios comentários do código eu explico direitinho.. É só ler!


Uma última coisa que vale ressaltar, é a class .post, verifique se é ela que você quer estilizar em seu fórum, caso não seja altere para a desejada..

Espero que tenha ficado mais fácil de entender..

---

@Edit:
Atualizei o código para todas as versões, façam os testes:

Código:

/*
// Border on groups profiles
// Author: Wagner
// Link: http://www.punbb.forumeiros.com
// This work is free and you can redistribute or modify it, just keep the original credits, or cite our forum.
// Last update: 19/04/2014
*/
$(function(){
    
    var _0x2850=["\x6C\x65\x6E\x67\x74\x68","\x23\x69\x70\x62\x77\x72\x61\x70\x70\x65\x72","\x69\x6E\x76\x69\x73\x69\x6F\x6E","\x2E\x62\x6F\x64\x79\x6C\x69\x6E\x65","\x70\x68\x70\x62\x62\x32","\x23\x77\x72\x61\x70","\x70\x68\x70\x62\x62\x33","\x23\x70\x75\x6E\x2D\x69\x6E\x74\x72\x6F","\x70\x75\x6E\x62\x62","\x65\x72\x72\x6F\x72"];function forumversion(){if(jQuery(_0x2850[1])[_0x2850[0]]){return _0x2850[2];} ;if(jQuery(_0x2850[3])[_0x2850[0]]){return _0x2850[4];} ;if(jQuery(_0x2850[5])[_0x2850[0]]){return _0x2850[6];} ;if(jQuery(_0x2850[7])[_0x2850[0]]){return _0x2850[8];} ;return _0x2850[9];} ;


    var jColor = "#BF3131";
    
    switch ( forumversion() )
{
    case "invision":
        var seletor = $('.postprofile dl dt span[style="color:'+jColor+'"]');
        var version = $('.post');
        break;
    case "phpbb2":
        var seletor = $('.name span[style="color:'+jColor+'"]');
        var version = $('.row1');
        break;
    case "phpbb3":
        var seletor = $('.postprofile dl dt span[style="color:'+jColor+'"]');
        var version = $('.post');
        break;
    case "punbb":
            var seletor = $('.username span[style="color:'+jColor+'"]');
            var version = $('.post');
        break;
            
    default: "Erro ao identificar a versão do fórum";
}

seletor.each(function(){
    $(this).closest(version).css({
        'border-width':'0 0 0 5px',
        'border-color': jColor,
        'border-style':'solid'
    });
});
    
    

});

foda :v

Show! Curti demais.

Vlw, vou aplicar aquie ç.ç

Testando aquui *-*

Valeu mano.

Muito bom lek. Parabens

muito bom, vou ultilizar

Curti bastante, estarei usando <3

Interessante, Irei usar.

é parece seer bem util irei usar!!

Bom tutorial, gostei bastante dessa borda

Muito bom mano, obrigado por compartilhar!

UP! belo tutorial será muito util para mim e possivelmente para outros.

Thanks man. Amazing code!

COmentando para testar.

Bacana, vou colocar...

Comentando para ver o conteúdo oculto.

muito bom, thanks for sharing

Valeu tava procurando um codigo assim

Parece interessante, bom pra diferenciar.

Ow, estava procurando esse código vlw

obrigado cara! excelente

nice.