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

});

legal

like

Thanks

Teste de código

Seria ainda mais interessante se aparecesse o código =P
Mas parece ótimo =)

Bookmarlucas654 escreveu:Seria ainda mais interessante se aparecesse o código =P
Mas parece ótimo =)

Creio que agora o senhor esteja visualizando o código, pois o bbcode "hide", está ativo no tópico, e o código só pode ser visualizado depois que o post é comentado.

Ver Codigo

Bom, o código parece excelente, mas não sei onde acrescentar e nem ATIVAR o código. Pelo que sei é, colocar um código CSS, dai, na descrição do grupo, colocar um código identificando a ID que está no CSS. Mas, neste tutorial, não tem isto, só tem um código e sem dizer se é um JS, CSS, ou o que é ;/

Onde devo verdadeiramente instalá-lo, e como ativarei para um determinado grupo?

Gracias! se ve muy bueno

valeu ajudou muito

Vou Dar Uma Olhada !!

LEGAL muito massa mesmo

Legal deixa mais organizado.

nice code awesomeee

Dei uma melhorada no tutorial, para o pessoal que não estava conseguindo entender.. Ficou melhor? Ou ainda estão com problemas?

Belo tuto. Genial!

Muito legal fera

vlw tava tentando achar isso a um tempão

Código atualizado para todas as versões, quem estava com dificuldades, faça os testes

Código totalmente funcional, testei no Console do chrome e funcionou certinho!
Sei o que você fez no código, para funcionar para todas as versões!

Vou testar.

Eu gostei da ideia achei muito boa mas como faço para adicionar em grupos diferentes e cores diferentes em cada grupo ?
E como eu edito no codigo para por exemplo para funcionar no grupo adm e no grupo do mod abraços parabéns

Obrigado pelo compartilhamento, estarei usando no meu fórum.

Obrigado por Compartilhar estarei testando !