Botões de enviar e pré-visualizar com outro estilo

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

Resolvido Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 27/09/13, 09:03 am

Qual é minha questão:
Olá,

Vejam esta print desejava esses botões mas em PT, com esse efeito verde (apenas esse efeito só nos botões Enviar e Pré-Visualizar):



Fórum que vi: http://www.15-tronos.net/forum

Endereço do meu fórum:
http://www.suportedesign.net

Versão do fórum:
PUNBB


Última edição por IsmaelS. em 08/10/13, 01:59 pm, editado 1 vez(es)

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por Sennior em 27/09/13, 12:51 pm

Olá!

Como eu não posso ver o botão, eu tentei fazer igual ao mesmo, o código é este CSS:
Código:
#main-content a.cgu-buttons, button.button2, input.button1, input.button2 {
width: 254px;
background: #71A200 !important;
text-align: center;
border-radius: 2px;
box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;
-webkit-transition: 0.3s;
-moz-transition-duration: 0.3s;
-htm-transition-duration: 0.3s;
color: white !important;
border: 1px solid rgb(151, 151, 151);
font-size: 13px;
font-weight: bold;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
border-color: rgba(0,0,0,0.16);
box-shadow: inset 0 0 2px rgba(97, 97, 97, 0.76);
-moz-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
transition: background-color 0.5s;
}
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: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 27/09/13, 03:19 pm

Olá,

Não fez efeito nehum

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por Sennior em 28/09/13, 01:16 pm

Olá!

Aqui está:
Código:
.pun .frm .frm-buttons input {
width: 254px;
background: #71A200 !important;
text-align: center !important;
border-radius: 2px;
box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;
-webkit-transition: 0.3s;
-moz-transition-duration: 0.3s;
-htm-transition-duration: 0.3s;
color: white !important;
border: 1px solid rgb(151, 151, 151);
font-size: 13px !important;
font-weight: bold;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
border-color: rgba(0,0,0,0.16);
box-shadow: inset 0 0 2px rgba(97, 97, 97, 0.76);
-moz-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
transition: background-color 0.5s;
}
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: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 28/09/13, 04:46 pm

Diz "O código CSS inserido é muito volumoso. Por favor, diminua-o."

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 29/09/13, 08:00 am

UP!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 30/09/13, 09:02 am

UP

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por -Pozz em 30/09/13, 10:13 am

Diz "O código CSS inserido é muito volumoso. Por favor, diminua-o."

Creio que você chegou a capacidade máxima suportada pela folha CSS.

E por isso, este problema apareceu.

Você pode estar retirando algum código CSS, que não seja de tal prioritária importância.

-Pozz
Membro do Fórum

Masculino
Inscrito dia : 29/08/2013
Mensagens : 1338
Pontos Ativos : 1853

Ver perfil do usuário http://visualart.ativoforum.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 30/09/13, 10:40 am

Olá,

Já resultou mas vejam como está:


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por -Pozz em 30/09/13, 10:49 am

Testei o código, está funcionando normal. O problema está no botão da caixa de moderação. Pode fornecer o código da mesma?

-Pozz
Membro do Fórum

Masculino
Inscrito dia : 29/08/2013
Mensagens : 1338
Pontos Ativos : 1853

Ver perfil do usuário http://visualart.ativoforum.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 30/09/13, 11:35 am

Olá,

Aqui está mas retirei o jS. e continuou igual mas fica aqui:

Código:
jQuery(document).ready(function(){
if(jQuery('.i_icon_ip').length){
jQuery('#quick_reply input[value="Pré-visualizar"]').before('
<li style="position: relative;display: inline-block;float: left;">
<input type="submit" value="Caixa de moderação" id="cdm" onclick="return false;">
<div id="mod" style="display: none;min-width: 435px;background: #e0e0e0;border: 1px solid #232323;z-index: 2000;margin: 0 0 8px 0;padding: 3px;position: absolute;">
<select id="status" style="padding: 2px">
<option value="">Status</option>
<option value="[size=14][color=green][b][i]Tópico Resolvido; e Bloqueado[/i][/b][/color][/size]">Tópico Resolvido; e Bloqueado</option>
<option value="[size=14][color=red][b][i]Tópico bloqueado[/i][/b][/color][/size]">Tópico bloqueado</option>
<option value="[size=14][color=green][b][i]Tópico desbloqueado[/i][/b][/color][/size]">Tópico desbloqueado</option>
</select>
<select id="to" style="padding: 2px">
<option value="">Movido para</option>
<option value="Arquivos">Arquivos</option>
<option value="Lixeira">Lixeira</option>
<option value="Local correspondente">Local correspondente</option>
<option value="Dicas e Tutoriais">Dicas e Tutoriais</option>
</select>
<textarea id="mot" name="subject" placeholder="Descreva o motivo desta mensagem" class="inputbox" style="display: block; margin: 5px 0 5px 0; min-height: 55px;" onChange="titulo();"/></textarea>
<input onclick=" envia();return false;" type="submit" id="gerar-msg" value="Gerar"/>
<input name="post" onclick=" envia()" type="submit" id="gerar-msg" value="Enviar"/>
<input name="post" onclick=" block()" type="submit" id="gerar-msg" value="Enviar & Block"/>
<input type="submit" value="Limpar caixa" id="limpar-msg" onclick="return false;"/>
</div>
</li>');
jQuery('#cdm').click(function() {
 jQuery('#mod').fadeToggle();
});
jQuery('#limpar-msg').click(function(){
jQuery('#text_editor_textarea').sceditor('instance').val('');
});
}
});
function envia(){
if(jQuery('#text_editor_textarea').val() == ""){
var pegatopics = jQuery('[name="t"]').val();
jQuery('[name="t"]').val(pegatopics);
jQuery('[name="message"]').sceditor('instance').insertText(jQuery('.sceditor-container iframe').val()+''+jQuery("#status").val()+''+'\n[b]Motivo:[/b] '+jQuery('#mot').val()+''+'\n[b]Movido para:[/b] '+jQuery('#to').val());
}}
function block(){
if(jQuery('#text_editor_textarea').val() == ""){
var pegatopics = jQuery('[name="t"]').val();
jQuery('[name="t"]').val(pegatopics);
jQuery('[name="message"]').sceditor('instance').insertText(jQuery('.sceditor-container iframe').val()+''+jQuery("#status").val()+''+''+jQuery('#mot').val()+''+'[b]Movido para:[/b] '+jQuery('#to').val());
window.open('/modcp?t='+pegatopics+'&mode=move&mode=lock');
}}

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por Legolass em 30/09/13, 12:20 pm

Olá! Troque os códigos passados por este CSS:

Código:
input, input[type="button"], input[type="reset"], input[type="submit"]{
border: 1px solid #29691D;
color: white;
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
background-color: #3D9400;
padding: 5px 10px;
border-radius: 2px;
cursor: pointer;
font: normal 13px arial,sans-serif;
background-image: -moz-linear-gradient(top,#3D9400,#398A00);
background-image: -ms-linear-gradient(top,#3D9400,#398A00);
background-image: -webkit-linear-gradient(top,#3D9400,#398A00);
background-image: linear-gradient(top,#3D9400,#398A00);
border: 1px solid #29691D;
}
Onde tem #3D9400,#398A00 troque pelas duas cores que quer no efeito gradient.
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 30/09/13, 12:24 pm

Olá,

Não fez efeito nenhum.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por Legolass em 30/09/13, 01:10 pm

Então troque por este:

Código:
input, input[type="button"], input[type="reset"], input[type="submit"]{
    border: 1px solid #29691D !important;
    color: white !important;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1) !important;
    background-color: #3D9400 !important;
    padding: 5px 10px !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    font: normal 13px arial,sans-serif !important;
    background-image: -moz-linear-gradient(top,#3D9400,#398A00) !important;
    background-image: -ms-linear-gradient(top,#3D9400,#398A00) !important;
    background-image: -webkit-linear-gradient(top,#3D9400,#398A00) !important;
    background-image: linear-gradient(top,#3D9400,#398A00) !important;
    border: 1px solid #29691D !important;
    }
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 30/09/13, 02:18 pm

Olá,

Esse código bugou alguns sítio do fórum, todas as caixas do fórum ficavam com o efeito em Verde dentro, mas os botões já apareceram mas falta o verde dentro em vez nas caixas:



Tive que retirar o código pois estava a bugar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 01/10/13, 01:27 pm

UP!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por -Pozz em 01/10/13, 01:38 pm

Olá, Ismael.

Troque o JS, por este:
Código:
jQuery(document).ready(function(){
        if(jQuery('.i_icon_ip').length){
        jQuery('#quick_reply input[value="Pré-visualizar"]').before('
        <li style="position: relative;display: inline-block;float: center;">
        <input type="submit" value="Caixa de moderação" id="cdm" onclick="return false;"  >

        <div id="mod" style="display: none;min-width: 435px;background: #e0e0e0;border: 1px solid #232323;z-index: 2000;margin: 0 0 8px 0;padding: 3px;position: absolute;" >
        <select id="status" style="padding: 2px" style="margin: auto >
        <option value="">Status</option>
        <option value="[size=14][color=green][b][i]Tópico Resolvido; e Bloqueado[/i][/b][/color][/size]">Tópico Resolvido; e Bloqueado</option>
        <option value="[size=14][color=red][b][i]Tópico bloqueado[/i][/b][/color][/size]">Tópico bloqueado</option>
        <option value="[size=14][color=green][b][i]Tópico desbloqueado[/i][/b][/color][/size]">Tópico desbloqueado</option>
        </select>
        <select id="to" style="padding: 2px">
        <option value="">Movido para</option>
        <option value="Arquivos">Arquivos</option>
        <option value="Lixeira">Lixeira</option>
        <option value="Local correspondente">Local correspondente</option>
        <option value="Dicas e Tutoriais">Dicas e Tutoriais</option>
        </select>
        <textarea id="mot" name="subject" placeholder="Descreva o motivo desta mensagem" class="inputbox" style="display: block; margin: 5px 0 5px 0; min-height: 55px;" onChange="titulo();"/></textarea>
        <input onclick=" envia();return false;" type="submit" id="gerar-msg" value="Gerar"/>
        <input name="post" onclick=" envia()" type="submit" id="gerar-msg" value="Enviar"/>
        <input name="post" onclick=" block()" type="submit" id="gerar-msg" value="Enviar & Block"/>
        <input type="submit" value="Limpar caixa" id="limpar-msg" onclick="return false;"/>
        </div>
        </li>');
        jQuery('#cdm').click(function() {
        jQuery('#mod').fadeToggle();
        });
        jQuery('#limpar-msg').click(function(){
        jQuery('#text_editor_textarea').sceditor('instance').val('');
        });
        }
        });
        function envia(){
        if(jQuery('#text_editor_textarea').val() == ""){
        var pegatopics = jQuery('[name="t"]').val();
        jQuery('[name="t"]').val(pegatopics);
        jQuery('[name="message"]').sceditor('instance').insertText(jQuery('.sceditor-container iframe').val()+''+jQuery("#status").val()+''+'\n[b]Motivo:[/b] '+jQuery('#mot').val()+''+'\n[b]Movido para:[/b] '+jQuery('#to').val());
        }}
        function block(){
        if(jQuery('#text_editor_textarea').val() == ""){
        var pegatopics = jQuery('[name="t"]').val();
        jQuery('[name="t"]').val(pegatopics);
        jQuery('[name="message"]').sceditor('instance').insertText(jQuery('.sceditor-container iframe').val()+''+jQuery("#status").val()+''+''+jQuery('#mot').val()+''+'[b]Movido para:[/b] '+jQuery('#to').val());
        window.open('/modcp?t='+pegatopics+'&mode=move&mode=lock');
        }}

-Pozz
Membro do Fórum

Masculino
Inscrito dia : 29/08/2013
Mensagens : 1338
Pontos Ativos : 1853

Ver perfil do usuário http://visualart.ativoforum.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 01/10/13, 03:20 pm

Olá,

Não fez efeito nenhum.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por -Pozz em 01/10/13, 03:44 pm

@IsmaelS. escreveu:Olá,

Não fez efeito nenhum.

O problema está no seu fórum então.

Fiz o teste e consegui o resultado esperado.


Até mais.

-Pozz
Membro do Fórum

Masculino
Inscrito dia : 29/08/2013
Mensagens : 1338
Pontos Ativos : 1853

Ver perfil do usuário http://visualart.ativoforum.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 01/10/13, 04:29 pm

Olá,

Mas veja esses botões como estão, eles deviam estar como todos os fórum em quadrados pequenos.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por -Pozz em 01/10/13, 04:36 pm

Isto eu havia aumentando no css. Se for por causa disto, eis o CSS:

Código:

        .pun .frm .frm-buttons input {
        width: 200px;
        background: #71A200 !important;
        text-align: center !important;
        border-radius: 2px;
        box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;
        -webkit-transition: 0.3s;
        -moz-transition-duration: 0.3s;
        -htm-transition-duration: 0.3s;
        color: white !important;
        border: 1px solid rgb(151, 151, 151);
        font-size: 13px !important;
        font-weight: bold;
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
        border-color: rgba(0,0,0,0.16);
        box-shadow: inset 0 0 2px rgba(97, 97, 97, 0.76);
        -moz-transition: background-color 0.5s;
        -o-transition: background-color 0.5s;
        transition: background-color 0.5s;
        }


Para diminuir mais, é só alterar este valor:

Código:
width: 200px;

-Pozz
Membro do Fórum

Masculino
Inscrito dia : 29/08/2013
Mensagens : 1338
Pontos Ativos : 1853

Ver perfil do usuário http://visualart.ativoforum.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 01/10/13, 04:52 pm

Olá, e se quiser aumentar para cima ? E tem outro problema só que tem que se registar e ver lá, se passar o mouse em cima de todos os botões do fórum "Enviar,Pré-visualizar, Caixa de Moderação" em vez de aparecer o Curor com a mão não aparece o cursor de escrever, mas para perceber veja lá no fórum.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 02/10/13, 02:49 pm

UP

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 03/10/13, 03:29 pm

UP

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 05/10/13, 06:00 pm

UP

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 06/10/13, 07:13 am

UP

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 07/10/13, 10:41 am

UP

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. em 08/10/13, 10:10 am

UP

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por First em 08/10/13, 10:35 am

Olá,

Senhor, retire todos os códigos passados acima e adicione este código em sua folha de estilo CSS:
Código:
.pun .frm .frm-buttons input, input[type="button"], input[type="reset"], input[type="submit"] {
background-image: -webkit-linear-gradient(top,#3D9400,#368200);
}
.pun .frm .frm-buttons input, input[type="button"], input[type="reset"], input[type="submit"] {
border: 1px solid #29691D;
color: white;
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
background-color: #3D9400;
padding: 5px 10px;
border-radius: 2px;
cursor: pointer;
font: normal 13px arial,sans-serif;
background-image: -moz-linear-gradient(top,#3D9400,#398A00);
background-image: -ms-linear-gradient(top,#3D9400,#398A00);
background-image: -o-linear-gradient(top,#3D9400,#398A00);
background-image: linear-gradient(top,#3D9400,#398A00);
border: 1px solid #29691D;
}
.pun .frm .frm-buttons input:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
border: 1px solid #16570A;
box-shadow: 0px 0px 3px #29691D;
}

Até mais,
Passar bem. Piscada 
avatar

First
Membro do Fórum

Masculino
Inscrito dia : 12/07/2013
Mensagens : 1287
Pontos Ativos : 1843

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

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