Borda do Perfil

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Borda do Perfil

Mensagem por ♦stefan♦ em 19/11/12, 06:16 pm

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:

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

Imagem 2:

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


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

♦stefan♦
Usuário destaque

Masculino
Inscrito dia : 11/01/2011
Mensagens : 643
Pontos Ativos : 942

Ver perfil do usuário

Resolvido Re: Borda do Perfil

Mensagem por Sennior em 19/11/12, 10:03 pm

Boa noite querido Eu amo você

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

Código:

Spoiler:
.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%;
}

Até mais!
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Borda do Perfil

Mensagem por ♦stefan♦ em 19/11/12, 11:01 pm

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 Triste

♦stefan♦
Usuário destaque

Masculino
Inscrito dia : 11/01/2011
Mensagens : 643
Pontos Ativos : 942

Ver perfil do usuário

Resolvido Re: Borda do Perfil

Mensagem por BrunoH. em 20/11/12, 09:16 am

Olá!
Aceda a "Folha de Estilo CSS":
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta 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! Piscada
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Borda do Perfil

Mensagem por ♦stefan♦ em 20/11/12, 11:29 am

Não mudou nada.

♦stefan♦
Usuário destaque

Masculino
Inscrito dia : 11/01/2011
Mensagens : 643
Pontos Ativos : 942

Ver perfil do usuário

Resolvido Re: Borda do Perfil

Mensagem por BrunoH. em 20/11/12, 11:37 am

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! Piscada
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Borda do Perfil

Mensagem por ♦stefan♦ em 20/11/12, 12:13 pm

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

♦stefan♦
Usuário destaque

Masculino
Inscrito dia : 11/01/2011
Mensagens : 643
Pontos Ativos : 942

Ver perfil do usuário

Resolvido Re: Borda do Perfil

Mensagem por Sennior em 20/11/12, 09:18 pm

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;
}
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Borda do Perfil

Mensagem por ♦stefan♦ em 20/11/12, 10:19 pm

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

♦stefan♦
Usuário destaque

Masculino
Inscrito dia : 11/01/2011
Mensagens : 643
Pontos Ativos : 942

Ver perfil do usuário

Resolvido Re: Borda do Perfil

Mensagem por Sennior em 21/11/12, 08:50 am

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! Piscada
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Borda do Perfil

Mensagem por ♦stefan♦ em 21/11/12, 01:00 pm

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

♦stefan♦
Usuário destaque

Masculino
Inscrito dia : 11/01/2011
Mensagens : 643
Pontos Ativos : 942

Ver perfil do usuário

Resolvido Re: Borda do Perfil

Mensagem por BrunoH. em 21/11/12, 01:24 pm

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! Piscada
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Borda do Perfil

Mensagem por ♦stefan♦ em 22/11/12, 02:05 pm

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

♦stefan♦
Usuário destaque

Masculino
Inscrito dia : 11/01/2011
Mensagens : 643
Pontos Ativos : 942

Ver perfil do usuário

Resolvido Re: Borda do Perfil

Mensagem por BrunoH. em 24/11/12, 04:41 pm

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! Piscada
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Borda do Perfil

Mensagem por ♦stefan♦ em 24/11/12, 08:57 pm

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!


♦stefan♦
Usuário destaque

Masculino
Inscrito dia : 11/01/2011
Mensagens : 643
Pontos Ativos : 942

Ver perfil do usuário

Resolvido Re: Borda do Perfil

Mensagem por BrunoH. em 24/11/12, 09:28 pm

Olá!
Eu criei um modo por Rank´s dos usuários, veja o spoiler abaixo com bastante atenção:
Spoiler:
Aceda a "Gestão dos Códigos JavaScript":
Painel de Controle Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão dos Códigos JavaScript
Título Seta Escolha um título qualquer.
Investimento Seta Em todas as páginas
Código:
jQuery(document).ready( function() {
jQuery(".pun .post .user:has('.nomedorank')").css('border-left', '10px solid #C53C3C');
});
Em vermelho -> Deverá ser alterado pelo nome do rank, de acordo com o que iremos aprender ao longo do tutorial.

Fazendo isto, aceda a "Administração dos Ranks":
Painel de Controle Seta Usuários Ranks Seta Administração dos Ranks
Selecione um rank e clique no botão "Editar":

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".

Atenciosamente!

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

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Borda do Perfil

Mensagem por ♦stefan♦ em 24/11/12, 09:59 pm

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

♦stefan♦
Usuário destaque

Masculino
Inscrito dia : 11/01/2011
Mensagens : 643
Pontos Ativos : 942

Ver perfil do usuário

Resolvido Re: Borda do Perfil

Mensagem por BrunoH. em 24/11/12, 10:01 pm

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

Até mais! Piscada
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Borda do Perfil

Mensagem por seender em 24/11/12, 10:07 pm

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: http://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 " Editar ".
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
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum