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

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'
    });
});
    
    

});

Show Wagner, muito interessente a função... vou aplicar no meu fórum...

Ótimo Código! Obrigado Pelo Tutorial!

[sucesso=Tutorial aceito][/sucesso]Movido para: Dicas e Tutoriais

Legal. Tanks by Share

Genial, tem a da forumeiros e quase igual ^^

Cadê o codigo?

@Ground: Aparece ao comentar no tópico, rs

tá trolando a galera Wagner... ishishishishsi

@Phill Lima kkkkkk, eu achei que aparecia para eles ali "Você precisa comentar no tópico para o conteúdo aparecer"

Eu vi assim que você postou, ai também não vi código, responde o tópico e no final perguntei pelo código... quando atualizou e vi o código pensei que você já tinha era editado, ai tirei a pergunta do código, é você que coloca para mostrar só se comentar ou é uma regra do bestskins?

Qualquer fórum tem essa implementação, é só você usar o código

Código:

[hide][/hide]

É bem útil, porque o pessoal costuma só vim no seu tópico pegar o código para usar e nem comenta ou curte, sei lá..

Pensei que o hide funcionava só para visitantes, permitindo apenas cadastrados visualizarem... é perfeito para o que você disse, da para ter um feedback mais correto da galera...

Como aplico este code? Criei um JS mas não funcionou.

gracias

Ficou bem legal wagner....

Oh...thanks.

Olá,

Para min o Codigo , Não Funcionou ;(

~Rafra escreveu:Olá,

Para min o Codigo , Não Funcionou ;(

Qual a versão do seu fórum?

Davisnatsu escreveu:

~Rafra escreveu:Olá,

Para min o Codigo , Não Funcionou ;(

Qual a versão do seu fórum?

Olá,
A Versão e PunBB
So Utilizo ela :9

Coloquei o Codigo nos Investimentos ao Topico, Esta Correto ?

Bom c´digo, parabéns.

Legal.

view

obrigado

Show man.