Borda do Perfil

Olá, gostaria de uma borda de perfil igual deste fórum http://narutorpgstorm.ultimaterpg.net/ e tem uma barra que é de uma cor dependendo do grupo da pessoa

Imagem 1:

https://i.imgur.com/bSzMx.png

Imagem 2:

https://i.imgur.com/bSzMx.png

---

Fórum: http://www.darknix.forumeiros.com (punBB)

Boa noite querido

Aceda à teu CSS:
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS

Código:

Spoiler:

Até mais!

Boa Noite, Funcionou mas ficou bugado :S



E eu acho que está faltando uma parte do código, pois não sei mudar a cor da barra onde está cinza

Olá!
Aceda a "Folha de Estilo CSS":

Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS

Código:

Código:

.pun .post .user {-moz-border-radius: 0 7px 7px 0;-moz-box-shadow: 1px 1px 5px gray;-o-border-radius: 0 7px 7px 0;-o-box-shadow: 1px 1px 5px gray;-webkit-border-radius: 0 7px 7px 0;-webkit-box-shadow: 1px 1px 5px gray;background: #DDD;border-left: 10px solid gray;border-radius: 0 7px 7px 0;box-shadow: 1px 1px 5px gray;font-size: 12px;margin-left: -200px!important;padding: 7px;width: 30%;}
.pun .post .user {float: left;margin-left: -16em;margin-top: -1.8em;position: relative;}
.pun .user {display: inline;overflow: hidden;padding-top: 1.6em;white-space: normal;width: 15em;}
.pun .post {background: #F1F1F1!important;background-color: white;border-bottom: 1px solid gray;border-left: 10px solid gray;border-radius: 0 20px 20px 0;border-top: 1px solid gray;padding-left: 7px;}
.pun .post {border-color: #EEE white #CCC;border-style: solid none;border-width: 2px 0 1px;}

e Valide!

Até mais!

Não mudou nada.

Olá!
Visitei seu fórum, e o efeito está funcionando, porem ele está meio largo, substitua o código por este:

Código:

.pun .post .user {-moz-border-radius: 0 7px 7px 0;-moz-box-shadow: 1px 1px 5px gray;-o-border-radius: 0 7px 7px 0;-o-box-shadow: 1px 1px 5px gray;-webkit-border-radius: 0 7px 7px 0;-webkit-box-shadow: 1px 1px 5px gray;background: #DDD;border-left: 10px solid gray;border-radius: 0 7px 7px 0;box-shadow: 1px 1px 5px gray;font-size: 12px;margin-left: -200px!important;padding: 7px;width: 170px;}
.pun .post .user {float: left;margin-left: -16em;margin-top: -1.8em;position: relative;}
.pun .user {display: inline;overflow: hidden;padding-top: 1.6em;white-space: normal;width: 15em;}
.pun .post {background: #F1F1F1!important;background-color: white;border-bottom: 1px solid gray;border-left: 10px solid gray;border-radius: 0 20px 20px 0;border-top: 1px solid gray;padding-left: 7px;}
.pun .post {border-color: #EEE white #CCC;border-style: solid none;border-width: 2px 0 1px;}

Até mais!

Erá isso que eu queria dizer, só que eu não sei mudar a cor da barra do lado da borda
E eu queria colocar o rank encima do avatar e o nome embaixo comoo aqui
http://narutorpgstorm.ultimaterpg.net/t3182-modificacoes-de-lawliet

Olá,

Adicione este código no inicio de teu CSS:

Código:

.user {
padding: 1px !important;
}
.pun .user-ident .username a {
position: relative;
top: -5px;
}
.user-ident {
padding: 11px !important;
}

Não mudou muita coisa, só moveu pra cima, e eu queria saber como trocar a cor da barra que está cinza .-.

Troque o código que eu lhe dei por este:

Código:

.user{padding:1px!important;}.pun.user-ident.usernamea{position:relative!important;top:-5px!important;}.user-ident{padding:11px!important;}

Coloque no inicio de teu CSS.

Até mais!

Ficou certo, só falta o nome ficar mais um pouco pra cima pra ficar certo, mas eu queria saber como trocar a cor daquela parte mais escura que é uma barra

Olá!
Para o nome ficar um pouco mais para cima, adicione este código em sua CSS:

.pun .user .user-ident {margin-top: 10px;}

Para mudar a cor da borda, no código CSS do efeito do perfil, modifique:

.pun .post .user {border-left: 10px solid #C53C3C;}

Modifique o ID da cor em negrito para a cor deseja.

Até mais!

Mas e para mim por pra varias pessoas? tipo uma cor pra cada grupo?

Olá!
Você deseja colocar uma borda do perfil diferenciada? Ou seja, dependente da cor do grupo dos usuários? Poderia ser mais claro por gentileza?

Até mais!

O código que você me passou, muda só que a cor vai ficar permanente, gostaria que a cor você do grupo que a pessoa tivesse!

Olá!
Eu criei um modo por Rank´s dos usuários, veja o spoiler abaixo com bastante atenção:

Spoiler:

Atenciosamente!

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'

Eu devo tirar o código que você me passou?

Olá!
Não é necessário, tente do jeito que está, apenas adicionando o código da postagem acima.

Até mais!

Olá!

Utilize este código e siga as instruções:

jQuery(document).ready(function(){i='ID';jQuery('.post .name a[href="/u'+i+'"],.postprofile a[href="/u'+i+'"],.post .username a[href="/u'+i+'"],.postprofile .avatar a[href="/u'+i+'"]').closest('.pun .post').find('.user').css({'display': 'inline', 'overflow': 'hidden','padding-top': '1.6em','white-space': 'normal','width': '15em','border-radius':'0 7px 7px 0','box-shadow':'1px 1px 5px gray','font-size':'12px','margin-left':'-200px','width':'170px','background-color': '#F1F1F1', 'border-left': '10px solid #000','border-bottom':'1px solid #000','border-radius': '0 20px 20px 0','border-top': '1px solid #000','padding-left': '7px'})});

O local de vermelho é aonde irá inserir o id do usuário, exemplo: https://ajuda.forumeiros.com/u35511
o 35511 será o id a ser utilizado, deverá adicionar este código e ir multiplicando de acordo com a quantidade de membros da equipe.
Os locais de rosa é aonde terá de modificar e colocar a cor que irá ser reproduzida nas mensagens (borda).

A segunda opção é adicionar somente um código para cada grupo, porém, terá de modificar o rank no qual queremos que os usuarios do tal recebam o efeito, acederemos ao:
Painel de Controle -> Usuários -> Ranks -> Administração dos Ranks
Selecione um rank e clique no botão " ".
No campo "Título do rank" deverá substituir por este código:

<span class="nomedorank">Título do rank</span>

O valor vermelho será o comando do código .JS - E o campo selecionado como verde será o título anterior do rank, por exemplo, "Administrador".

jQuery(document).ready(function(){
jQuery(".pun .post .user:has('.nomedorank')").css({'display': 'inline', 'overflow': 'hidden','padding-top': '1.6em','white-space': 'normal','width': '15em','border-radius':'0 7px 7px 0','box-shadow':'1px 1px 5px gray','font-size':'12px','margin-left':'-200px','width':'170px','background-color': '#F1F1F1', 'border-left': '10px solid #000','border-bottom':'1px solid #000','border-radius': '0 20px 20px 0','border-top': '1px solid #000','padding-left': '7px'})});

O local de vermelho será o 'nomedorank' que foi atribuído ao código adicionado anteriormente no campo Título.
Os locais de rosa é aonde terá de modificar e colocar a cor que irá ser reproduzida nas mensagens (borda).

Ambos os códigos (depois de modificados conforme a necessidade, é claro) devem ser adicionados a uma página html, aceda à:
Painel...-> Módulos -> HTML e JAVASCRIPT -> Gestão das páginas HTML
Clique para criar uma nova página HTML, faça as definições necessárias e no campo conteúdo adicione o código (já modificado) e carregue no botão Salvar.

Utilize o código abaixo:

<script src=Endereço-da-página-html></script>

Substitua o local de vermelho pelo link da página HTML que criou com o código modificado a seu gosto, pegue então o código modificado e cole-o em:
Painel...-> Geral -> Fórum -> Configuração / Descrição do fórum

Melhores cumprimentos,
seender