Resposta rápida em forma retratil

Detalhes da questão

Endereço do fórum: http://gsf-nwd.forumeiros.com/
Versão do fórum: PhpBB3

Descrição

Gostaria de ao invés da caixa de ferramenta e resposta rápida ficar assim: https://imgur.com/RxwYgPi


Ser assim: http://prntscr.com/bpk0mv


Daí clicando nessa caixa comprida e fina, ela abre normalmente a caixa de ferramente e resposta rápida.

Up.

Olá, é proibido o UP em menos de 24 horas.
Sugiro que leia as regras do setor de suporte.

Quanto sua duvida, adicione esse código em sua folha de estilo css:

Código:


form#quick_reply #textarea_content textarea#text_editor_textarea, form#quick_reply textarea#text_editor_textarea {
-htm-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 5ms;
-webkit-transition-duration: 1s;
transition-duration: 1s;
height: 10px;
width: 100%!important;
}
form#quick_reply:hover #textarea_content textarea#text_editor_textarea:hover, form#quick_reply textarea#text_editor_textarea:hover, form#quick_reply textarea#text_editor_textarea.post:hover {
position: relative;
height: 155px;
width: 100%!important;
}

Até mais.

Desculpa pelo 'Up'. 


Bom, adicionei o código, mas não obtive nenhum resultado.

Troque pra este:

Código:

.sceditor-container iframe, .sceditor-container textarea {
-htm-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 5ms;
-webkit-transition-duration: 1s;
transition-duration: 1s;
height: 10px!important;
width: 100%!important;
}
.sceditor-container iframe:hover , .sceditor-container textarea:hover {
position: relative;
height: 155px!important;
width: 100%!important;
}

Até mais.

Bom, resultou, porém...


Esse foi o resultado: https://i.imgur.com/WT4oJ70.png?1


E gostaria que ficasse assim: https://i.imgur.com/S3IrWZ5.png?1
E após CLICAR dentro da caixinha abrir assim: https://i.imgur.com/4nz3q9a.png?1


E o resultado que resultou, apenas basta passar o mouse em cima da caixa e já aparecia o restante e também ainda mostra a caixa de ferramente.


Possível mudar isso e deixa igual como falei ai em cima /\ ?

Desculpa minha má compreensão.

Crie um novo javascript com esse código (investimento nos tópicos):

Código:

$(function() {
      var adriel = document.getElementById('quick_reply');
      adriel.style.display="none";
      $(adriel).before('<div onclick="$(this.nextSibling).slideToggle();" class="textowhile"><center>Clique aqui para abrir a caixa de resposta</center></div>');
    });

E troque o css que te forneci por este:

Código:

.textowhile {
    float:center;
    border: 1px solid #CCC;
    padding: 5px 10px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #666;
    font-weight: bold;
    text-shadow: 0 1px white;
    background: #EEE;
}
.textowhile:hover { color: #C03; }

Até mais.

Obrigado, podem fechar.