caixa de informações para posts

Qual é minha questão:
ola, gostaria de um código para ser usado em posts no meu fórum.vai se tratar de uma caixa(quero que seja bem criativa, deve ter as cores e bordas com o design que fique bonito ao meu fórum) que sera usada da seguinte maneira: um titulo centralizado acima(que usarei para dar os nomes a equipamentos), abaixo do titulo ficara a caixa, no lado esquerdo ficara uma imagem de dimensão: 250x250, e no lado direito ficara a descrição da arma e seus bonus. se puder colocar um efeito hover em que so aparece o nome e depois que clica em um botão aparece o resto seria muito bom!

valeu ae pessoal, espero que fique bem legal, Pyro

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

tem uma imagem,que tenha visto ou link?

Se vc n viu isso em lugar nenhum tenta fazer um esboço no paint, já vai ajudar...

ola, aqui está um esboço que eu fiz: em cima tem a versão aberta e em baixo a fechada
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
EDIT: a largura maxima da caixa inteira dever ser 585px

Bem, coloque este código no seu Gestor de códigos JavaScript, Selecione Em todas as páginas.

Código:

$(function(){
      $(function(){
        $('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i39.servimg.com/u/f39/17/71/75/73/digg10.png)">a</div></a>').insertBefore('.sceditor-button-size').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("<div id=\'caixa_principal\'><div id=\'titulo_principal\'><b>NOME_DO_EQUIPAMENTO_AQUI</b></div><img id=\'imagem_left\' src=\'LINK_DA_IMAGEM AQUI\'/><div id=\'desc_right\'><b>Descrição: </b>DIGITE_A_SUA_DESCRIÇÃO_AQUI!</div><div id=\'bons_right\'><b>Bônus: </b>DIGITE_O_SEU_BÔNUS_AQUI!</div></div>");
         });
      });
});

Agora coloque este código na sua folha de estilo CSS

Código:

#titulo_principal {
    margin-bottom: 10px;
    background: #000;
    color: #fff;
    padding: 10px;
    text-align: center;
    border-radius: 10px 10px 2px 2px;
}
#desc_right {
    margin-left: 10px;
    float: right;
    width: 290px;
    height: 115px;
    overflow: auto;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 20px 20px 20px 20px;
    padding: 10px;
    margin-bottom: 8px;
}
#bons_right {
    margin-left: 10px;
    float: right;
    width: 290px;
    height: 96px;
    overflow: auto;
    border: 1px solid #000;
    border-radius: 20px;
    padding: 10px;
}
#imagem_left {
    border: 1px solid #000;
    float: left;
    padding: 5px;
    width: 250px;
    height: 250px;
    border-radius: 5px;
}
#caixa_principal {
    margin: 2px;
    min-height: 305px;
    border: 2px solid;
    border-radius: 10px;
    width: 585px;
    padding: 10px;
}

Agora crie um tópico.
Veja que vai ter este ícone [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]!
Clique nele e vai aparecer um código na caixa de texto.
Agora é só colocar as informações onde tem letras maiúsculas.
Ex: [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Acho que vc vai entender meu esboço...
Eu fiz o design de acordo com o esboço, mas ele pode ser editado.

Qualquer dúvida só perguntar.

Ps: Para fazer ele abrir e fechar o código vai ficar muito grande e vc só vai poder usar 1 deles em cada tópico.
Então o mais fácil é colocar o código dentro de um spoiler.

ola, ficou muito bom cara *-*, mas parece que a caixa excede o tamanho das postagens(fica cortada ao meio) como faço para concerta isso?

pode deixar ja consegui editar aqui, valeu mesmo cara você é D+

É um prazer ajuda-lo! Por favor leia o MP que eu te mandei.

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]