Borda para um grupo

Qual é minha questão:
Olá, eu gostaria de saber se tem como eu aplicar um borda específica para cada grupo do meu fórum, eu quero que esta borda seja visualizada nas postagens. Eu vi um tópico com o mesmo objetivo, porém, só explicaram como adicionar a borda para um certo usuário e não um grupo.

Endereço do meu fórum:
http://skyrim-forum.forumeiros.com

Versão do fórum:
PUNBB

Olá,

Use este código JavaScript

Código:

jQuery(document).ready(function(){
jQuery(".post:has('.nomedorank')"){jQuery('head').append('<style>.pun .post .user {
            background: none repeat scroll 0% 0% #FFF!important;
        border-width: 1px 1px 1px 6px!important;
        border-style: solid!important;
        border-color: #808080 #808080 #808080 #7E7E7E!important;
        -moz-border-top-colors: none!important;
        -moz-border-right-colors: none!important;
        -moz-border-bottom-colors: none!important;
        -moz-border-left-colors: none!important;
        border-image: none!important;
        font-size: 12px!important;
        padding: 7px!important;
        width: 18.9%!important;
    }</style>')}});

.nomedorank Altere o nome, exemplo, para os administradores coloque "equipefundoadm";

Depois de adiconar o JS, aceda á:
Painel de controle ->> Usuários e grupos ->> Ranks ->> Administração dos ranks ->>
Selecione um rank e clique em " ", no título do mesmo altere para este:

<span class="equipefundo">NOME DO RANK</span>

equipefundo Altere conforme mudar o valor "equipefundo" do código java script (o primeiro codigo), feito isto clique em salvar.

Até

Olá, bom, não resultou como eu queria, tipo, eu gostaria de adicionar uma imagem como borda, sinto muito não ter mencionado isso anteriormente.

Olá,

Me informe o link da imagem desejada

Até

Olá,

Você poderia me informar o link do fórum aonde encontrou este estilo de perfil ?

Até

Olá, aqui neste fórum:
- http://tssabrasil.forumeiros.com/

Olá,

Substitua o código por este

Código:

    jQuery(document).ready(function(){
    jQuery(".post:has('.nomedorank')"){jQuery('head').append('<style>.pun .post .user {
          .pun .post .user {
    background: none repeat scroll 0% 0% #FFF;
    border-width: 1px 1px 1px 6px;
    border-style: solid;
    border-color: #EB0C0C #EB0C0C #EB0C0C #EB0C0C;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    font-size: 12px;
    margin-left: -20% !important;
    padding: 7px;
    width: 18.9%;
}
        }</style>')}});

Até

Olá, não resultou, veja como eu fiz:
Coloquei o código javascript desta maneira:

Código:

jQuery(document).ready(function(){
jQuery(".post:has('.equipefundoadm')"){jQuery('head').append('<style>.pun .post .user {
     .pun .post .user {
background: none repeat scroll 0% 0% #FFF;
border-width: 1px 1px 1px 6px;
border-style: solid;
border-color: #EB0C0C #EB0C0C #EB0C0C #EB0C0C;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
font-size: 12px;
margin-left: -20% !important;
padding: 7px;
width: 18.9%;
}
   }</style>')}});

E coloquei o nome do rank de adm da seguinte forma:

Código:

<span class="equipefundo">ADM</span>

Olá,

Altera o nome do Rank por este

Código:

<span class="equipefundoadm">ADM</span>

Até

Não resultou :/

Olá,

Altere o seu JS por este

Código:

    jQuery(document).ready(function(){
    jQuery(".post:has('.equipefundoadm')"){jQuery('head').append('<style>.pun .post .user {
    background: none repeat scroll 0% 0% #FFF;
    border-width: 1px 1px 1px 6px;
    border-style: solid;
    border-color: #EB0C0C #EB0C0C #EB0C0C #EB0C0C;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    font-size: 12px;
    margin-left: -20% !important;
    padding: 7px;
    width: 18.9%;
    }
      }</style>')}});

Até

Ainda nada

Olá,

Substitua novamente o JS por este

Código:

    jQuery(document).ready(function(){
    jQuery(".post:has('.equipefundoadm')"){jQuery('head').append('<style>.pun .user {
    background: none repeat scroll 0% 0% #FFF;
    border-width: 1px 1px 1px 6px;
    border-style: solid;
    border-color: #EB0C0C #EB0C0C #EB0C0C #EB0C0C;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    font-size: 12px;
    margin-left: -20% !important;
    padding: 7px;
    width: 18.9%;
    }
      }</style>')}});

Tente por o Investimento "Em todas as Páginas" caso não tenha efeito tente "Nós Tópicos"

Até

Não resultou D:

Olá colega!
Eu fiz um código que talvez lhe agrade, veja:

Código:

$(function(){
   //cor do grupo
   jColor = "#FF0000",
   //link do icone
   jIcon = "http://icons.iconarchive.com/icons/titch-ix/game/64/Fallout-3-icon.png";
   
   //adicionando bordas na postagem do grupo
   $('.username span[style="color:'+jColor+'"]').parents('.post').css({
      //os valores são assim: superior direita inferior esquerda, ou seja todas as bordas tem o valor de 1px a não ser a esquerda que tem o valor de 5px, altere a gosto!
      'border-width':'1px 1px 1px 5px',
      //cor da borda
      'border-color':'#000',
      //estilo da borda
      'border-style':'solid'
   }).append('<div class="jIcon"><img src="'+jIcon+'" alt="Skyrim" /></div>');
   
   //estilização do ícone
   $('.jIcon img').css({
      //não mexa aqui
      'position':'absolute',
      //aqui é que vem o segredo, mude os valores de acordo com o que você necessitar, isso serve para posicionar seu ícone, faça os ajustes a gosto!
      'margin':'-330px 0px 0px 100px',
      //largura da imagem (remova caso não queira controlar isso!)
      'width':'50px',
      //altura da imagem (remova caso não queira controlar isso!)
      'height':'50px'
   });

});



Deixei o código todo comentado para que você possa estudar e estilizar como quiser!

Se tiver dúvidas me avise!

Ps: O ícone que eu usei foi um aleatório, pegue um qualquer que você queira!

Não resultou, eu devo ter feito algumas coisa errado, aqui está o código que eu apliquei:

Código:

$(function(){
jColor = "#44DB67",
jIcon = "http://icons.iconarchive.com/icons/titch-ix/game/64/Fallout-3-icon.png";
$('.username span[style="color:'+jColor+'"]').parents('.post').css({
'border-width':'1px 1px 1px 5px',
'border-color':'#000',
'border-style':'solid'
}).append('<div class="jIcon"><img src="'+jIcon+'" alt="Skyrim" /></div>');
 $('.jIcon img').css({
'position':'absolute'
'margin':'-330px 0px 0px 100px',
'width':'50px',
'height':'50px'
 });

});

Olá,

Adicione uma nova página JavaScript (investimento: "em todas as páginas"). Código;

Código:

jQuery(document).ready(function(){
jQuery(".postprofile:has('.admin')").css({'border-color': '#0048FF', 'border-left-width': '10px','border-left': 'solid 10px #7E7E7E';})});

Painel de Controle -> Módulos -> HTML & JAVASCRIPT -> Gestão dos Códigos JavaScript

Após adicionar a página JavaScript, vá até as configurações dos Ranks;
Painel de Controle -> Usuários -> Ranks -> Administração dos Ranks

Escolha o Rank desejado e clique em configurações. No título cole este código;

Código:

<span class="admin">Administrador</span>

LEMBRE-SE: Apenas siga as instruções, não altere NADA! Depois que você ver que resulto, ai sim você pode alterar.

Atenciosamente,
ShiroK

Ainda não funcionou

@DovahKiiNor, teve um erro de sintaxe, você esqueceu de uma vírgula!
Use esse

Código:

$(function(){
    jColor = "#44DB67",
    jIcon = "http://icons.iconarchive.com/icons/titch-ix/game/64/Fallout-3-icon.png";
$('.username span[style="color:'+jColor+'"]').parents('.post').css({
    'border-width':'1px 1px 1px 5px',
    'border-color':'#000',
    'border-style':'solid'
    }).append('<div class="jIcon"><img src="'+jIcon+'" alt="Skyrim" /></div>');
     $('.jIcon img').css({
 'position':'absolute',
 'margin':'-330px 0px 0px 100px',
 'width':'50px',
 'height':'50px'
});

});

Nada ainda :/

Amigo, visitei o seu fórum e o efeito está funcionando, mas você tem que edita-lo da maneira que gostar mais!


O que você quer não é uma borda ao redor do perfil e um pequeno ícone acima do avatar?
O efeito está ai, mude as partes que eu falei até alcançar o efeito desejado!
Como eu citei o ícone que eu coloquei foi um aleatório que achei na internet, basta você achar um do Skyrim e colocar no lugar dele e iniciar os testes, mude a cor da borda para a desejada e pronto!
Se o efeito que você quer não for esse, avise e vamos formular outro código juntos!

Olha, é verdade, eu não vi isso por que só aparece no rank "novato" eu creio, no de administrador não aparece por isso não tinha visto, foi mal ._. obrigado pela ajuda aos dois.