Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Personalizar posts
Hoje à(s) 10:31 pm por Kyko

» Mostrar usuário do post
Hoje à(s) 08:27 pm por rlmac

» Como fazer sub entrada?
Hoje à(s) 08:07 pm por Harleen

» Como trasnferir um site do wix para forumeiros?
Hoje à(s) 07:33 pm por Shek

» Best Skins | as melhores skins você encontra aqui.
Hoje à(s) 06:48 pm por Dr.

» Widget melhor do mês não funciona
Hoje à(s) 05:03 pm por Kyo Panda

» Caixa de Login
Hoje à(s) 04:34 pm por iScroll

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
Shek
 
Luiz
 
APOllO
 
Kyko
 
odelgado
 
mrvisible
 
iScroll
 
rlmac
 

Quem está conectado
271 usuários online :: 8 usuários cadastrados, Nenhum Invisível e 263 Visitantes :: 2 Motores de busca

APOllO, iScroll, Kyko, mrvisible, MtX, odelgado, rlmac, SnowGray

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Ajustar aspeto de formulários

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

Resolvido Ajustar aspeto de formulários

Mensagem por IsmaelS. em 16/08/16, 11:07 pm

Detalhes da questão


Endereço do fórum: http://suportedesign.forumeiros.com/
Versão do fórum: PunBB

Descrição


Olá!

Já tinha aberto uma dúvida com o mesmo problema: http://ajuda.forumeiros.com/t106304-falha-no-aspeto-em-formulario

E queria o mesmo mas para estes formulários:
Código:
<script src="http://forum-script.googlecode.com/files/VarGET.js"></script><script>
    html_tpl = "<b>Nome do fórum:</b> $1 <br><br><b>Endereço do fórum:</b> $2<br><br><b>Data de criação do fórum:</b> $3 <br><br><b>O fórum já foi avaliado anteriormente? Se já, quando?</b> $4 <br><br><b>Comentários adicionais:</b> $5<br><br>";
    bbcode_tpl = "[b]Nome do fórum:[/b] $1 \n\n[b]Endereço do fórum:[/b] $2 \n\n[b]Data de criação do fórum:[/b] $3\n\n[b]O fórum já foi avaliado anteriormente? Se já, quando?[/b] $4\n\n[b]Comentários adicionais:[/b] $5";
    $(document).ready(function(){
      $('#bt-apagar').click(function() {
          $('#form-submit input[type="text"],#form-submit textarea').val('');
          $('input[name="f"]').val($(this).val());
      });
      $('#bt-pr-questao').click(function() {
          tpl = html_tpl;
          tpl = tpl.replace("$1", $('#tituloforum').val());
          tpl = tpl.replace("$2", $('#endereco').val());
          tpl = tpl.replace("$3", $('#idade').val());
          tpl = tpl.replace("$4", $('#avaliacao').val());
          tpl = tpl.replace("$5", $('#comentario').val());
          $('html, body').animate({
            scrollTop: $("#pr-questao").offset().top
          }, 800);
          $('#pr-questao').slideDown(300);
          $('#html-questao').html(tpl);
      });
      $('#bt-enviar').click(function() {
          tpl = bbcode_tpl;
          if($('#tituloforum').val()!=='' && $('#endereco').val()!=='' && $('#avaliacao').val()!=='' && $('#idade').val()!=='' && $('#comentario').val()!==''){
            tpl = tpl.replace("$1", $('#tituloforum').val());
            tpl = tpl.replace("$2", $('#endereco').val());
            tpl = tpl.replace("$3", $('#idade').val());
            tpl = tpl.replace("$4", $('#avaliacao').val());
            tpl = tpl.replace("$5", $('#comentario').val());
            $('input[name="message"]').val(tpl);
            $('input[name="subject"]').val($('#tituloforum').val());
            $('#bt-enviar-e').click();
            $('#form-submit').slideUp(300);
            $('#enviado').slideDown(800);
          }else{
            $('#erro').slideUp(1);
            $('#erro').slideDown(800);
          }
      });
      $('#bt-pr-fechar').click(function() {
          $('html, body').animate({
            scrollTop: $("#pr-questao").offset().top
          }, 800);
          $('#pr-questao').slideUp(300);
          return false;
      });
      $('#tituloforum').click(function() {
          if($('#tituloforum').val()=='Coloque aqui um título descritivo sobre a sua questão'){
            $('#tituloforum').val('');
          }
      });
      jQuery('#tituloforum').keyup(function(){
          var t=document.getElementById('tituloforum').value.length;
          var i=document.getElementById('identifytitle');
          if(t<10&&t>0){
            var l=t-10;i.innerHTML='O nome do fórum necessita mais '+l*-1+' caracteres'
          }
          else{
            i.innerHTML=''
          }
      });
      var e='#endereco';
      var v='#validardominio'
      jQuery(e).after(' <div id=validardominio style=display:inline></div>')
      jQuery(e).keyup(function(){
          var u=jQuery(e).val();
          m=/^(https?:\/\/)?(www\.)?([a-zA-Z0-9_\-]+)+\.([a-zA-Z]{2,4})(?:\.([a-zA-Z]{2,4}))?\/?(.*)$/;
          if(u.match(m)){jQuery(v).html('')}else{jQuery(v).html('Esse domínio não é válido')};
      });
      if(VarGET('f')!==''){
          $('#form-part2, #bts').slideDown(800);
          $('input[name="f"]').val(VarGET('f'));
          $('#bt-selecciona-forum').val(VarGET('f'));
      }
    });
 
 
    </script>
     
<form action="/post" method="post" id="form-submit">
    <div id="erro" style="display:none;" class="panel">
                <div class="inner">
                        <span class="corners-top"></span>
                        <center><span class="conteudo_texto" style="color:#C00"><b>Você deve preencher todos os campos</b></span></center>
                        <span class="corners-bottom"></span>
                </div>
        </div>
<br>
    <div style="display:none;" id="pr-questao" class="post row2">
                <div class="inner">
                        <span class="corners-top"></span>
                                <div class="postbody">
                                        <div class="h3">Pré-visualizar [<a id="bt-pr-fechar" href="#">Fechar o modo de pré-visualização</a>]</div>
                                        <div id="html-questao" class="content"></div>
                                </div>
                        <span class="corners-bottom"></span>
                </div>
        </div>
<hr style="display:none;" id="pr-questao">
<br>
        <div class="panel">
                <div class="inner">
                        <span class="corners-top"></span> 
                                <div class="h3" style="margin-top: 7px;">Sobre o formulário</div>
                                  <p>O presente formulário foi criado com o objetivo de promover uma maior organização dos pedidos feitos na seção de análises. Assim que tudo estiver feito, poderá enviar o pedido, que será postado automaticamente. Se necessitar de alguma modificação, poderá fazer editando a sua mensagem.</p>
                </div>
                        <span class="corners-bottom"></span>
        </div>
<br>
    <div class="panel" id="form-part2">
                <div class="inner">
                        <span class="corners-top"></span>
                                <div class="h3" style="margin-top: 7px;">Formulário de análise</div> 
                                <br> 
                                        <fieldset class="fields1">
                                        <dl><dt><label>Nome do fórum:</label></dt>
                                                <dd><input type="text" id="tituloforum" class="inputbox" style="clear: both; width: 510px;">
                                                <div id=identifytitle style=display:inline></div>
                                                </dd></dl>
                                        <dl><dt><label>Endereço do fórum:</label></dt>
                                                <dd><input type="text" id="endereco" class="inputbox" style="clear: both; width: 510px;">
                                                </dd></dl>
                                        <dl><dt><label>Foi avaliado anteriormente? Se sim, quando?</label></dt>
                                                <dd><input type="text" id="avaliacao" class="inputbox" style="clear: both; width:510px;line-height: 18px;">
                                                </dd></dl>
                                        <dl><dt><label>Comentários adicionais:</label></dt>
                                                <dd><textarea id="comentario" class="inputbox" tabindex="14" style="clear: both; height: 100px; width:510px;"></textarea>
                                                </dd></dl> 
                                        </fieldset>
                        <input type="hidden" name="subject">
                        <input type="hidden" name="message">
                        <input type="hidden" name="mode" value="newtopic">
                        <input type="hidden" name="f" value="50">
                        <input type="hidden" name="lt" value="0">   
                        <span class="corners-bottom"></span>
                </div>
        </div>
<br>
    <div id="bts" style="" class="panel">
                <div class="inner">
                        <span class="corners-top"></span>
                        <fieldset class="submit-buttons">
                                <input id="bt-pr-questao" value="Pré-visualizar" type="button" class="button1">
                                <input id="bt-enviar" value="Enviar questão" type="button" class="button1" name="post">
                                <input id="bt-apagar" value="Apagar tudo" type="button" class="button1">
                                <input id="bt-enviar-e" value="Enviar Questão" type="submit" class="button1" style="display:none;" name="post">
                        </fieldset>
                        <span class="corners-bottom"></span>
                </div>
        </div>
</form>
- http://suportedesign.forumeiros.com/f50-analises-de-foruns

Código:
<style>
.previsu {
 background: url('http://i.imgur.com/PrP18sN.png');
 border: 1px solid #1675BC;
 display: none;
 position: absolute;
 top: 350px;
 margin: auto;
 margin-left: 150px !important;
}
 .previsuimg {
 position: relative;
 }
 .previsuimg div {
 position: absolute; top: 30px; left: -10px; border: 3px double #E0E0E0; background: rgba(250, 250, 250, 0.9);
 }
 
 
 
 
 
 
 
 
#addimage .part { background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat -235px -600px; width: 60px; height: 20px;}
#addimage .more { background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
.image .part { background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat -235px -548px; width: 60px; height: 20px;}
.image .remove { float: left;background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
.image .previsualise { float: left;background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat -50px -436px; margin-left: 5px; padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
 
 
 
 
 .image { width: 300px; }
 
 
 
 
</style>
 
 
 
 
<script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
<script>
 
 
 
 
 
 
 
 
function gerartitulo() {
 var tipo = document.getElementById("tipo").value;
 
 
 
 
switch(tipo) {
 case '[Avatar] ':
 tipob = 'Avatar';
 jQuery('input[name="f"]').val('26');
 break;
 case '[Assinatura] ':
 tipob = 'Assinatura';
  jQuery('input[name="f"]').val('26');
 break;
 case '[Userbar] ':
 tipob = 'Userbar';
  jQuery('input[name="f"]').val('26');
 break;
 case '[Banner] ':
 tipob = 'Banner';
  jQuery('input[name="f"]').val('26');
 break;
 case '[Logo] ':
 tipob = 'Logo';
  jQuery('input[name="f"]').val('26');
 break;
 
 
 
 
case '[Menu] ':
case '[Botões] ':
case '[Ícones] ':
case '[Ranks] ':
jQuery('input[name="f"]').val('26');
 break;
 
 
 
 
case '[Outros] ':
case '[Imagem] ':
jQuery('input[name="f"]').val('26');
 break;
 }
 
 
 
 
 var cor = document.getElementById("cor").value;
 var tamanho = document.getElementById("tamanho").value;
 var texto = document.getElementById("texto").value;
 var textotonalidade = document.getElementById("textotonalidade").value;
 var cortonalidade = document.getElementById("cortonalidade").value;
 
 
 
 
jQuery("input[name=subject]").attr('value', tipo+cor+cortonalidade+tamanho+texto+textotonalidade);
 jQuery("#titlecode").html(tipo+cor+cortonalidade+tamanho+texto+textotonalidade);
 
 
 
 
if(tipo == "[Avatar] " || tipo == "[Assinatura] " || tipo == "[Userbar] " || tipo == "[Banner] " || tipo == "[Logo] ") {
 jQuery('#size_extra optgroup').css('display','block');
 jQuery('#size_extra optgroup[label!=' + tipob + ']').css('display','none');
 jQuery('#size_extra_span').css('display','block');
 }
 else {
 jQuery('#size_extra_span').css('display','none');
 }
}
imagensdopedido = '';
 
 
 
 
function gerarpedido() {
 gerartitulo();
 var cordofundo = document.getElementById("fundo").value;
 var cordafonte = document.getElementById("fontecor").value;
 var nomedafonte = (document.getElementById("fonte").value == '') ? document.getElementById("fonteNome").value : document.getElementById("fonte").value;
 var tipodeanimacao = (document.getElementById("animacao").value == '') ? document.getElementById("animacaoNome").value : document.getElementById("animacao").value;
 var tipodemoldura = (document.getElementById("moldura").value == '') ? document.getElementById("molduraNome").value : document.getElementById("moldura").value;
 var descricaodopedido = document.getElementById("adicionais").innerHTML;
 var descricaodopedido = document.getElementById("adicionais").value;
 var dimensaoA = document.getElementById("dimensoesA").value;
 var dimensaoL = document.getElementById("dimensoesL").value;
 
 
 
 
var dimensaof = (document.getElementById("size_extra").value == '') ? dimensaoL + ' x ' + dimensaoA + ' px' : document.getElementById("size_extra").value;
 
 
 
 
var urlforum = document.getElementById("urlforum").value;
 
 
 
 
finalmessage = '[b]Endereço do fórum :[/b] [url]'+ urlforum + '[/url]\n[b]Imagens a serem usadas :[/b] ' + imagensdopedido + '\n [b]Dimensões :[/b] ' + dimensaof +' \n[b]Cor do fundo :[/b] #' + cordofundo + '\n[b]Cor da fonte :[/b] #' + cordafonte + '\n[b]Fonte :[/b] ' + nomedafonte + '\n[b]Animação :[/b] ' + tipodeanimacao + '\n[b]Moldura :[/b] ' + tipodemoldura + '\n[b]Descrição do trabalho :[/b] ' + descricaodopedido;
 
 
 
 
 
 
 
 
jQuery("input[name=message]").attr('value', finalmessage);
}
 
 
 
 
function outra(id) {
 var inputID = id+"Nome";
 (document.getElementById(id).value == '') ? document.getElementById(inputID).style.display = 'inline' : document.getElementById(inputID).style.display = 'none';
 document.getElementById(inputID).focus();
}
 
 
 
 
 function removeimg(obj) {
 obj.parent().parent().remove();
 update_img();
 }
 function addimg() {
 $('#addimage').before('<tr class=image><td class=part></td><td><input style="float:left; display: inline; background-color: #ffffff;border: 1px solid #BCBCBC;color: #666666;padding: 2px;cursor: text;" type=text name=images id="Imagens_AddMore" onchange="update_img_list()" /> <div class="previsualise"></div> <div class="remove" onClick="removeimg($(this))"></div><div class="previsuimg"><div></div></div></td></tr>');
 $('#addimage').prev().find('.previsualise').hover(
 function () {
 $(this).parent().find('.previsuimg').html('<div><img src="'+encodeURI($(this).parent().find('input').attr('value'))+'" /></div>').find('div').css('display','block');
 },
 function () {
 $(this).parent().find('.previsuimg div').css('display','none');
 }
 );
 update_img();
 }
 function update_img() {
 if($('.image').length<2) $('.image .remove').hide();
 else $('.image .remove').show();
 update_img_list();
 }
 
 
 
 
function update_img_list() {
 imagensdopedido = '';
 jQuery('input[name=images]').each( function(index) {
if($(this).val() != '') {
 imagensdopedido = imagensdopedido + $(this).val() + ' ; ';
}
 });
 gerarpedido();
 }
 
 
 
 
gerartitulo();
gerarpedido();
 
 
 
 
</script>
 <div class="panel row2"><div class="inner"><span class="corners-top"><span></span></span>
 <div class="h3" style="margin-top: 7px;">Sobre o formulário</div>
 <p style="font-size: 12px;">O presente formulário foi criado com o objetivo de promover uma maior organização dos pedidos feitos na seção gráfica deste fórum. Em cada uma das divisões abaixo poderá encontrar uma parte do código, a primeira caixa - "Informações gerais" - vale para o título e a segunda para o corpo da mensagem. Assim que tudo estiver feito, poderá enviar o pedido, que será postado automaticamente. Se necessitar de alguma modificação, poderá fazer editando a sua mensagem.
 
 
 
</p><span class="corners-bottom"><span></span></span>
 </div>
 </div>
 
 
 
 
 <div class="clear" style="height: 6px;"></div><div class="panel"><div class="inner"><span class="corners-top"><span></span></span><div class="h3" style="margin-top: 7px;">Informações gerais</div>
 
 
 
 
<form action="/posting.forum" method="post" id="fa_form" name="Pedidos" onSubmit="return ValidarFormulario();" >
 <fieldset class="fields1">
 
 
 
 
<dl><dt>
 <label>Tipo de pedido:</label></dt><dd><select id="tipo" tabindex="1" onChange="gerartitulo();" name="tipoPedido" />
 <option value=""></option>
 <option value="[Avatar] ">Avatar</option>
 
 
 
 
 
 
 
 
<option value="[Assinatura] ">Assinatura</option>
 <option value="[Userbar] ">Userbar</option>
 <option value="[Banner] ">Banner</option>
 <option value="[Logo] ">Logo</option>
 <option value="[Botões] ">Botões</option>
 <option value="[Ícones] ">Ícones</option>
 
 
 
 
 <option value="[Ranks] ">Ranks</option>
 <option value="[Outros] ">Outros</option>
 </select></dd></dl>
 
 
 
 
<dl><dt>
 <label>Cor geral:</label></dt><dd><select id="cor" tabindex="2" onChange="gerartitulo();" />
 
 
 
 
 <option value=" "></option>
 
 
 
 
<option value="Vermelho">Vermelho</option>
 <option value="Verde">Verde</option>
 <option value="Amarelo">Amarelo</option>
 <option value="Azul">Azul</option>
 <option value="Roxo">Roxo</option>
 
 
 
 
 <option value="Rosa">Rosa</option>
 
 
 
 
<option value="Laranja">Laranja</option>
 <option value="Branco">Branco</option>
 <option value="Preto">Preto</option>
 <option value="Cinza">Cinza</option>
 <option value="Marrom">Marrom</option>
 
 
 
 
 <option value="Transparente">Transparente</option>
 
 
 
 
<option value="">Nenhuma da lista</option></select> <select id="cortonalidade" onChange="gerartitulo();" />
 <option value=""></option>
 <option value="">Normal</option>
 <option value=" claro">Claro</option>
 <option value=" escuro">Escuro</option></select></dd></dl>
 
 
 
 
 
 
 
 
<dl><dt>
 <label>Tamanho geral:</label></dt><dd><select id="tamanho" tabindex="3" onChange="gerartitulo();" />
 
 
 
 
<option value=" "></option>
 <option value=" - Pequeno ">Pequeno</option>
 <option value=" - Médio ">Médio</option>
 <option value=" - Grande ">Grande</option></select></dd></dl>
 
 
 
 
<dl><dt>
 
 
 
 
 <label>Cor geral do texto:</label></dt><dd><select id="texto" tabindex="4" onChange="gerartitulo();" />
 <option value=" "></option>
 
 
 
 
<option value="- Texto vermelho ">Vermelho</option>
 <option value="- Texto verde ">Verde</option>
 <option value="- Texto amarelo ">Amarelo</option>
 <option value="- Texto azul ">Azul</option>
 
 
 
 
 <option value="- Texto roxo ">Roxo</option>
 <option value="- Texto rosa ">Rosa</option>
 
 
 
 
<option value="- Texto laranja ">Laranja</option>
 <option value="- Texto branco ">Branco</option>
 <option value="- Texto preto ">Preto</option>
 <option value="- Texto cinza ">Cinza</option>
 
 
 
 
 <option value="- Texto marrom ">Marrom</option>
 <option value="">Nenhuma da lista</option></select> <select id="textotonalidade" onChange="gerartitulo();" />
 
 
 
 
<option value=""></option>
 <option value="">Normal</option>
 <option value=" claro">Claro</option>
 <option value=" escuro">Escuro</option></select></dd></dl>
 
 
 
 
 
 
 
 
</fieldset>
 <span class="corners-bottom"><span></span></span></div></div><div class="clear" style="height: 6px;"></div>
 <div class="panel"><div class="inner"><span class="corners-top"><span></span></span>
 <div class="h3" style="margin-top: 7px;">Informações específicas</div>
 
 
 
 
<fieldset class="fields1">
 
 
 
 
<dl><dt>
 <label>Imagens a serem usadas:</label></dt>
 
 
 
 
 <dd>Indique o endereço da imagem a usar. Caso necessite de mais imagens, carregue em +, para que o endereço seja validado. Este irá desaparecer, e poderá então adicionar outro endereço.
 <table>
 <tr id="addimage">
 <td class="part"></td>
 <td>
 <div class="more" onClick="addimg()"></div>
 
 
 
 
</td>
 </tr>
 </table>
 
 
 
 
 
 
 
 
<script type="text/javascript">addimg()</script>
 
 
 
 
</dd></dl>
 <dl><dt>
 <label>Dimensões:</label></dt>
 <dd> <input class="inputbox" type="text" id="dimensoesL" tabindex="6" onChange="gerarpedido();" style="width: 30px; clear: both;" />
 
 
 
 
px (largura) X
 <input class="inputbox" type="text" id="dimensoesA" tabindex="7" onChange="gerarpedido();" style="width: 30px;" /> px (altura) </dd><dd> <span id="size_extra_span" style="display: none;"> Tamanhos padrões do tipo de pedido escolhido : <select id="size_extra">
 
 
 
 
 <option value=""></option>
 <optgroup label="Avatar">
 <option value="120 x 120 px">120 x 120 px</option>
 <option value="100 x 120 px">100 x 120 px</option>
 
 
 
 
<option value="120 x 160 px">120 x 160 px</option>
 <option value="140 x 180 px">140 x 180 px</option>
 <option value="140 x 200 px">140 x 200 px</option>
 
 
 
 
 <option value="150 x 180 px">150 x 180 px</option>
 <option value="150 x 200 px">150 x 200 px</option>
 </optgroup>
 
 
 
 
<optgroup label="Assinatura">
 <option value="400 x 120 px">400 x 120 px</option>
 <option value="400 x 150 px">400 x 150 px</option>
 <option value="450 x 150 px">450 x 150 px</option>
 
 
 
 
 </optgroup>
 <optgroup label="Userbar">
 <option value="350 x 19 px">350 x 19 px</option>
 
 
 
 
</optgroup>
 <optgroup label="Banner">
 <option value="70 x 30 px">70 x 30 px</option>
 <option value="90 x 15 px">90 x 15 px</option>
 
 
 
 
 <option value="120 x 60 px">120 x 60 px</option>
 <option value="150 x 50 px">150 x 50 px</option>
 <option value="468 x 60 px">468 x 60 px</option>
 
 
 
 
</optgroup>
 <optgroup label="Logo">
 <option value="600 x 200 px">600 x 200 px</option>
 <option value="750 x 200 px">750 x 200 px</option>
 
 
 
 
 <option value="800 x 220 px">800 x 220 px</option>
 <option value="150 x 50 px">830 x 200 px</option>
 </optgroup>
 
 
 
 
</select></span>
 </dd></dl>
 
 
 
 

 
 
 
 
 
 
 
 
<dl><dt>
 <label>Cor do fundo:</label></dt>
 
 
 
 
<dd>Código hexadecimal da cor que deverá ser usada :<br>
 <input type="text"  tabindex="9" onChange="gerarpedido();" class="inputbox color champ" value="FFFFFF" id="fundo" name="couleur_fond" maxlength="7" onblur="this.style.borderColor='#FFFFFF'" onfocus="this.style.borderColor='#FFFFFF'" style="width: 70px; background: url('http://i.imgur.com/0ZoqOrz.png') no-repeat right;" />
 </dd></dl>
 
 
 
 
 
 
 
 
<dl><dt>
 <label>Cor da fonte:</label></dt>
 <dd>Código hexadecimal da cor que deverá ser usada :<br>
 <input type="text" tabindex="10" onChange="gerarpedido();" class="inputbox color champ" value="FFFFFF" id="fontecor" name="couleur_fond" maxlength="7" onblur="this.style.borderColor='#FFFFFF'" onfocus="this.style.borderColor='#FFFFFF'" style="width: 70px; background: url('http://i.imgur.com/0ZoqOrz.png') no-repeat right;" />
 </dd></dl>
 
 
 
 
<dl><dt>
 
 
 
 
<label>Fonte:</label></dt><dd><select id="fonte" tabindex="11" onChange="outra('fonte'); gerarpedido();" />
 <option value=" "></option>
 
 
 
 
 <option value="Arial" style="font-family: Arial;">Arial</option>
 <option value="Arial Black" style="font-family: Arial Black;">Arial Black</option>
 <option value="Comic Sans MS" style="font-family: Comic Sans MS;">Comic Sans MS</option>
 <option value="Courier New" style="font-family: Courier New;">Courier New</option>
 
 
 
 
<option value="Georgia" style="font-family: Georgia;">Georgia</option>
 <option value="Times New Roman" style="font-family: Times New Roman;">Times New Roman</option>
 
 
 
 
 <option value="Calibri" style="font-family: Calibri;">Calibri</option>
 <option value="Trebuchet MS" style="font-family: Trebuchet MS;">Trebuchet MS</option>
 <option value="Verdana" style="font-family: Verdana;">Verdana</option>
 <option value="Visitor TTK 2" style="font-family: Visitor TTK 2;">Visitor TTK 2 (usada em Userbars)</option>
 
 
 
 
<option value="">Outra</option>
 </select> <input id="fonteNome" style="display: none; width: 400px;" class="inputbox" value="Qual?" onclick="if (this.value == 'Qual?') this.value = '';" onblur="if (this.value == '') this.value = 'Qual?';" onChange="gerarpedido();" onfocus="if (this.value == 'Qual?') this.value = '';" onblur="if (this.value == '') this.value = 'Qual?';"></dd></dl>
 
 
 
 
 
 
 
 
<dl><dt>
 <label>Animação:</label></dt><dd><select id="animacao" tabindex="12" onChange="outra('animacao'); gerarpedido();" />
 <option value=" "></option>
 <option value="Não">Não</option>
 <option value="">Sim</option>
 
 
 
 
</select> <input id="animacaoNome" style="display: none; width: 400px;" class="inputbox" value="Como?" onclick="if (this.value == 'Como?') this.value = '';" onblur="if (this.value == '') this.value = 'Como?';" onChange="gerarpedido();" onfocus="if (this.value == 'Como?') this.value = '';" onblur="if (this.value == '') this.value = 'Como?';"></dd></dl>
 
 
 
 
<dl><dt>
 
 
 
 
 <label>Moldura:</label></dt><dd><select id="moldura" tabindex="13" onChange="outra('moldura'); gerarpedido();" />
 <option value=" "></option>
 <option value="Não">Não</option>
 <option value="">Sim</option>
 </select> <input id="molduraNome" style="display: none; width: 400px;" class="inputbox" value="Como?" onclick="if (this.value == 'Como?') this.value = '';" onblur="if (this.value == '') this.value = 'Como?';" onChange="gerarpedido();" onfocus="if (this.value == 'Como?') this.value = '';" onblur="if (this.value == '') this.value = 'Como?';" /></dd></dl>
 
 
 
 
<dl><dt>
 <label>Descrição do trabalho:</label></dt>
 
 
 
 
 <dd><textarea class="inputbox" id="adicionais" tabindex="14" onChange="gerarpedido();" style="clear: both; height: 100px; width: 500px;"></textarea></dd></dl>
 
 
 
 
</fieldset>
 
 
 
 
<input type="hidden" name="message" />
 <input type="hidden" name="subject" />
 <input type="hidden" name="mode" value="newtopic" />
 <input type="hidden" name="f" value="38" />
 <input type="hidden" name="lt" value="0" />
 
 
 
 
 
 
 
 
<span class="corners-bottom"><span></span></span></div></div><div class="panel"><div class="inner"><span class="corners-top"><span></span></span>
 <fieldset class="submit-buttons">
<input value="Enviar seu pedido gráfico" type="submit" class="button1" name="post"  />
<input type="submit" name="preview" class="button2" value="Pré-Visualizar pedido gráfico" tabindex="5" >
</fieldset>
 
<span class="corners-bottom"><span></span></span></div></form>
 

 
 
<script>gerartitulo();</script></div>
</style><script>
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false';
}
}
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>
- http://suportedesign.forumeiros.com/f26-criacoes-graficas


Última edição por IsmaelS. em 24/08/16, 05:01 pm, editado 1 vez(es)

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2770
Pontos Ativos : 3865

http://master-publicitario.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulários

Mensagem por IsmaelS. em 18/08/16, 12:23 am

UP!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2770
Pontos Ativos : 3865

http://master-publicitario.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulários

Mensagem por IsmaelS. em 19/08/16, 12:38 am

UP!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2770
Pontos Ativos : 3865

http://master-publicitario.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulários

Mensagem por IsmaelS. em 20/08/16, 12:39 am

UP! Ajuda/Confuso

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2770
Pontos Ativos : 3865

http://master-publicitario.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulários

Mensagem por IsmaelS. em 21/08/16, 12:47 pm

UP alguém? oO

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2770
Pontos Ativos : 3865

http://master-publicitario.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulários

Mensagem por IsmaelS. em 22/08/16, 02:23 pm

UP! Ajuda/Confuso

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2770
Pontos Ativos : 3865

http://master-publicitario.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulários

Mensagem por Shek em 23/08/16, 10:32 am

Bom dia!

Você pode usar este tutorial para basear-se no que precisa: http://ajuda.forumeiros.com/t15986- Nele, fornecemos o código estruturado de cada versão, e usando as tabelas substituindo os valores informados no tutorial, você terá o que foi feito no tópico que já havia criado!

Até mais!


ShekAdmineiro - Fórum dos Fóruns
Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16560
Pontos Ativos : 20888

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Ajustar aspeto de formulários

Mensagem por IsmaelS. em 23/08/16, 04:13 pm

Não sei se percebi mas esse tutorial é para criar um widget duplo como é que consigo ajustar ou mesmo criar um formulário através disso?

O que simplesmente queria era como o @Cepheus fez nesta dúvida: http://ajuda.forumeiros.com/t106304-falha-no-aspeto-em-formulario

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2770
Pontos Ativos : 3865

http://master-publicitario.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulários

Mensagem por Shek em 23/08/16, 07:36 pm

Então Ismael... O que ele fez foi usar as tabelas do CSS padrão do seu fórum. No tutorial que mencionei, você poderá pegar, por exemplo, o código do widget para sua versão, e substituir os valores em vermelho pelos códigos do seu formulário.


ShekAdmineiro - Fórum dos Fóruns
Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16560
Pontos Ativos : 20888

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Ajustar aspeto de formulários

Mensagem por IsmaelS. em 23/08/16, 11:18 pm

Será que poderia me ajudar nisso é que não estou a perceber bem :/

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2770
Pontos Ativos : 3865

http://master-publicitario.forumeiros.com/
  • 0

Resolvido Re: Ajustar aspeto de formulários

Mensagem por Fraise em 24/08/16, 12:55 am

Boa noite, Ismael!

Por gentileza, troque o formulário pro este:
Código:
<script src="http://forum-script.googlecode.com/files/VarGET.js"></script><script>
    html_tpl = "<b>Nome do fórum:</b> $1 <br><br><b>Endereço do fórum:</b> $2<br><br><b>Data de criação do fórum:</b> $3 <br><br><b>O fórum já foi avaliado anteriormente? Se já, quando?</b> $4 <br><br><b>Comentários adicionais:</b> $5<br><br>";
    bbcode_tpl = "[b]Nome do fórum:[/b] $1 \n\n[b]Endereço do fórum:[/b] $2 \n\n[b]Data de criação do fórum:[/b] $3\n\n[b]O fórum já foi avaliado anteriormente? Se já, quando?[/b] $4\n\n[b]Comentários adicionais:[/b] $5";
    $(document).ready(function(){
      $('#bt-apagar').click(function() {
          $('#form-submit input[type="text"],#form-submit textarea').val('');
          $('input[name="f"]').val($(this).val());
      });
      $('#bt-pr-questao').click(function() {
          tpl = html_tpl;
          tpl = tpl.replace("$1", $('#tituloforum').val());
          tpl = tpl.replace("$2", $('#endereco').val());
          tpl = tpl.replace("$3", $('#idade').val());
          tpl = tpl.replace("$4", $('#avaliacao').val());
          tpl = tpl.replace("$5", $('#comentario').val());
          $('html, body').animate({
            scrollTop: $("#pr-questao").offset().top
          }, 800);
          $('#pr-questao').slideDown(300);
          $('#html-questao').html(tpl);
      });
      $('#bt-enviar').click(function() {
          tpl = bbcode_tpl;
          if($('#tituloforum').val()!=='' && $('#endereco').val()!=='' && $('#avaliacao').val()!=='' && $('#idade').val()!=='' && $('#comentario').val()!==''){
            tpl = tpl.replace("$1", $('#tituloforum').val());
            tpl = tpl.replace("$2", $('#endereco').val());
            tpl = tpl.replace("$3", $('#idade').val());
            tpl = tpl.replace("$4", $('#avaliacao').val());
            tpl = tpl.replace("$5", $('#comentario').val());
            $('input[name="message"]').val(tpl);
            $('input[name="subject"]').val($('#tituloforum').val());
            $('#bt-enviar-e').click();
            $('#form-submit').slideUp(300);
            $('#enviado').slideDown(800);
          }else{
            $('#erro').slideUp(1);
            $('#erro').slideDown(800);
          }
      });
      $('#bt-pr-fechar').click(function() {
          $('html, body').animate({
            scrollTop: $("#pr-questao").offset().top
          }, 800);
          $('#pr-questao').slideUp(300);
          return false;
      });
      $('#tituloforum').click(function() {
          if($('#tituloforum').val()=='Coloque aqui um título descritivo sobre a sua questão'){
            $('#tituloforum').val('');
          }
      });
      jQuery('#tituloforum').keyup(function(){
          var t=document.getElementById('tituloforum').value.length;
          var i=document.getElementById('identifytitle');
          if(t<10&&t>0){
            var l=t-10;i.innerHTML='O nome do fórum necessita mais '+l*-1+' caracteres'
          }
          else{
            i.innerHTML=''
          }
      });
      var e='#endereco';
      var v='#validardominio'
      jQuery(e).after(' <div id=validardominio style=display:inline></div>')
      jQuery(e).keyup(function(){
          var u=jQuery(e).val();
          m=/^(https?:\/\/)?(www\.)?([a-zA-Z0-9_\-]+)+\.([a-zA-Z]{2,4})(?:\.([a-zA-Z]{2,4}))?\/?(.*)$/;
          if(u.match(m)){jQuery(v).html('')}else{jQuery(v).html('Esse domínio não é válido')};
      });
      if(VarGET('f')!==''){
          $('#form-part2, #bts').slideDown(800);
          $('input[name="f"]').val(VarGET('f'));
          $('#bt-selecciona-forum').val(VarGET('f'));
      }
    });
 
 
    </script>
<style>
.geralzao .panel .inner fieldset.submit-buttons input#pre.button2, .geralzao .panel .inner fieldset.submit-buttons input[name="post"]{padding:5px 5px 5px 5px;}
.panel_CP h1.page-title {
    color: #548710!important;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 2em;
    font-weight: 400;
    margin: .8em 0 .2em;
  text-align:center;
}
.panel_CP fieldset dl:hover dt label {
    color: #000;
}
.panel_CP dt label {
    font-weight: 700;
    text-align: left;
}
.panel_CP  .h3 {
    -moz-border-radius: 6px!important;
    -webkit-border-radius: 6px!important;
    border: 1px solid #548710!important;
    border-radius: 6px!important;
    padding: 3px!important;
    text-align: center!important;
}

.panel_CP .inner .h3, h3 {
    border-bottom: 1px solid #;
    color: #;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 1.05em;
    margin-bottom: 3px;
    margin-top: 20px;
    padding-bottom: 2px;
    text-transform: uppercase;
  font-weight: 700;
    text-align: left;
}
.panel_CP .panel {
    margin-bottom: 15px;
}
.panel_CP .panel {
    background-color: #fff;
    color: #242424;
    margin-bottom: 4px;
    padding: 0 10px;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
}
.panel_CP .introduction, .panel {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #fcfcfc;
    border: 2px solid #eaeaea;
    border-radius: 5px;
}
.panel_CP .logo {
    background:none;
    height:auto;
    margin-top: 0px;
}
.panel_CP .panel.row2 .inner fieldset.submit-buttons input  {
 color: #242424!important;
}
.panel_CP .panel.row2 .inner fieldset.submit-buttons input:hover {
    background-color: #999999;
    color: #fff!important;
}
#content-container div#right {
float: right;
overflow: hidden;
width: 0px;
display:none;
}
#content-container div#content {
margin-right: 0px;
}
.submit-buttons {
    border: none;
    text-align: center;
}
</style>
     
<form action="/post" method="post" id="form-submit">
<div class="panel_CP">
    <div id="erro" style="display:none;" class="panel">
                <div class="inner">
                        <span class="corners-top"></span>
                        <center><span class="conteudo_texto" style="color:#C00"><b>Você deve preencher todos os campos</b></span></center>
                        <span class="corners-bottom"></span>
                </div>
        </div>
<br>
    <div style="display:none;" id="pr-questao" class="post row2">
                <div class="inner">
                        <span class="corners-top"></span>
                                <div class="postbody">
                                        <div class="h3">Pré-visualizar [<a id="bt-pr-fechar" href="#">Fechar o modo de pré-visualização</a>]</div>
                                        <div id="html-questao" class="content"></div>
                                </div>
                        <span class="corners-bottom"></span>
                </div>
        </div>
<hr style="display:none;" id="pr-questao">
<br>
        <div class="panel">
                <div class="inner">
                        <span class="corners-top"></span> 
                                <div class="h3" style="margin-top: 7px;">Sobre o formulário</div>
                                  <p>O presente formulário foi criado com o objetivo de promover uma maior organização dos pedidos feitos na seção de análises. Assim que tudo estiver feito, poderá enviar o pedido, que será postado automaticamente. Se necessitar de alguma modificação, poderá fazer editando a sua mensagem.</p>
                </div>
                        <span class="corners-bottom"></span>
        </div>
<br>
    <div class="panel" id="form-part2">
                <div class="inner">
                        <span class="corners-top"></span>
                                <div class="h3" style="margin-top: 7px;">Formulário de análise</div> 
                                <br> 
                                        <fieldset class="fields1">
                                        <dl><dt><label>Nome do fórum:</label></dt>
                                                <dd><input type="text" id="tituloforum" class="inputbox" style="clear: both; width: 510px;">
                                                <div id=identifytitle style=display:inline></div>
                                                </dd></dl>
                                        <dl><dt><label>Endereço do fórum:</label></dt>
                                                <dd><input type="text" id="endereco" class="inputbox" style="clear: both; width: 510px;">
                                                </dd></dl>
                                        <dl><dt><label>Foi avaliado anteriormente? Se sim, quando?</label></dt>
                                                <dd><input type="text" id="avaliacao" class="inputbox" style="clear: both; width:510px;line-height: 18px;">
                                                </dd></dl>
                                        <dl><dt><label>Comentários adicionais:</label></dt>
                                                <dd><textarea id="comentario" class="inputbox" tabindex="14" style="clear: both; height: 100px; width:510px;"></textarea>
                                                </dd></dl> 
                                        </fieldset>
                        <input type="hidden" name="subject">
                        <input type="hidden" name="message">
                        <input type="hidden" name="mode" value="newtopic">
                        <input type="hidden" name="f" value="50">
                        <input type="hidden" name="lt" value="0">   
                        <span class="corners-bottom"></span>
                </div>
        </div>
<br>
    <div id="bts" style="" class="panel">
                <div class="inner">
                        <span class="corners-top"></span>
                        <fieldset class="submit-buttons">
                                <input id="bt-pr-questao" value="Pré-visualizar" type="button" class="button1">
                                <input id="bt-enviar" value="Enviar questão" type="button" class="button1" name="post">
                                <input id="bt-apagar" value="Apagar tudo" type="button" class="button1">
                                <input id="bt-enviar-e" value="Enviar Questão" type="submit" class="button1" style="display:none;" name="post">
                        </fieldset>
                        <span class="corners-bottom"></span>
                </div>
        </div>
</div>
</form>

Peço-lhe que para o outro formulário crie um novo tópico.

Atenciosamente,
Fraise.
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4979
Pontos Ativos : 6634

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Ajustar aspeto de formulários

Mensagem por IsmaelS. em 24/08/16, 05:03 pm

Ficou óptimo amigo obrigado, deixo aqui a dúvida que pediu para criar: http://ajuda.forumeiros.com/t106408-ajustar-aspeto-de-formulario-para-punbb#743493

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2770
Pontos Ativos : 3865

http://master-publicitario.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulários

Mensagem por Fraise em 24/08/16, 05:57 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

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4979
Pontos Ativos : 6634

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

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