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

5 participantes

Ir para baixo

Tópico resolvido Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 27.09.13 13:03

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):

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

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 17:59, editado 1 vez(es)
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por Sennior 27.09.13 16:51

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.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 27.09.13 19:19

Olá,

Não fez efeito nehum
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por Sennior 28.09.13 17:16

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.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 28.09.13 20:46

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

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 29.09.13 12:00

UP!
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 30.09.13 13:02

UP
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por -Pozz 30.09.13 14:13

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.
avatar
-Pozz
Super Membro

Membro desde : 29/08/2013
Mensagens : 1338
Pontos : 1853

http://visualart.ativoforum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 30.09.13 14:40

Olá,

Já resultou mas vejam como está:

Botões de enviar e pré-visualizar com outro estilo 1_bmp43
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por -Pozz 30.09.13 14:49

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?
avatar
-Pozz
Super Membro

Membro desde : 29/08/2013
Mensagens : 1338
Pontos : 1853

http://visualart.ativoforum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 30.09.13 15:35

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');
}}
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por Legolass 30.09.13 16:20

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.
Legolass
Legolass
Membro

Membro desde : 10/04/2013
Mensagens : 651
Pontos : 912

http://www.fanfictionunited.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 30.09.13 16:24

Olá,

Não fez efeito nenhum.
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por Legolass 30.09.13 17:10

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

Membro desde : 10/04/2013
Mensagens : 651
Pontos : 912

http://www.fanfictionunited.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 30.09.13 18:18

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:

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

Tive que retirar o código pois estava a bugar
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 01.10.13 17:27

UP!
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por -Pozz 01.10.13 17:38

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');
        }}
avatar
-Pozz
Super Membro

Membro desde : 29/08/2013
Mensagens : 1338
Pontos : 1853

http://visualart.ativoforum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 01.10.13 19:20

Olá,

Não fez efeito nenhum.
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por -Pozz 01.10.13 19:44

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.
Botões de enviar e pré-visualizar com outro estilo 1f8jKVX

Até mais.
avatar
-Pozz
Super Membro

Membro desde : 29/08/2013
Mensagens : 1338
Pontos : 1853

http://visualart.ativoforum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 01.10.13 20:29

Olá,

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

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por -Pozz 01.10.13 20:36

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;
        }
Botões de enviar e pré-visualizar com outro estilo PyC6kAu

Para diminuir mais, é só alterar este valor:

Código:
width: 200px;
avatar
-Pozz
Super Membro

Membro desde : 29/08/2013
Mensagens : 1338
Pontos : 1853

http://visualart.ativoforum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 01.10.13 20:52

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.
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 02.10.13 18:49

UP
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 03.10.13 19:29

UP
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 05.10.13 22:00

UP
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 06.10.13 11:13

UP
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 07.10.13 14:41

UP
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por IsmaelS. 08.10.13 14:10

UP
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões de enviar e pré-visualizar com outro estilo

Mensagem por First 08.10.13 14:35

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 
First
First
Super Membro

Membro desde : 13/07/2013
Mensagens : 1313
Pontos : 1884

http://www.ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos