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

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

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.

Olá,

Não fez efeito nehum

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.

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

UP

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.

Olá,

Já resultou mas vejam como está:

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?

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');
}}

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.

Olá,

Não fez efeito nenhum.

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

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

UP!

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');
        }}

Olá,

Não fez efeito nenhum.

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.

Olá,

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

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;

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.

UP

UP

UP

UP

UP

UP

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.