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
Login

Esqueci minha senha

Últimos assuntos
» Pinta ícone
Hoje à(s) 4:48 por Smoke.xX

» Remover ver mensagens
Hoje à(s) 3:10 por while

» Borda no rank de adms
Hoje à(s) 3:07 por while

» Novo tópico sem Refresh
Hoje à(s) 1:59 por iScroll

» Ajuda com Botão Curtir
Hoje à(s) 1:54 por TZero

» Alterar espaçamento entre tópicos e alterar posições dos respectivos titulos
Hoje à(s) 0:41 por Kyou

» Personalizar a barra de menu
Ontem à(s) 23:06 por Cepheus

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
fiapinho
 
while
 
Kyou
 
Smoke.xX
 
w204
 
Holkis
 
TZero
 
iScroll
 

Quem está conectado
178 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 177 Visitantes :: 1 Motor de busca

TZero

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Ajustar aspeto de formulário para PunBB

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

Resolvido Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Qua 24 Ago 2016 - 21:02

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 | http://ajuda.forumeiros.com/t106310-ajustar-aspeto-de-formularios

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

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por Fraise em Qua 24 Ago 2016 - 21:48

Boas!

Cá está:
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; }
 
 
 .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>
 
 
 
 
<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_CP">
 <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></div>
 

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

Atenciosamente,
Fraise.

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4973
Pontos Ativos : 7229

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

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Qua 24 Ago 2016 - 22:00

O aspeto ficou óptimo, mas agora estou a ter um problema no formulário eu preencho os campos todos e se fizer pré-visualizar fica assim sem nada:


Se fizer Enviar aparece assim também:


Ou seja parece que não está a gerar o formulário :s

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Qui 25 Ago 2016 - 22:00

UP!

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Sex 26 Ago 2016 - 22:01

UP!

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Sab 27 Ago 2016 - 22:01

UP - Urgente! Ajuda/Confuso

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por Shek Crowley em Dom 28 Ago 2016 - 2:11

Olá!

O formulário que está nos fornecendo em sua primeira mensagem já está com problemas de script, sendo assim, contacte o desenvolvedor do mesmo para sanar este problema. Lembre-se, fornecemos apoio para usuários que usam o Gerador de formulários do FdF.

Agradecemos a sua compreensão.



Shek Crowley
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 15571
Pontos Ativos : 22982

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

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Dom 28 Ago 2016 - 4:20

Consegui um a funcionar porém o aspeto está meio bugado vejam:


Código:
- http://pastebin.com/yqTPnp2V
- http://suportedesign.forumeiros.com/h7-formulario-de-criacoes-graficas

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por while em Dom 28 Ago 2016 - 16:53

Isto é porque você copiou todo o código fonte...

troque o html por este:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="pt" xml:lang="pt"  ><head><title>Pedido gráfico</title><noscript><style>html{display:none;}</style><meta http-equiv="refresh" content="0; url=http://www.bestskins.net/faq" /></noscript><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta http-equiv="content-script-type" content="text/javascript" /><meta http-equiv="content-style-type" content="text/css" /><link rel="shortcut icon" type="image/x-icon" href="http://cdn5.iconfinder.com/data/icons/fatcow/32x32/skins.png" /><meta name="title" content="Pedido gráfico" /><link rel="stylesheet" href="/155-ltr.css" type="text/css" /><link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="Best Skins Forums" /><link rel="search" type="application/opensearchdescription+xml" href="http://www.directorioforuns.com/search/improvedsearch.xml" title="Pesquisar fóruns" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script src="http://illiweb.com/rs3/34/frm/lang/pt.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[
jQuery().ready(function(){});//]]></script><script src="/99126.js" type="text/javascript"></script>
<script type="text/javascript" src="https://static.criteo.net/js/ld/publishertag.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/34/frm/mentions/tooltipster.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/34/frm/mentions/init.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/34/frm/jquery/cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/34/frm/jquery/toolbar/FAToolbar.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/34/frm/json/json2.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/34/frm/jquery/printf/printf.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/34/frm/jquery/dotdotdot/jquery.dotdotdot-1.5.6.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/34/frm/jquery/notif/FA.js"></script>
          <style>
.previsu {
 background: url('http://sd-1.archive-host.com/membres/images/142586199450897653/LFD/vide.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://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#addimage .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
.image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
.image .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
.image .previsualise { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) 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 == '') ? dimensaoA + ' x ' + dimensaoL + ' 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 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="main"><div class="main-head">
 <div class="page-title">Sobre o formulário</div>
</div>
 <div class="main-content">
 <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. Lembre-se somente que antes de fazer um pedido, é recomendado ver as Regras da seção de criações gráficas!.
 </p>
 </div><div class="main-head">
 <div class="page-title">Informações gerais</div>
</div><div class="main-content">
<form action="/posting.forum" method="post" enctype="multipart/form-data" id="fa_form" onSubmit="fa_cookie();">
 <fieldset class="fields1">
 
<dl><dt>
 <label>Tipo de pedido :</label></dt>
 <dd><select id="tipo" tabindex="1" onChange="gerartitulo();">
 <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="[Menu] ">Menu de navegação</option>
 <option value="[Ranks] ">Ranks</option>
 <option value="[Outros] ">Outros</option>
 <option value="[Imagem] ">Imagem em geral</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>
 </div>
 <div class="clear" style="height: 6px;"></div>
 <div class="main-head">
  <div class="page-title">Informações específicas</div>
 </div><div class="main-content">
<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>Endreço do seu fórum :</label></dt>

 <dd>Lembre-se que se se não possuir um endereço válido, seu pedido será recusado!<br />
 <input class="inputbox" type="text" id="urlforum" tabindex="8" onChange="gerarpedido();" style="width: 300px; clear: both;" />
 </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" id="fundo" name="couleur_fond" maxlength="7" />
 </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" id="fontecor" name="couleur_fond" maxlength="7" />
 </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="3" />
 <input type="hidden" name="lt" value="0" />
 

</div>

 <div class="main-content">
 <fieldset class="submit-buttons"><input value="Enviar seu pedido gráfico" type="submit" class="button1" name="post" /></fieldset>
</div>
</form>
</div>
<script>gerartitulo();</script></div></div></div></div></div></body></html>

Até mais.

while
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2829
Pontos Ativos : 4237

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Dom 28 Ago 2016 - 17:36

Ainda continua meio bugado amigo veja:
- http://suportedesign.forumeiros.com/h7-

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Seg 29 Ago 2016 - 19:29

UP! Ajuda/Confuso Ajuda/Confuso

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Ter 30 Ago 2016 - 21:02

UP urgente! Ajuda/Confuso Ajuda/Confuso

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Qua 31 Ago 2016 - 21:13

UP novamente.... Ajuda/Confuso

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por while em Qui 1 Set 2016 - 1:23

Desculpe .
Troque o código por este:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="pt" xml:lang="pt"  ><head><title>Pedido gráfico</title>
          <style>
.previsu {
 background: url('http://sd-1.archive-host.com/membres/images/142586199450897653/LFD/vide.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://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#addimage .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
.image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
.image .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
.image .previsualise { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) 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 == '') ? dimensaoA + ' x ' + dimensaoL + ' 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 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="main"><div class="main-head">
 <div class="page-title">Sobre o formulário</div>
</div>
 <div class="main-content">
 <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. Lembre-se somente que antes de fazer um pedido, é recomendado ver as Regras da seção de criações gráficas!.
 </p>
 </div><div class="main-head">
 <div class="page-title">Informações gerais</div>
</div><div class="main-content">
<form action="/posting.forum" method="post" enctype="multipart/form-data" id="fa_form" onSubmit="fa_cookie();">
 <fieldset class="fields1">
 
<dl><dt>
 <label>Tipo de pedido :</label></dt>
 <dd><select id="tipo" tabindex="1" onChange="gerartitulo();">
 <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="[Menu] ">Menu de navegação</option>
 <option value="[Ranks] ">Ranks</option>
 <option value="[Outros] ">Outros</option>
 <option value="[Imagem] ">Imagem em geral</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>
 </div>
 <div class="clear" style="height: 6px;"></div>
 <div class="main-head">
  <div class="page-title">Informações específicas</div>
 </div><div class="main-content">
<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>Endreço do seu fórum :</label></dt>

 <dd>Lembre-se que se se não possuir um endereço válido, seu pedido será recusado!<br />
 <input class="inputbox" type="text" id="urlforum" tabindex="8" onChange="gerarpedido();" style="width: 300px; clear: both;" />
 </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" id="fundo" name="couleur_fond" maxlength="7" />
 </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" id="fontecor" name="couleur_fond" maxlength="7" />
 </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="3" />
 <input type="hidden" name="lt" value="0" />
 

</div>

 <div class="main-content">
 <fieldset class="submit-buttons"><input value="Enviar seu pedido gráfico" type="submit" class="button1" name="post" /></fieldset>
</div>
</form>
</div>
<script>gerartitulo();</script></div></div></div></div></div></body></html>

Resulta?
Até mais.

while
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2829
Pontos Ativos : 4237

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Qui 1 Set 2016 - 1:33

O topo ficou direito agora ainda aparece os widgets e o formulário nem dá para clicar nele:
- http://suportedesign.forumeiros.com/h7-formulario-de-criacoes-graficas

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por while em Qui 1 Set 2016 - 1:48

Troque por este:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="pt" xml:lang="pt"  ><head><title>Pedido gráfico</title>
          <style>
.previsu {
 background: url('http://sd-1.archive-host.com/membres/images/142586199450897653/LFD/vide.png');
 border: 1px solid #1675BC;
 display: none;
 position: absolute;
 top: 350px;
 margin: auto;
 margin-left: 150px !important;
}
.module.main  {
float: right;
overflow: hidden;
width: 0px!important;
display:none!important;
}
#content-container div#content {
margin-right: 0px;
}
div.main {width:100%;}
.pun {background:none;-webkit-box-shadow: none;}
 .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://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#addimage .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
.image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
.image .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
.image .previsualise { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) 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 == '') ? dimensaoA + ' x ' + dimensaoL + ' 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 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="main"><div class="main-head">
 <div class="page-title">Sobre o formulário</div>
</div>
 <div class="main-content">
 <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. Lembre-se somente que antes de fazer um pedido, é recomendado ver as Regras da seção de criações gráficas!.
 </p>
 </div><div class="main-head">
 <div class="page-title">Informações gerais</div>
</div><div class="main-content">
<form action="/posting.forum" method="post" enctype="multipart/form-data" id="fa_form" onSubmit="fa_cookie();">
 <fieldset class="fields1">
 
<dl><dt>
 <label>Tipo de pedido :</label></dt>
 <dd><select id="tipo" tabindex="1" onChange="gerartitulo();">
 <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="[Menu] ">Menu de navegação</option>
 <option value="[Ranks] ">Ranks</option>
 <option value="[Outros] ">Outros</option>
 <option value="[Imagem] ">Imagem em geral</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>
 </div>
 <div class="clear" style="height: 6px;"></div>
 <div class="main-head">
  <div class="page-title">Informações específicas</div>
 </div><div class="main-content">
<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>Endreço do seu fórum :</label></dt>

 <dd>Lembre-se que se se não possuir um endereço válido, seu pedido será recusado!<br />
 <input class="inputbox" type="text" id="urlforum" tabindex="8" onChange="gerarpedido();" style="width: 300px; clear: both;" />
 </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" id="fundo" name="couleur_fond" maxlength="7" />
 </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" id="fontecor" name="couleur_fond" maxlength="7" />
 </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="3" />
 <input type="hidden" name="lt" value="0" />
 

</div>

 <div class="main-content">
 <fieldset class="submit-buttons"><input value="Enviar seu pedido gráfico" type="submit" class="button1" name="post" /></fieldset>
</div>
</form>
</div>
<script>gerartitulo();</script></div></div></div></div></div></body></html>

Agora acho que está tudo ok né?
Até mais.

while
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2829
Pontos Ativos : 4237

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Qui 1 Set 2016 - 2:23

Agora sim ficou óptimo só uma coisa, é possível deixar atrás do formulário branco? Como a estrutura do fórum? Para não fica tudo em cinza atrás.

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/
  • 0

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por while em Qui 1 Set 2016 - 2:41

Tranquilo, desculpe a demora.

Troque por este:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="pt" xml:lang="pt"  ><head><title>Pedido gráfico</title>
          <style>
.previsu {
 background: url('http://sd-1.archive-host.com/membres/images/142586199450897653/LFD/vide.png');
 border: 1px solid #1675BC;
 display: none;
 position: absolute;
 top: 350px;
 margin: auto;
 margin-left: 150px !important;
}
.module.main  {
float: right;
overflow: hidden;
width: 0px!important;
display:none!important;
}
#content-container div#content {
margin-right: 0px;
}
div.main {width:100%;}
div#container {background:#fff!important;height:100%;padding-left:30px;padding-right:30px;margin-top:-18px;margin-left:-30px;}
.pun {background:none;-webkit-box-shadow: none;}
 .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://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#addimage .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
.image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
.image .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
.image .previsualise { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) 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 == '') ? dimensaoA + ' x ' + dimensaoL + ' 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 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="main"><div class="main-head">
 <div class="page-title">Sobre o formulário</div>
</div>
 <div class="main-content">
 <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. Lembre-se somente que antes de fazer um pedido, é recomendado ver as Regras da seção de criações gráficas!.
 </p>
 </div><div class="main-head">
 <div class="page-title">Informações gerais</div>
</div><div class="main-content">
<form action="/posting.forum" method="post" enctype="multipart/form-data" id="fa_form" onSubmit="fa_cookie();">
 <fieldset class="fields1">
 
<dl><dt>
 <label>Tipo de pedido :</label></dt>
 <dd><select id="tipo" tabindex="1" onChange="gerartitulo();">
 <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="[Menu] ">Menu de navegação</option>
 <option value="[Ranks] ">Ranks</option>
 <option value="[Outros] ">Outros</option>
 <option value="[Imagem] ">Imagem em geral</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>
 </div>
 <div class="clear" style="height: 6px;"></div>
 <div class="main-head">
  <div class="page-title">Informações específicas</div>
 </div><div class="main-content">
<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>Endreço do seu fórum :</label></dt>

 <dd>Lembre-se que se se não possuir um endereço válido, seu pedido será recusado!<br />
 <input class="inputbox" type="text" id="urlforum" tabindex="8" onChange="gerarpedido();" style="width: 300px; clear: both;" />
 </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" id="fundo" name="couleur_fond" maxlength="7" />
 </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" id="fontecor" name="couleur_fond" maxlength="7" />
 </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="3" />
 <input type="hidden" name="lt" value="0" />
 

</div>

 <div class="main-content">
 <fieldset class="submit-buttons"><input value="Enviar seu pedido gráfico" type="submit" class="button1" name="post" /></fieldset>
</div>
</form>
</div>
<script>gerartitulo();</script></div></div></div></div></div></body></html>

Até mais.

while
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2829
Pontos Ativos : 4237

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por IsmaelS. em Qui 1 Set 2016 - 3:18

Demorou mas ficou pronto obrigado! Muito feliz

IsmaelS.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2609
Pontos Ativos : 5167

http://suportedesign.forumeiros.com/

Resolvido Re: Ajustar aspeto de formulário para PunBB

Mensagem por while em Qui 1 Set 2016 - 3:34

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".

while
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2829
Pontos Ativos : 4237

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum