Resposta rápida em forma retratil

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

Resolvido Resposta rápida em forma retratil

Mensagem por Luan Diias em 06/07/16, 08:27 pm

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

Luan Diias
Nível 6

Masculino
Inscrito dia : 11/05/2016
Mensagens : 72
Pontos Ativos : 111

Ver perfil do usuário http://testegsf.forumeiros.com/

Resolvido Re: Resposta rápida em forma retratil

Mensagem por Luan Diias em 06/07/16, 10:29 pm

Up.
avatar

Luan Diias
Nível 6

Masculino
Inscrito dia : 11/05/2016
Mensagens : 72
Pontos Ativos : 111

Ver perfil do usuário http://testegsf.forumeiros.com/

Resolvido Re: Resposta rápida em forma retratil

Mensagem por while em 06/07/16, 10:31 pm

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

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Resposta rápida em forma retratil

Mensagem por Luan Diias em 06/07/16, 10:45 pm

Desculpa pelo 'Up'. 


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

Luan Diias
Nível 6

Masculino
Inscrito dia : 11/05/2016
Mensagens : 72
Pontos Ativos : 111

Ver perfil do usuário http://testegsf.forumeiros.com/

Resolvido Re: Resposta rápida em forma retratil

Mensagem por while em 07/07/16, 12:11 am

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

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Resposta rápida em forma retratil

Mensagem por Luan Diias em 07/07/16, 12:43 am

Bom, resultou, porém...


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


E gostaria que ficasse assim: http://i.imgur.com/S3IrWZ5.png?1
E após CLICAR dentro da caixinha abrir assim: http://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 /\ ?
avatar

Luan Diias
Nível 6

Masculino
Inscrito dia : 11/05/2016
Mensagens : 72
Pontos Ativos : 111

Ver perfil do usuário http://testegsf.forumeiros.com/

Resolvido Re: Resposta rápida em forma retratil

Mensagem por while em 07/07/16, 12:37 pm

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

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Resposta rápida em forma retratil

Mensagem por Luan Diias em 07/07/16, 01:04 pm

Obrigado, podem fechar.
avatar

Luan Diias
Nível 6

Masculino
Inscrito dia : 11/05/2016
Mensagens : 72
Pontos Ativos : 111

Ver perfil do usuário http://testegsf.forumeiros.com/

Resolvido Re: Resposta rápida em forma retratil

Mensagem por while em 07/07/16, 01:31 pm

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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