Exibir perfil

Qual é minha questão:
Bom,eu acho que o perfil em meu fórum está ocupando grande espaço no post,deixando ele de certa maneira grande demais.
Andei pensando e a melhor forma para resolver isto seria,um perfil que fica-se oculto até um clique,precisei dar uma pesquisada e acabei descobrindo este fórum
http://narutorpgstorm.ultimaterpg.net/t2719-to-indo#11542

Onde o perfil é mostrado com um clique no campo "Exibir meu perfil",entretanto graças ao meu baixo conhecimento com estas coisas,preciso da ajuda de vocês para um edição exata neste problema.
O objetivo é colocar um botão ou caixa no perfil dos posts,para quando for clicado nele o resto do perfil ocultado seja mostrado.


Links e imagens do meu problema:
https://i.imgur.com/Czuxk.png

Endereço do meu fórum:
http://123456coisa.ativoforum.com

Versão do meu fórum:
PUNBB

Olha , eu também quero assim , então não posso ajudar ;d

Olá!

JavaScript:

Código:

jQuery('.pun .post .user:has("#sn")').each(function(){jQuery(this).css('border-left','10px solid #895d24')});jQuery('.pun .post .user:has("#knh")').each(function(){jQuery(this).css('border-left','10px solid #268924')});

CSS:

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

Abraços.

Peço que me explique todo procedimento , por gentileza

Olá!

Perdão, aceda á:
Painel de Controle Visualização Imagens e Cores Cores Folha de estilos CSS
E aplique este 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;
}

Feito isto, aceda á:
Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos Códigos JavaScript
E crie uma nova página com o seguinte código:

Código:

jQuery('.pun .post .user:has("#sn")').each(function(){jQuery(this).css('border-left','10px solid #895d24')});jQuery('.pun .post .user:has("#knh")').each(function(){jQuery(this).css('border-left','10px solid #268924')});

Investimento: Nos tópicos ou Sobre temas.

Abraços.

Isto somente igual-o perfil mostrado nos posts,só que não deu resultado interessado,pois acabou sobresaindo o contéudo do post e ainda assim não foi adquirido o exibir perfil.

Aqui vai o link do post para que veja como ficou
http://123456coisa.ativoforum.com/t1-seu-primeiro-topico

Olá!

Não compreendi. Bem o que me parece que isto ocorre pois teu fórum está muito pequeno em largura. Aceda à teu CSS com o código abaixo:
Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Código:

#page-body {width: 1111px!important;}.pun .postmain {background-color: transparent !important;border-left: 1px solid #DDD;margin-left: 18em;}

Atenciosamente,
Mikéé.

Olá este problema já conseguir resolver,me refiro ao do perfil, entretanto seria possível auxilo para o efeito de ocultar o perfil para ser mostrado com um clique?

Boa tarde!

Queira checar:

https://ajuda.forumeiros.com/t64149-tutorial-esconder-perfil-personalizado-em-phpbb-3

Passar bem!