Mescla de códigos

• Descrição:

Ola...

Vamos ver se alguém pode me ajudar...

Não tenho conhecimentos técnicos com os códigos, o que faço é sempre na tentativa e erro, tem dado certo...

Peguei o código desta página e editei ao meu gosto, fiz várias mudanças:

https://ajuda.forumeiros.com/h2-

O código esta funcionando perfeitamente:

Código:

<script>jQuery(document).ready(function(){jQuery('#imagemtutorial img').click(function(){jQuery('#imagemtutorial img').removeClass('imgselected');jQuery(this).addClass('imgselected');m=jQuery(this).attr('src');jQuery('#imgtutorialform').val(m)});

jQuery('#imgtutorialform').keyup(function(){imgcampo=jQuery(this).val();if(jQuery('#imagemtutorial img[src="'+imgcampo+'"]').length){jQuery('#imagemtutorial img[src="'+imgcampo+'"]').click()}else{jQuery('#imagemtutorial img').removeClass('imgselected')}});

jQuery('#titulo').keyup(function(){if(jQuery(this).val().toLowerCase().indexOf('[tutorial]')!=-1){jQuery('#tipo').val('Artigos')}else if(jQuery(this).val().toLowerCase().indexOf('[faq]')!=-1){jQuery('#tipo').val('Perguntas e respostas frequentes')}});

jQuery('#adpasso').click(function(){var clicktitulo="if(this.value=='Título')this.value=''";var blurtitulo="if(this.value=='')this.value='Título'";var clickdescricao="if(this.value=='Descrição')this.value=''";var blurdescricao="if(this.value=='')this.value='Descrição'";var n=new Number(jQuery('#numdepassos').val())+1;jQuery('#adpasso').closest('dl').before('<dl id="passo"><dt><label>'+n+'º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="'+clicktitulo+'" onblur="'+blurtitulo+'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="'+clickdescricao+'" onblur="'+blurdescricao+'">Descrição</textarea></dd></dl>');jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())+1)});

jQuery('#adpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery(this).closest('dl').replaceWith('<dl id="pergunta"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl><dl><dd><input type="button" value="Adicionar pergunta" id="adicionarpergunta" class="button2"><input type="button" value="Remover pergunta" id="repergunta" class="button2"></dd></dl>');

jQuery('#adicionarpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery('#adicionarpergunta').closest('dl').before('<dl id="pergunta" style="border-top:1px solid white;padding-top:7px"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl>')});

jQuery('#repergunta').click(function(){jQuery(this).closest('fieldset').find('dl#pergunta').eq(-1).remove();});});

jQuery('#repasso').click(function(){if(jQuery('#numdepassos').val()>1){jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())-1);jQuery(this).closest('fieldset').find('dl#passo').eq(-1).remove()};});

jQuery('#gerarcodigotutorial').click(function(){jQuery('#divresultadopainel').slideDown();passos='';jQuery('#adpasso').closest('fieldset').find('#passo').each(function(n){titulo=jQuery(this).find('#titulopasso').val();descricao=jQuery(this).find('#descricaopasso').val();numero=n+1;passos+='[b][size=18]'+numero+'º[/size] - [color=darkblue]'+titulo+'[/color][/b]\n'+descricao+'\n\n\n'});

var aviso='';
if(jQuery('#aviso').length){var aviso='
[table][tr][td]<strong>Aviso!</strong>\n\n[img]http://2img.net/i/fa/fdf/voix.png[/img][/td]
[td]'+jQuery('#aviso').val()+'[/td]
[/tr]
[/table]
'};

var ref='';
if(jQuery('#ref').length){var ref='<strong>Referências Bibliográficas!</strong>\n\n
[table][tr][td][img]http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png[/img][/td]
[td]'+jQuery('#ref').val()+'[/td]
[/tr]
[/table]
'};

var perguntas='';jQuery('#adicionarpergunta').closest('fieldset').find('#pergunta').each(function(){pergunta=jQuery(this).find('#titulopergunta').val();resposta=jQuery(this).find('#tituloresposta').val();perguntas+='
[ul]
[li][b][color=indigo]'+pergunta+'?[/color][/b]\n'+resposta+'[/li]
[/ul]
\n\n'});if(perguntas!=''){perguntas=perguntas+'\n'};


 a='
[center][img]'+jQuery('#imgtutorialform').val()+'[/img]\n\n\n\n
[table][tr][td][size=26][color=#003399][font=Comic Sans MS]'+jQuery('#titulo').val()+'[/font][/color][/size][/td]
[/tr]
[/table]
[/center]
\n
[justify]'+jQuery('#descricao').val()+'[/justify]
\n\n
[justify]'+aviso+'[/justify]
\n\n\n
[center][color=green][size=16]<strong>[img]http://www.iconesbr.net/iconesbr/2009/07/8436/8436_32x32.png[/img] '+jQuery('#tipo').val()+' [img]http://www.iconesbr.net/iconesbr/2009/07/8454/8454_32x32.png[/img][/size][/color]\n[size=16][color=red]'+jQuery('#titulo').val()+'[/color][/size]</strong>[/center]
\n\n
[justify]'+passos+'[/justify]
[justify]'+ref+'[/justify]
\n\n\n\n\n
[justify]'+perguntas+'[/justify]
\n
[center]<strong>Dúvidas com este Artigo?</strong>[/center]
\n
[table][tr][td][img]http://i66.servimg.com/u/f66/15/86/37/09/index_10.png[/img] [/td]
[td] Se tiver alguma dúvida relacionada com este Artigo, crie um tópico com o seguinte título:\n\n[b][Dúvida] '+jQuery('#titulo').val()+'[/b][/td]
[/tr]
[/table]
';

jQuery('#resultadopainel').val(a)});


});


   </script>

<style>.imgselected{background-color: white;
-webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
}#imagemtutorial img{cursor:pointer}</style>
<div id="mudarforum"><form action="/post" method="post" enctype="multipart/form-data">
<div id="none" class="panel">
   <div class="inner">
           <span class="corners-top"><span></span></span>
       <div class="h3" style="margin-top: 7px;">FORMULÁRIO DE ESTRUTURA DO TUTORIAL</div>
         

   <fieldset class="fields1">

   <dl><dt>
    <label>Imagem:</label><br><b style="
   color: gray;
">Clique sobre uma imagem para selecioná-la</b></dt>
    <dd><input id="imgtutorialform" class="inputbox" style="clear: both; width: 510px;" value="http://i66.servimg.com/u/f66/15/86/37/09/alerte10.png"><div id="imagemtutorial" style="
   width: 100%;  
   height: auto;    
   overflow-x: auto;
display:inline-block;    
"><div style="
   float: left;  
   margin-right: -30000px;  
padding-left: 10px;
padding-right: 10px;
"><img src="http://i66.servimg.com/u/f66/15/86/37/09/alerte10.png" alt="" class="imgselected" style="display:inline;"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/censur10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/chatbo10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/config10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/ecrire10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/galeri10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/gestio10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/gestio11.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/groupe10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/html10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/images10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_11.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_12.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/jeux10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/logo10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/new_ic10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/newsle10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/permis10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/portai10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/rang10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/reglem10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/ssss10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/statis10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/domain.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/pub.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/stockage.png" alt="" class="" style="display:inline"><img src="http://i66.servimg.com/u/f66/15/86/37/09/suppor10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/footer_nocopyrights.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/servic10.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/miniba10.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/botone10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/marteau.png" alt="" class="" style="display:inline"><img src="http://i76.servimg.com/u/f76/11/66/91/15/sug1013.png" alt="" class="" style="display:inline"><img src="http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/warning_arrow.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/alerte1.png" alt="" class="" style="display:inline"><img src="http://www.illiweb.com/bl/index_users.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/templates.png" alt="" class="" style="display:inline"><img src="http://i40.servimg.com/u/f40/12/30/19/49/jeux10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/voix.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/questions.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/forumactif_smartphone.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/warning.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/stop.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/1.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/2.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/3.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/4.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_bad.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_middle.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_good.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/warning.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/error.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/confirm.gif" alt="" class="" style="display:inline"><img src="http://www.criarumblog.com/rsc/img/logo_blog.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/avatars.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug310.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug110.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug210.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug10.png" alt="" class="" style="display:inline"><img src="http://i22.servimg.com/u/f22/09/02/12/09/tumbli10.png" alt="" class="" style="display:inline"><img src="http://i22.servimg.com/u/f22/09/02/12/09/cardga10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf3/icones_fdf/private4.png" alt="" class="" style="display:inline"><img src="http://i32.servimg.com/u/f32/11/22/70/40/review10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/annonce.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/medaille.gif" alt="" class="" style="display:inline"><img src="http://i42.servimg.com/u/f42/11/32/95/02/autres10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/ecrire2.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/ecrire3.png" alt="" class="" style="display:inline"></div></div>
   </dd></dl>

<dl><dt>
    <label>Título:</label></dt>
    <dd><input id="titulo" class="inputbox" style="clear: both; width: 510px;">
   </dd></dl>

<dl><dt>
    <label>Descrição:</label></dt>
    <dd><textarea id="descricao" class="inputbox" style="clear: both; height: 100px; width:510px;"></textarea>
   </dd></dl>

<br><strong>Adicionar aviso importante!</strong><br><br>
<dl><dd><input type="button"  value="Adicionar aviso" class="button2" onclick="if(jQuery(this).val()=='Adicionar aviso'){jQuery(this).closest('dl').before('<dl id=avisotexto><dt><label><img src=http://2img.net/i/fa/fdf/voix.png></label></dt><dd><textarea id=aviso class=inputbox style=clear:both;height:67px;width:510px;margin-top:0px;margin-bottom:0px></textarea></dd></dl>');jQuery(this).val('Remover aviso')}else if(jQuery(this).val()=='Remover aviso'){jQuery('#avisotexto').remove();jQuery(this).val('Adicionar aviso')};return false"></dd></dl>

<br><strong>Medidas a serem tomadas!</strong><br><br>
<input type=hidden id="numdepassos" value="1">
<dl id="passo"><dt><label>1º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="if(this.value=='Título')this.value=''" onblur="if(this.value=='')this.value='Título'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="if(this.value=='Descrição')this.value=''" onblur="if(this.value=='')this.value='Descrição'">Descrição</textarea></dd></dl>

<dl>
    <dd><input type="button" value="Adicionar passo" id="adpasso" class="button2"><input type="button" value="Remover passo" id="repasso" class="button2">
   </dd></dl>
   
<br><strong>Adicionar Referências!</strong><br><br>
<dl><dd><input type="button"  value="Adicionar referências" class="button2" onclick="if(jQuery(this).val()=='Adicionar referências'){jQuery(this).closest('dl').before('<dl id=avisoref><dt><label><img src=http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png></label></dt><dd><textarea id=ref class=inputbox style=clear:both;height:67px;width:510px;margin-top:0px;margin-bottom:0px></textarea></dd></dl>');jQuery(this).val('Remover referências')}else if(jQuery(this).val()=='Remover referências'){jQuery('#avisoref').remove();jQuery(this).val('Adicionar referências')};return false"></dd></dl>

<br><br><strong>Perguntas e Respostas!</strong><br><br><dl>
    <dd><input type="button" value="Adicionar pergunta/resposta" id="adpergunta" class="button2">
   </dd></dl>
   
   </fieldset>
   
   
   <br>
   
   
<br><div id="divresultadopainel" style="display:none;padding:5px;background-color:white;border:1px solid #EEE;width:99%;cursor:normal"><a id="copy-description-fade" style="display: none; ">Conteúdo copiado</a><textarea id="resultadopainel" style="font-size: 15px; margin-left: 0px; margin-right: 0px; width: 99%; margin-top: 0px; margin-bottom: 0px; height: 136px; "></textarea></div><br><div style="
   text-align: center;
"><input type="button" value="Gerar código do tutorial" id="gerarcodigotutorial" class="button2"><input  id="tipo" value="Artigos" style="display:none"></div><br>

   </div></div></script>

Não contente em ter que copiar o código gerado para depois inserir no tópico, fiz uma mescla com um formulário de postagem que tenho, ficou assim:

Código:

<!--Inicio Js Tuto--->

<script>jQuery(document).ready(function(){jQuery('#imagemtutorial img').click(function(){jQuery('#imagemtutorial img').removeClass('imgselected');jQuery(this).addClass('imgselected');m=jQuery(this).attr('src');jQuery('#imgtutorialform').val(m)});

jQuery('#imgtutorialform').keyup(function(){imgcampo=jQuery(this).val();if(jQuery('#imagemtutorial img[src="'+imgcampo+'"]').length){jQuery('#imagemtutorial img[src="'+imgcampo+'"]').click()}else{jQuery('#imagemtutorial img').removeClass('imgselected')}});

jQuery('#titulo').keyup(function(){if(jQuery(this).val().toLowerCase().indexOf('[tutorial]')!=-1){jQuery('#tipo').val('Artigos')}else if(jQuery(this).val().toLowerCase().indexOf('[faq]')!=-1){jQuery('#tipo').val('Perguntas e respostas frequentes')}});

jQuery('#adpasso').click(function(){var clicktitulo="if(this.value=='Título')this.value=''";var blurtitulo="if(this.value=='')this.value='Título'";var clickdescricao="if(this.value=='Descrição')this.value=''";var blurdescricao="if(this.value=='')this.value='Descrição'";var n=new Number(jQuery('#numdepassos').val())+1;jQuery('#adpasso').closest('dl').before('<dl id="passo"><dt><label>'+n+'º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="'+clicktitulo+'" onblur="'+blurtitulo+'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="'+clickdescricao+'" onblur="'+blurdescricao+'">Descrição</textarea></dd></dl>');jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())+1)});

jQuery('#adpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery(this).closest('dl').replaceWith('<dl id="pergunta"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl><dl><dd><input type="button" value="Adicionar pergunta" id="adicionarpergunta" class="button2"><input type="button" value="Remover pergunta" id="repergunta" class="button2"></dd></dl>');

jQuery('#adicionarpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery('#adicionarpergunta').closest('dl').before('<dl id="pergunta" style="border-top:1px solid white;padding-top:7px"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl>')});

jQuery('#repergunta').click(function(){jQuery(this).closest('fieldset').find('dl#pergunta').eq(-1).remove();});});

jQuery('#repasso').click(function(){if(jQuery('#numdepassos').val()>1){jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())-1);jQuery(this).closest('fieldset').find('dl#passo').eq(-1).remove()};});

jQuery('#gerarcodigotutorial').click(function(){jQuery('#divresultadopainel').slideDown();passos='';jQuery('#adpasso').closest('fieldset').find('#passo').each(function(n){titulo=jQuery(this).find('#titulopasso').val();descricao=jQuery(this).find('#descricaopasso').val();numero=n+1;passos+='[b][size=18]'+numero+'º[/size] - [color=darkblue]'+titulo+'[/color][/b]\n\n'+descricao+'\n\n'});

var aviso='';
if(jQuery('#aviso').length){var aviso='<strong>Aviso importante!</strong>\n\n
[table][tr][td][img]http://2img.net/i/fa/fdf/voix.png[/img][/td]
[td]'+jQuery('#aviso').val()+'[/td]
[/tr]
[/table]
'};

var ref='';
if(jQuery('#ref').length){var ref='<strong>Referências Bibliográficas!</strong>\n\n
[table][tr][td][img]http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png[/img][/td]
[td]'+jQuery('#ref').val()+'[/td]
[/tr]
[/table]
'};

var perguntas='';jQuery('#adicionarpergunta').closest('fieldset').find('#pergunta').each(function(){pergunta=jQuery(this).find('#titulopergunta').val();resposta=jQuery(this).find('#tituloresposta').val();perguntas+='
[ul]
[li][b][color=indigo]'+pergunta+'?[/color][/b]\n'+resposta+'[/li]
[/ul]
\n\n'});if(perguntas!=''){perguntas=perguntas+'\n'};


 a='
[center][img]'+jQuery('#imgtutorialform').val()+'[/img]\n\n
[table][tr][td][size=26][color=#003399][font=Comic Sans MS]'+jQuery('#titulo').val()+'[/font][/color][/size][/td]
[/tr]
[/table]
[/center]
\n
[justify]'+jQuery('#descricao').val()+'[/justify]
\n\n
[justify]'+aviso+'[/justify]
\n\n
[center][color=green][size=16]<strong>[img]http://www.iconesbr.net/iconesbr/2009/07/8436/8436_32x32.png[/img] '+jQuery('#tipo').val()+' [img]http://www.iconesbr.net/iconesbr/2009/07/8454/8454_32x32.png[/img][/size][/color]\n[size=16][color=red]'+jQuery('#titulo').val()+'[/color][/size]</strong>[/center]
\n\n
[justify]'+passos+'[/justify]
[justify]'+ref+'[/justify]
\n\n
[justify]'+perguntas+'[/justify]
\n
[center]<strong>Dúvidas com este Artigo?</strong>[/center]
[table][tr][td][img]http://s28.postimg.org/6h4utgk09/index_10.png[/img] [/td]
[td] Se tiver alguma dúvida relacionada com este Artigo, crie um tópico com o seguinte título:\n\n[b][Dúvida] '+jQuery('#titulo').val()+'[/b][/td]
[/tr]
[/table]
';

jQuery('#resultadopainel').val(a)});


});


   </script>
 
 <!--Fim Js Tuto--->

<!--Inicio Form--->
<script>
   function gerarf() {
 jQuery('input[name="message"]').val('&nbsp;'+jQuery('#resultadopainel').val()+'');
   
   jQuery('input[name="subject"]').val(' '+jQuery('#2').val()+'  '+jQuery('#titulo').val()+' ');

   jQuery('input[name="f"]').val('96');
   }
   </script> <style>#2.find, #2 {
   position: relative !important;
   top: -5px !important;
   margin-left: 35px !important;
   }
   .fields1 {
   padding: 15px;
   padding-top: 5px;
   background-color: white;
   border: 1x solid #1675BC;
   }
   input, select {
   position: relative;
   margin-left: 55px !important;
   width: 250px;
   }
   </style>
<form method="post" action="/post" name="post" enctype="multipart/form-data">

<h1 class="page-title">
Formulário para elaboração de Tutoriais.
</h1>
<br />
<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 facilitar a vida da Equipe AquaPeixes. Escreva o que é pedido na seção do Tutorial, assim que tudo estiver feito, poderá enviar o tópico, que será postado automaticamente. Caso queira pré-visualizar o Artigo, basta clicar no botão correspondente 'Pré-visualizar'.  
</p><span class="corners-bottom"><span></span></span>
</div>

</div><br />
<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<div class="h3" style="margin-top: 7px;">
Atenção!
</div>

<p style="font-size: 12px;">
É 'OBRIGATÓRIO' escrever um título condizente com o artigo, para que o membro possa criar um novo tópico com a dúvida, caso precise. Primeiramente clique em 'Gerar código Tutorial', e depois em 'Enviar' ou 'Pré-visualizar'.
</p><span class="corners-bottom"><span></span></span>
</div>

</div><br />
<div class="fields1">

<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span>
<h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
Sobre o Título
</h3>
<br /> <dl class="campos_form"><dt><span class="1"><label>Prefixo Título:</label></span></dt><br /><dd><span class="2" style="floar: right"><select class="find " id="2"><option value="[Artigo]">Artigo</option></select></span></dd></dl> <br />
<dl><dt>
    <label>Título:</label></dt>
    <dd><input id="titulo" class="inputbox" style="clear: both; width: 510px;">
   </dd></dl>
</div><br /> <p>

</p>
</div>

</div>

<!--Fim Form--->


<!--Inicio Tuto--->
<style>.imgselected{background-color: white;
-webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
}#imagemtutorial img{cursor:pointer}</style>
<div id="mudarforum"><form action="/post" method="post" enctype="multipart/form-data">
<div id="none" class="panel">
   <div class="inner">
           <span class="corners-top"><span></span></span>
       <div class="h3" style="margin-top: 7px;">FORMULÁRIO DE ESTRUTURA DO TUTORIAL</div>
         

   <fieldset class="fields1">

   <dl><dt>
    <label>Imagem:</label><br><b style="
   color: gray;
">Clique sobre uma imagem para selecioná-la</b></dt>
    <dd><input id="imgtutorialform" class="inputbox" style="clear: both; width: 510px;" value="http://i66.servimg.com/u/f66/15/86/37/09/alerte10.png"><div id="imagemtutorial" style="
   width: 100%;  
   height: auto;    
   overflow-x: auto;
display:inline-block;    
"><div style="
   float: left;  
   margin-right: -30000px;  
padding-left: 10px;
padding-right: 10px;
"><img src="http://i66.servimg.com/u/f66/15/86/37/09/alerte10.png" alt="" class="imgselected" style="display:inline;"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/censur10.png" alt="" class="" style="display:inline"> <img src="http://s28.postimg.org/6h4utgk09/index_10.png" alt="" class="" style="display:inline">  <img src="http://cantigasdeumbanda.com.br/interrogacaoazul01.png?v=2zpylsij6l57qw" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/chatbo10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/config10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/ecrire10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/galeri10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/gestio10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/gestio11.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/groupe10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/html10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/images10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_11.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_12.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/jeux10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/logo10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/new_ic10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/newsle10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/permis10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/portai10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/rang10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/reglem10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/ssss10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/statis10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/domain.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/pub.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/stockage.png" alt="" class="" style="display:inline"><img src="http://i66.servimg.com/u/f66/15/86/37/09/suppor10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/footer_nocopyrights.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/servic10.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/miniba10.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/botone10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/marteau.png" alt="" class="" style="display:inline"><img src="http://i76.servimg.com/u/f76/11/66/91/15/sug1013.png" alt="" class="" style="display:inline"><img src="http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/warning_arrow.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/alerte1.png" alt="" class="" style="display:inline"><img src="http://www.illiweb.com/bl/index_users.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/templates.png" alt="" class="" style="display:inline"><img src="http://i40.servimg.com/u/f40/12/30/19/49/jeux10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/voix.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/questions.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/forumactif_smartphone.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/warning.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/stop.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/1.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/2.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/3.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/4.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_bad.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_middle.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_good.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/warning.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/error.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/confirm.gif" alt="" class="" style="display:inline"><img src="http://www.criarumblog.com/rsc/img/logo_blog.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/avatars.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug310.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug110.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug210.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug10.png" alt="" class="" style="display:inline"><img src="http://i22.servimg.com/u/f22/09/02/12/09/tumbli10.png" alt="" class="" style="display:inline"><img src="http://i22.servimg.com/u/f22/09/02/12/09/cardga10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf3/icones_fdf/private4.png" alt="" class="" style="display:inline"><img src="http://i32.servimg.com/u/f32/11/22/70/40/review10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/annonce.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/medaille.gif" alt="" class="" style="display:inline"><img src="http://i42.servimg.com/u/f42/11/32/95/02/autres10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/ecrire2.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/ecrire3.png" alt="" class="" style="display:inline"></div></div>
   </dd></dl>

<dl><dt>
    <label>Descrição:</label></dt>
    <dd><textarea id="descricao" class="inputbox" style="clear: both; height: 100px; width:510px;"></textarea>
   </dd></dl>

<br><strong>Adicionar aviso importante!</strong><br><br>
<dl><dd><input type="button"  value="Adicionar aviso" class="button2" onclick="if(jQuery(this).val()=='Adicionar aviso'){jQuery(this).closest('dl').before('<dl id=avisotexto><dt><label><img src=http://2img.net/i/fa/fdf/voix.png></label></dt><dd><textarea id=aviso class=inputbox style=clear:both;height:67px;width:510px;margin-top:0px;margin-bottom:0px></textarea></dd></dl>');jQuery(this).val('Remover aviso')}else if(jQuery(this).val()=='Remover aviso'){jQuery('#avisotexto').remove();jQuery(this).val('Adicionar aviso')};return false"></dd></dl>

<br><strong>Medidas a serem tomadas!</strong><br><br>
<input type=hidden id="numdepassos" value="1">
<dl id="passo"><dt><label>1º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="if(this.value=='Título')this.value=''" onblur="if(this.value=='')this.value='Título'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="if(this.value=='Descrição')this.value=''" onblur="if(this.value=='')this.value='Descrição'">Descrição</textarea></dd></dl>

<dl>
    <dd><input type="button" value="Adicionar passo" id="adpasso" class="button2"><input type="button" value="Remover passo" id="repasso" class="button2">
   </dd></dl>
   
<br><strong>Adicionar Referências!</strong><br><br>
<dl><dd><input type="button"  value="Adicionar referências" class="button2" onclick="if(jQuery(this).val()=='Adicionar referências'){jQuery(this).closest('dl').before('<dl id=avisoref><dt><label><img src=http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png></label></dt><dd><textarea id=ref class=inputbox style=clear:both;height:67px;width:510px;margin-top:0px;margin-bottom:0px></textarea></dd></dl>');jQuery(this).val('Remover referências')}else if(jQuery(this).val()=='Remover referências'){jQuery('#avisoref').remove();jQuery(this).val('Adicionar referências')};return false"></dd></dl>

<br><br><strong>Perguntas e Respostas!</strong><br><br><dl>
    <dd><input type="button" value="Adicionar pergunta/resposta" id="adpergunta" class="button2">
   </dd></dl>
   
   </fieldset>
   
   <br>    
   
<br><div id="divresultadopainel" style="display:none;padding:5px;background-color:white;border:1px solid #EEE;width:99%;cursor:normal"><a id="copy-description-fade" style="display: none; ">Conteúdo copiado</a><textarea id="resultadopainel" style="font-size: 15px; margin-left: 0px; margin-right: 0px; width: 99%; margin-top: 0px; margin-bottom: 0px; height: 36px; "></textarea></div><br><div style="
   text-align: center;
"><input type="button" value="Gerar código do tutorial" id="gerarcodigotutorial" class="button2"><input  id="tipo" value="Artigos" style="display:none"></div><br>

   </div></div>

<!--Fim Tuto--->


<!--Inicio Form botões enviar e pré--->

<span class="corners-bottom"><span></span></span>

<div class="fields1">

<div class="panel row2">

<div class="inner">
<span class="corners-top"><span></span></span> <input name="post" onclick="gerarf();" onclick="gerarcodigotutorial();" value="Enviar" type="submit" /><input name="preview" onclick="gerarf();" onclick="gerarcodigotutorial();" value="Pré-visualizar" type="submit" /><input name="message" value="Formulário" type="hidden" /><input name="subject" value="Formulário" type="hidden" /><input name="mode" value="newtopic" type="hidden" /><input name="f" value="1" type="hidden" /> <span class="corners-bottom"><span></span></span>
</div>

</div>

</div>

</div>

</div></fom>

<!--Fim Form botões enviar e pré--->

Funcionando perfeitamente também, basta descrever tudo, clicar no botão gerar código e depois enviar ou pre-visualizar...

Vejam:

http://aquapeixes.forumeiros.com/h7-formularios-artigos

O problema, é que, se reparerem na página, sumiu a cor de fundo dos widgets, etc...

Tentei arrumar, consegui que ficasse com a cor, mas as letras do formulário ficaram grandes de mais:

http://aquapeixes.forumeiros.com/h12-teste-artigos

Alguém pode dar uma força?

Cheguei no limite das minhas possibilidades...

• Informações:

Código:

#mudarforum {
  font-size: 10px;   
}

#mudarforum * {
  text-transform: none !important;
}

Código:

$(function() {
  $('#mudarforum [name="post"], #mudarforum [name="preview"]').on('click', function() {
    $('#gerarcodigotutorial').click();
  });
});

Código:

<!--Inicio Js Tuto--->

<script>jQuery(document).ready(function(){jQuery('#imagemtutorial img').click(function(){jQuery('#imagemtutorial img').removeClass('imgselected');jQuery(this).addClass('imgselected');m=jQuery(this).attr('src');jQuery('#imgtutorialform').val(m)});

jQuery('#imgtutorialform').keyup(function(){imgcampo=jQuery(this).val();if(jQuery('#imagemtutorial img[src="'+imgcampo+'"]').length){jQuery('#imagemtutorial img[src="'+imgcampo+'"]').click()}else{jQuery('#imagemtutorial img').removeClass('imgselected')}});

jQuery('#titulo').keyup(function(){if(jQuery(this).val().toLowerCase().indexOf('[tutorial]')!=-1){jQuery('#tipo').val('Artigos')}else if(jQuery(this).val().toLowerCase().indexOf('[faq]')!=-1){jQuery('#tipo').val('Perguntas e respostas frequentes')}});

jQuery('#adpasso').click(function(){var clicktitulo="if(this.value=='Título')this.value=''";var blurtitulo="if(this.value=='')this.value='Título'";var clickdescricao="if(this.value=='Descrição')this.value=''";var blurdescricao="if(this.value=='')this.value='Descrição'";var n=new Number(jQuery('#numdepassos').val())+1;jQuery('#adpasso').closest('dl').before('<dl id="passo"><dt><label>'+n+'º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="'+clicktitulo+'" onblur="'+blurtitulo+'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="'+clickdescricao+'" onblur="'+blurdescricao+'">Descrição</textarea></dd></dl>');jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())+1)});

jQuery('#adpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery(this).closest('dl').replaceWith('<dl id="pergunta"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl><dl><dd><input type="button" value="Adicionar pergunta" id="adicionarpergunta" class="button2"><input type="button" value="Remover pergunta" id="repergunta" class="button2"></dd></dl>');

jQuery('#adicionarpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery('#adicionarpergunta').closest('dl').before('<dl id="pergunta" style="border-top:1px solid white;padding-top:7px"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl>')});

jQuery('#repergunta').click(function(){jQuery(this).closest('fieldset').find('dl#pergunta').eq(-1).remove();});});

jQuery('#repasso').click(function(){if(jQuery('#numdepassos').val()>1){jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())-1);jQuery(this).closest('fieldset').find('dl#passo').eq(-1).remove()};});

jQuery('#gerarcodigotutorial').click(function(){jQuery('#divresultadopainel').slideDown();passos='';jQuery('#adpasso').closest('fieldset').find('#passo').each(function(n){titulo=jQuery(this).find('#titulopasso').val();descricao=jQuery(this).find('#descricaopasso').val();numero=n+1;passos+='[b][size=18]'+numero+'º[/size] - [color=darkblue]'+titulo+'[/color][/b]\n\n'+descricao+'\n\n'});

var aviso='';
if(jQuery('#aviso').length){var aviso='<strong>Aviso importante!</strong>\n\n[table][tr][td][img]http://2img.net/i/fa/fdf/voix.png[/img][/td][td]'+jQuery('#aviso').val()+'[/td][/tr][/table]'};

var ref='';
if(jQuery('#ref').length){var ref='<strong>Referências Bibliográficas!</strong>\n\n[table][tr][td][img]http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png[/img][/td][td]'+jQuery('#ref').val()+'[/td][/tr][/table]'};

var perguntas='';jQuery('#adicionarpergunta').closest('fieldset').find('#pergunta').each(function(){pergunta=jQuery(this).find('#titulopergunta').val();resposta=jQuery(this).find('#tituloresposta').val();perguntas+='[list][*][b][color=indigo]'+pergunta+'?[/color][/b]\n'+resposta+'[/list]\n\n'});if(perguntas!=''){perguntas=perguntas+'\n'};


  a='[center][table style="margin:auto"][img]'+jQuery('#imgtutorialform').val()+'[/img]\n\n[td][size=26][color=#003399][font=Comic Sans MS]'+jQuery('#titulo').val()+'[/font][/color][/size][/td][/table][/center]\n[justify]'+jQuery('#descricao').val()+'[/justify]\n\n[justify]'+aviso+'[/justify]\n\n[center][color=green][size=16]<strong>[img]http://www.iconesbr.net/iconesbr/2009/07/8436/8436_32x32.png[/img] '+jQuery('#tipo').val()+' [img]http://www.iconesbr.net/iconesbr/2009/07/8454/8454_32x32.png[/img][/size][/color]\n[size=16][color=red]'+jQuery('#titulo').val()+'[/color][/size]</strong>[/center]\n\n[justify]'+passos+'[/justify][justify]'+ref+'[/justify]\n\n[justify]'+perguntas+'[/justify]\n[size=18][center] <strong>Dúvidas com este Artigo?</strong>[/center][/size][table][tr][td][img]http://s28.postimg.org/6h4utgk09/index_10.png[/img] [/td][td]  Se tiver alguma dúvida relacionada com este Artigo, crie um tópico com o seguinte título:\n\n[b][Dúvida] '+jQuery('#titulo').val()+'[/b][/td][/tr][/table]';

jQuery('#resultadopainel').val(a)});


});


    </script>
 
  <!--Fim Js Tuto--->

<!--Inicio Form--->
<script>
    function gerarf() {
  jQuery('input[name="message"]').val('&nbsp;'+jQuery('#resultadopainel').val()+'');
   
    jQuery('input[name="subject"]').val(' '+jQuery('#2').val()+'  '+jQuery('#titulo').val()+' ');

    jQuery('input[name="f"]').val('96');
    }
    </script> <style>#2.find, #2 {
    position: relative !important;
    top: -5px !important;
    margin-left: 35px !important;
    }
    .fields1 {
    padding: 15px;
    padding-top: 5px;
    background-color: white;
    border: 1x solid #1675BC;
    }
    input, select {
    position: relative;
    margin-left: 55px !important;
    width: 250px;
    }
    </style>
<form method="post" action="/post" name="post" enctype="multipart/form-data">
   
   <h1 class="page-title">
       Formulário para elaboração de Tutoriais.
   </h1>
    <br />
      <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></h3>
         
         <p style="font-size: 12px;">
             O presente formulário foi criado com o objetivo de facilitar a vida da Equipe AquaPeixes. Escreva o que é pedido na seção do Tutorial, assim que tudo estiver feito, poderá enviar o tópico, que será postado automaticamente. Caso queira pré-visualizar o Artigo, basta clicar no botão correspondente 'Pré-visualizar'. 
         </p><span class="corners-bottom"><span></span></span>
      </div>
      
   </div><br />
   <div class="panel row2">
      
      <div class="inner">
          <span class="corners-top"><span></span></span>
         <div class="h3" style="margin-top: 7px;">
             Atenção!
         </div></h3>
         
         <p style="font-size: 12px;">
             É 'OBRIGATÓRIO' escrever um título condizente com o artigo, para que o membro possa criar um novo tópico com a dúvida, caso precise. Primeiramente clique em 'Gerar código Tutorial', e depois em 'Enviar' ou 'Pré-visualizar'.
         </p><span class="corners-bottom"><span></span></span>
      </div>
      
   </div><br />
   <div class="fields1">
      
      <div class="panel row2">
         
         <div class="inner">
             <span class="corners-top"><span></span></span>
            <h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
                Sobre o Título
            </h3>
             <br /> <dl class="campos_form"><dt><span class="1"><label>Prefixo Título:</label></span></dt><br /><dd><span class="2" style="floar: right"><select class="find " id="2"><option value="[Artigo]">Artigo</option></select></span></dd></dl> <br />
             <dl><dt>
    <label>Título:</label></dt>
    <dd><input id="titulo" class="inputbox" style="clear: both; width: 510px;">
    </dd></dl>
             </div><br />         <p>
            
         </p>
      </div>
      
   </div>   

<!--Fim Form--->   
         
         
<!--Inicio Tuto--->
         <style>.imgselected{background-color: white;
-webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
}#imagemtutorial img{cursor:pointer}</style>
<div id="mudarforum"><form action="/post" method="post" enctype="multipart/form-data">
<div id="none" class="panel">
    <div class="inner">
            <span class="corners-top"><span></span></span>
        <div class="h3" style="margin-top: 7px;">
      FORMULÁRIO DE ESTRUTURA DO TUTORIAL      
      

    <fieldset class="fields1">

    <dl><dt>
    <label>Imagem:</label><br><b style="
    color: gray;
">Clique sobre uma imagem para selecioná-la</b></dt>
    <dd><input id="imgtutorialform" class="inputbox" style="clear: both; width: 510px;" value="http://i66.servimg.com/u/f66/15/86/37/09/alerte10.png"><div id="imagemtutorial" style="
    width: 100%; 
    height: auto;   
    overflow-x: auto;
display:inline-block;   
"><div style="
    float: left; 
    margin-right: -30000px; 
padding-left: 10px;
padding-right: 10px;
"><img src="http://i66.servimg.com/u/f66/15/86/37/09/alerte10.png" alt="" class="imgselected" style="display:inline;"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/censur10.png" alt="" class="" style="display:inline"> <img src="http://s28.postimg.org/6h4utgk09/index_10.png" alt="" class="" style="display:inline">  <img src="http://cantigasdeumbanda.com.br/interrogacaoazul01.png?v=2zpylsij6l57qw" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/chatbo10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/config10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/ecrire10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/galeri10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/gestio10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/gestio11.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/groupe10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/html10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/images10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_11.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_12.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/jeux10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/logo10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/new_ic10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/newsle10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/permis10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/portai10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/rang10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/reglem10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/ssss10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/statis10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/domain.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/pub.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/stockage.png" alt="" class="" style="display:inline"><img src="http://i66.servimg.com/u/f66/15/86/37/09/suppor10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/footer_nocopyrights.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/servic10.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/miniba10.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/botone10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/marteau.png" alt="" class="" style="display:inline"><img src="http://i76.servimg.com/u/f76/11/66/91/15/sug1013.png" alt="" class="" style="display:inline"><img src="http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/warning_arrow.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/alerte1.png" alt="" class="" style="display:inline"><img src="http://www.illiweb.com/bl/index_users.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/templates.png" alt="" class="" style="display:inline"><img src="http://i40.servimg.com/u/f40/12/30/19/49/jeux10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/voix.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/questions.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/forumactif_smartphone.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/warning.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/stop.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/1.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/2.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/3.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/4.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_bad.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_middle.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_good.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/warning.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/error.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/confirm.gif" alt="" class="" style="display:inline"><img src="http://www.criarumblog.com/rsc/img/logo_blog.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/avatars.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug310.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug110.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug210.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug10.png" alt="" class="" style="display:inline"><img src="http://i22.servimg.com/u/f22/09/02/12/09/tumbli10.png" alt="" class="" style="display:inline"><img src="http://i22.servimg.com/u/f22/09/02/12/09/cardga10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf3/icones_fdf/private4.png" alt="" class="" style="display:inline"><img src="http://i32.servimg.com/u/f32/11/22/70/40/review10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/annonce.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/medaille.gif" alt="" class="" style="display:inline"><img src="http://i42.servimg.com/u/f42/11/32/95/02/autres10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/ecrire2.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/ecrire3.png" alt="" class="" style="display:inline"></div></div>
    </dd></dl>

<dl><dt>
    <label>Descrição:</label></dt>
    <dd><textarea id="descricao" class="inputbox" style="clear: both; height: 100px; width:510px;"></textarea>
    </dd></dl>
   
<br><strong>Adicionar aviso importante!</strong><br><br>
<dl><dd><input type="button"  value="Adicionar aviso" class="button2" onclick="if(jQuery(this).val()=='Adicionar aviso'){jQuery(this).closest('dl').before('<dl id=avisotexto><dt><label><img src=http://2img.net/i/fa/fdf/voix.png></label></dt><dd><textarea id=aviso class=inputbox style=clear:both;height:67px;width:510px;margin-top:0px;margin-bottom:0px></textarea></dd></dl>');jQuery(this).val('Remover aviso')}else if(jQuery(this).val()=='Remover aviso'){jQuery('#avisotexto').remove();jQuery(this).val('Adicionar aviso')};return false"></dd></dl>

<br><strong>Medidas a serem tomadas!</strong><br><br>
<input type=hidden id="numdepassos" value="1">
<dl id="passo"><dt><label>1º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="if(this.value=='Título')this.value=''" onblur="if(this.value=='')this.value='Título'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="if(this.value=='Descrição')this.value=''" onblur="if(this.value=='')this.value='Descrição'">Descrição</textarea></dd></dl>

<dl>
    <dd><input type="button" value="Adicionar passo" id="adpasso" class="button2"><input type="button" value="Remover passo" id="repasso" class="button2">
    </dd></dl>
   
<br><strong>Adicionar Referências!</strong><br><br>
<dl><dd><input type="button"  value="Adicionar referências" class="button2" onclick="if(jQuery(this).val()=='Adicionar referências'){jQuery(this).closest('dl').before('<dl id=avisoref><dt><label><img src=http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png></label></dt><dd><textarea id=ref class=inputbox style=clear:both;height:67px;width:510px;margin-top:0px;margin-bottom:0px></textarea></dd></dl>');jQuery(this).val('Remover referências')}else if(jQuery(this).val()=='Remover referências'){jQuery('#avisoref').remove();jQuery(this).val('Adicionar referências')};return false"></dd></dl>

    <br><br><strong>Perguntas e Respostas!</strong><br><br><dl>
    <dd><input type="button" value="Adicionar pergunta/resposta" id="adpergunta" class="button2">
    </dd></dl>
   
    </fieldset>
   
    <br>   
   
<br><div id="divresultadopainel" style="display:none;padding:5px;background-color:white;border:1px solid #EEE;width:99%;cursor:normal"><a id="copy-description-fade" style="display: none; ">Conteúdo copiado</a><textarea id="resultadopainel" style="font-size: 15px; margin-left: 0px; margin-right: 0px; width: 99%; margin-top: 0px; margin-bottom: 0px; height: 36px; "></textarea></div><br><div style="
    text-align: center;
"><input type="button" value="Gerar código do tutorial" id="gerarcodigotutorial" class="button2"><input  id="tipo" value="Artigos" style="display:none"></div><br>

    </div></div>
   
   <!--Fim Tuto--->


<!--Inicio Form botões enviar e pré--->

<span class="corners-bottom"><span></span></span>
         
         <div class="fields1">
            
            <div class="panel row2">
               
               <div class="inner">
                   <span class="corners-top"><span></span></span> <input name="post" onclick="gerarf();" onclick="gerarcodigotutorial();" value="Enviar" type="submit" /><input name="preview" onclick="gerarf();" onclick="gerarcodigotutorial();" value="Pré-visualizar" type="submit" /><input name="message" value="Formulário" type="hidden" /><input name="subject" value="Formulário" type="hidden" /><input name="mode" value="newtopic" type="hidden" /><input name="f" value="1" type="hidden" /> <span class="corners-bottom"><span></span></span>
               </div>
               
            </div>
            
         </div>
         
      </div>
      
</div></fom>

<!--Fim Form botões enviar e pré--->

Código:

<!--Inicio Js Tuto--->

<script>jQuery(document).ready(function(){jQuery('#imagemtutorial img').click(function(){jQuery('#imagemtutorial img').removeClass('imgselected');jQuery(this).addClass('imgselected');m=jQuery(this).attr('src');jQuery('#imgtutorialform').val(m)});

jQuery('#imgtutorialform').keyup(function(){imgcampo=jQuery(this).val();if(jQuery('#imagemtutorial img[src="'+imgcampo+'"]').length){jQuery('#imagemtutorial img[src="'+imgcampo+'"]').click()}else{jQuery('#imagemtutorial img').removeClass('imgselected')}});

jQuery('#titulo').keyup(function(){if(jQuery(this).val().toLowerCase().indexOf('[tutorial]')!=-1){jQuery('#tipo').val('Artigos')}else if(jQuery(this).val().toLowerCase().indexOf('[faq]')!=-1){jQuery('#tipo').val('Perguntas e respostas frequentes')}});

jQuery('#adpasso').click(function(){var clicktitulo="if(this.value=='Título')this.value=''";var blurtitulo="if(this.value=='')this.value='Título'";var clickdescricao="if(this.value=='Descrição')this.value=''";var blurdescricao="if(this.value=='')this.value='Descrição'";var n=new Number(jQuery('#numdepassos').val())+1;jQuery('#adpasso').closest('dl').before('<dl id="passo"><dt><label>'+n+'º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="'+clicktitulo+'" onblur="'+blurtitulo+'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="'+clickdescricao+'" onblur="'+blurdescricao+'">Descrição</textarea></dd></dl>');jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())+1)});

jQuery('#adpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery(this).closest('dl').replaceWith('<dl id="pergunta"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl><dl><dd><input type="button" value="Adicionar pergunta" id="adicionarpergunta" class="button2"><input type="button" value="Remover pergunta" id="repergunta" class="button2"></dd></dl>');

jQuery('#adicionarpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery('#adicionarpergunta').closest('dl').before('<dl id="pergunta" style="border-top:1px solid white;padding-top:7px"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl>')});

jQuery('#repergunta').click(function(){jQuery(this).closest('fieldset').find('dl#pergunta').eq(-1).remove();});});

jQuery('#repasso').click(function(){if(jQuery('#numdepassos').val()>1){jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())-1);jQuery(this).closest('fieldset').find('dl#passo').eq(-1).remove()};});

jQuery('#gerarcodigotutorial').click(function(){jQuery('#divresultadopainel').slideDown();passos='';jQuery('#adpasso').closest('fieldset').find('#passo').each(function(n){titulo=jQuery(this).find('#titulopasso').val();descricao=jQuery(this).find('#descricaopasso').val();numero=n+1;passos+='[b][size=18]'+numero+'º[/size] - [color=darkblue]'+titulo+'[/color][/b]\n\n'+descricao+'\n\n'});

var aviso='';
if(jQuery('#aviso').length){var aviso='<strong>Aviso importante!</strong>\n\n[table][tr][td][img]http://2img.net/i/fa/fdf/voix.png[/img][/td][td]'+jQuery('#aviso').val()+'[/td][/tr][/table]'};

var ref='';
if(jQuery('#ref').length){var ref='<strong>Referências Bibliográficas!</strong>\n\n[table][tr][td][img]http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png[/img][/td][td]'+jQuery('#ref').val()+'[/td][/tr][/table]'};

var perguntas='';jQuery('#adicionarpergunta').closest('fieldset').find('#pergunta').each(function(){pergunta=jQuery(this).find('#titulopergunta').val();resposta=jQuery(this).find('#tituloresposta').val();perguntas+='[list][*][b][color=indigo]'+pergunta+'?[/color][/b]\n'+resposta+'[/list]\n\n'});if(perguntas!=''){perguntas=perguntas+'\n'};


  a='[center][table style="margin:auto"][img]'+jQuery('#imgtutorialform').val()+'[/img]\n\n[td][size=26][color=#003399][font=Comic Sans MS]'+jQuery('#titulo').val()+'[/font][/color][/size][/td][/table][/center]\n[justify]'+jQuery('#descricao').val()+'[/justify]\n\n[justify]'+aviso+'[/justify]\n\n[center][color=green][size=16]<strong>[img]http://www.iconesbr.net/iconesbr/2009/07/8436/8436_32x32.png[/img] '+jQuery('#tipo').val()+' [img]http://www.iconesbr.net/iconesbr/2009/07/8454/8454_32x32.png[/img][/size][/color]\n[size=16][color=red]'+jQuery('#titulo').val()+'[/color][/size]</strong>[/center]\n\n[justify]'+passos+'[/justify][justify]'+ref+'[/justify]\n\n[justify]'+perguntas+'[/justify]\n[size=18][center] <strong>Dúvidas com este Artigo?</strong>[/center][/size][table][tr][td][img]http://s28.postimg.org/6h4utgk09/index_10.png[/img] [/td][td]  Se tiver alguma dúvida relacionada com este Artigo, crie um tópico com o seguinte título:\n\n[b][Dúvida] '+jQuery('#titulo').val()+'[/b][/td][/tr][/table]';

jQuery('#resultadopainel').val(a)});


});


    </script>
 
  <!--Fim Js Tuto--->

<!--Inicio Form--->
<script>
    function gerarf() {
  jQuery('#divresultadopainel').slideDown();passos='';jQuery('#adpasso').closest('fieldset').find('#passo').each(function(n){titulo=jQuery(this).find('#titulopasso').val();descricao=jQuery(this).find('#descricaopasso').val();numero=n+1;passos+='[b][size=18]'+numero+'º[/size] - [color=darkblue]'+titulo+'[/color][/b]\n\n'+descricao+'\n\n';
  jQuery('input[name="message"]').val('&nbsp;'+jQuery('#resultadopainel').val()+'');
   
    jQuery('input[name="subject"]').val(' '+jQuery('#2').val()+'  '+jQuery('#titulo').val()+' ');

    jQuery('input[name="f"]').val('96');
    }
    </script> <style>#2.find, #2 {
    position: relative !important;
    top: -5px !important;
    margin-left: 35px !important;
    }
    .fields1 {
    padding: 15px;
    padding-top: 5px;
    background-color: white;
    border: 1x solid #1675BC;
    }
    input, select {
    position: relative;
    margin-left: 55px !important;
    width: 250px;
    }
    </style>
<form method="post" action="/post" name="post" enctype="multipart/form-data">
   
  <h1 class="page-title">
      Formulário para elaboração de Tutoriais.
  </h1>
    <br />
      <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></h3>
         
        <p style="font-size: 12px;">
            O presente formulário foi criado com o objetivo de facilitar a vida da Equipe AquaPeixes. Escreva o que é pedido na seção do Tutorial, assim que tudo estiver feito, poderá enviar o tópico, que será postado automaticamente. Caso queira pré-visualizar o Artigo, basta clicar no botão correspondente 'Pré-visualizar'. 
        </p><span class="corners-bottom"><span></span></span>
      </div>
     
  </div><br />
  <div class="panel row2">
     
      <div class="inner">
          <span class="corners-top"><span></span></span>
        <div class="h3" style="margin-top: 7px;">
            Atenção!
        </div></h3>
         
        <p style="font-size: 12px;">
            É 'OBRIGATÓRIO' escrever um título condizente com o artigo, para que o membro possa criar um novo tópico com a dúvida, caso precise. Primeiramente clique em 'Gerar código Tutorial', e depois em 'Enviar' ou 'Pré-visualizar'.
        </p><span class="corners-bottom"><span></span></span>
      </div>
     
  </div><br />
  <div class="fields1">
     
      <div class="panel row2">
         
        <div class="inner">
            <span class="corners-top"><span></span></span>
            <h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
                Sobre o Título
            </h3>
            <br /> <dl class="campos_form"><dt><span class="1"><label>Prefixo Título:</label></span></dt><br /><dd><span class="2" style="floar: right"><select class="find " id="2"><option value="[Artigo]">Artigo</option></select></span></dd></dl> <br />
            <dl><dt>
    <label>Título:</label></dt>
    <dd><input id="titulo" class="inputbox" style="clear: both; width: 510px;">
    </dd></dl>
            </div><br />        <p>
           
        </p>
      </div>
     
  </div>   

<!--Fim Form--->   
       
       
<!--Inicio Tuto--->
        <style>.imgselected{background-color: white;
-webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
}#imagemtutorial img{cursor:pointer}</style><div id="mudarforum"><form action="/post" method="post" enctype="multipart/form-data"><div id="none" class="panel">
    <div class="inner">
            <span class="corners-top"><span></span></span>
        <div class="h3" style="margin-top: 7px;">
      FORMULÁRIO DE ESTRUTURA DO TUTORIAL     
     

    <fieldset class="fields1">

    <dl><dt>
    <label>Imagem:</label><br><b style="
    color: gray;
">Clique sobre uma imagem para selecioná-la</b></dt>
    <dd><input id="imgtutorialform" class="inputbox" style="clear: both; width: 510px;" value="http://i66.servimg.com/u/f66/15/86/37/09/alerte10.png"><div id="imagemtutorial" style="
    width: 100%; 
    height: auto;   
    overflow-x: auto;
display:inline-block;   
"><div style="
    float: left; 
    margin-right: -30000px; 
padding-left: 10px;
padding-right: 10px;
"><img src="http://i66.servimg.com/u/f66/15/86/37/09/alerte10.png" alt="" class="imgselected" style="display:inline;"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/censur10.png" alt="" class="" style="display:inline"> <img src="http://s28.postimg.org/6h4utgk09/index_10.png" alt="" class="" style="display:inline">  <img src="http://cantigasdeumbanda.com.br/interrogacaoazul01.png?v=2zpylsij6l57qw" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/chatbo10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/config10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/ecrire10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/galeri10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/gestio10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/gestio11.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/groupe10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/html10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/images10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_11.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_12.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/jeux10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/logo10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/new_ic10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/newsle10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/permis10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/portai10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/rang10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/reglem10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/ssss10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/statis10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/domain.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/pub.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/stockage.png" alt="" class="" style="display:inline"><img src="http://i66.servimg.com/u/f66/15/86/37/09/suppor10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/footer_nocopyrights.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/servic10.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/miniba10.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/botone10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/marteau.png" alt="" class="" style="display:inline"><img src="http://i76.servimg.com/u/f76/11/66/91/15/sug1013.png" alt="" class="" style="display:inline"><img src="http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/warning_arrow.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/alerte1.png" alt="" class="" style="display:inline"><img src="http://www.illiweb.com/bl/index_users.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/templates.png" alt="" class="" style="display:inline"><img src="http://i40.servimg.com/u/f40/12/30/19/49/jeux10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/voix.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/questions.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/forumactif_smartphone.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/warning.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/stop.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/1.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/2.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/3.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/4.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_bad.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_middle.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_good.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/warning.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/error.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/confirm.gif" alt="" class="" style="display:inline"><img src="http://www.criarumblog.com/rsc/img/logo_blog.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/avatars.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug310.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug110.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug210.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug10.png" alt="" class="" style="display:inline"><img src="http://i22.servimg.com/u/f22/09/02/12/09/tumbli10.png" alt="" class="" style="display:inline"><img src="http://i22.servimg.com/u/f22/09/02/12/09/cardga10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf3/icones_fdf/private4.png" alt="" class="" style="display:inline"><img src="http://i32.servimg.com/u/f32/11/22/70/40/review10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/annonce.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/medaille.gif" alt="" class="" style="display:inline"><img src="http://i42.servimg.com/u/f42/11/32/95/02/autres10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/ecrire2.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/ecrire3.png" alt="" class="" style="display:inline"></div></div>
    </dd></dl>

<dl><dt>
    <label>Descrição:</label></dt>
    <dd><textarea id="descricao" class="inputbox" style="clear: both; height: 100px; width:510px;"></textarea>
    </dd></dl>
 
<br><strong>Adicionar aviso importante!</strong><br><br>
<dl><dd><input type="button"  value="Adicionar aviso" class="button2" onclick="if(jQuery(this).val()=='Adicionar aviso'){jQuery(this).closest('dl').before('<dl id=avisotexto><dt><label><img src=http://2img.net/i/fa/fdf/voix.png></label></dt><dd><textarea id=aviso class=inputbox style=clear:both;height:67px;width:510px;margin-top:0px;margin-bottom:0px></textarea></dd></dl>');jQuery(this).val('Remover aviso')}else if(jQuery(this).val()=='Remover aviso'){jQuery('#avisotexto').remove();jQuery(this).val('Adicionar aviso')};return false"></dd></dl>

<br><strong>Medidas a serem tomadas!</strong><br><br>
<input type=hidden id="numdepassos" value="1">
<dl id="passo"><dt><label>1º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="if(this.value=='Título')this.value=''" onblur="if(this.value=='')this.value='Título'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="if(this.value=='Descrição')this.value=''" onblur="if(this.value=='')this.value='Descrição'">Descrição</textarea></dd></dl>

<dl>
    <dd><input type="button" value="Adicionar passo" id="adpasso" class="button2"><input type="button" value="Remover passo" id="repasso" class="button2">
    </dd></dl>
   
<br><strong>Adicionar Referências!</strong><br><br>
<dl><dd><input type="button"  value="Adicionar referências" class="button2" onclick="if(jQuery(this).val()=='Adicionar referências'){jQuery(this).closest('dl').before('<dl id=avisoref><dt><label><img src=http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png></label></dt><dd><textarea id=ref class=inputbox style=clear:both;height:67px;width:510px;margin-top:0px;margin-bottom:0px></textarea></dd></dl>');jQuery(this).val('Remover referências')}else if(jQuery(this).val()=='Remover referências'){jQuery('#avisoref').remove();jQuery(this).val('Adicionar referências')};return false"></dd></dl>

    <br><br><strong>Perguntas e Respostas!</strong><br><br><dl>
    <dd><input type="button" value="Adicionar pergunta/resposta" id="adpergunta" class="button2">
    </dd></dl>
   
    </fieldset>
   
    <br>   
   
<br><div id="divresultadopainel" style="display:none;padding:5px;background-color:white;border:1px solid #EEE;width:99%;cursor:normal"><a id="copy-description-fade" style="display: none; ">Conteúdo copiado</a><textarea id="resultadopainel" style="font-size: 15px; margin-left: 0px; margin-right: 0px; width: 99%; margin-top: 0px; margin-bottom: 0px; height: 36px; "></textarea></div><br><div style="
    text-align: center;
"><input type="button" value="Gerar código do tutorial" id="gerarcodigotutorial" class="button2"><input  id="tipo" value="Artigos" style="display:none"></div><br>

    </div></div>
 
  <!--Fim Tuto--->


<!--Inicio Form botões enviar e pré--->

<span class="corners-bottom"><span></span></span>
       
        <div class="fields1">
           
            <div class="panel row2">
               
              <div class="inner">
                  <span class="corners-top"><span></span></span> <input name="post" onclick="gerarf();" onclick="gerarcodigotutorial();" value="Enviar" type="submit" /><input name="preview" onclick="gerarf();" onclick="gerarcodigotutorial();" value="Pré-visualizar" type="submit" /><input name="message" value="Formulário" type="hidden" /><input name="subject" value="Formulário" type="hidden" /><input name="mode" value="newtopic" type="hidden" /><input name="f" value="1" type="hidden" /> <span class="corners-bottom"><span></span></span>
              </div>
               
            </div>
           
        </div>
         
      </div>
     
</div></fom>

<!--Fim Form botões enviar e pré--->

Código:

<!--Inicio Js Tuto--->

<script>jQuery(document).ready(function(){jQuery('#imagemtutorial img').click(function(){jQuery('#imagemtutorial img').removeClass('imgselected');jQuery(this).addClass('imgselected');m=jQuery(this).attr('src');jQuery('#imgtutorialform').val(m)});

jQuery('#imgtutorialform').keyup(function(){imgcampo=jQuery(this).val();if(jQuery('#imagemtutorial img[src="'+imgcampo+'"]').length){jQuery('#imagemtutorial img[src="'+imgcampo+'"]').click()}else{jQuery('#imagemtutorial img').removeClass('imgselected')}});

jQuery('#titulo').keyup(function(){if(jQuery(this).val().toLowerCase().indexOf('[tutorial]')!=-1){jQuery('#tipo').val('Artigos')}else if(jQuery(this).val().toLowerCase().indexOf('[faq]')!=-1){jQuery('#tipo').val('Perguntas e respostas frequentes')}});

jQuery('#adpasso').click(function(){var clicktitulo="if(this.value=='Título')this.value=''";var blurtitulo="if(this.value=='')this.value='Título'";var clickdescricao="if(this.value=='Descrição')this.value=''";var blurdescricao="if(this.value=='')this.value='Descrição'";var n=new Number(jQuery('#numdepassos').val())+1;jQuery('#adpasso').closest('dl').before('<dl id="passo"><dt><label>'+n+'º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="'+clicktitulo+'" onblur="'+blurtitulo+'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="'+clickdescricao+'" onblur="'+blurdescricao+'">Descrição</textarea></dd></dl>');jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())+1)});

jQuery('#adpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery(this).closest('dl').replaceWith('<dl id="pergunta"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl><dl><dd><input type="button" value="Adicionar pergunta" id="adicionarpergunta" class="button2"><input type="button" value="Remover pergunta" id="repergunta" class="button2"></dd></dl>');

jQuery('#adicionarpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery('#adicionarpergunta').closest('dl').before('<dl id="pergunta" style="border-top:1px solid white;padding-top:7px"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl>')});

jQuery('#repergunta').click(function(){jQuery(this).closest('fieldset').find('dl#pergunta').eq(-1).remove();});});

jQuery('#repasso').click(function(){if(jQuery('#numdepassos').val()>1){jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())-1);jQuery(this).closest('fieldset').find('dl#passo').eq(-1).remove()};});

jQuery('#gerarcodigotutorial').click(function(){jQuery('#divresultadopainel').slideDown();passos='';jQuery('#adpasso').closest('fieldset').find('#passo').each(function(n){titulo=jQuery(this).find('#titulopasso').val();descricao=jQuery(this).find('#descricaopasso').val();numero=n+1;passos+='[b][size=18]'+numero+'º[/size] - [color=darkblue]'+titulo+'[/color][/b]\n\n'+descricao+'\n\n'});

var aviso='';
if(jQuery('#aviso').length){var aviso='<strong>Aviso importante!</strong>\n\n[table][tr][td][img]http://2img.net/i/fa/fdf/voix.png[/img][/td][td]'+jQuery('#aviso').val()+'[/td][/tr][/table]'};

var ref='';
if(jQuery('#ref').length){var ref='<strong>Referências Bibliográficas!</strong>\n\n[table][tr][td][img]http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png[/img][/td][td]'+jQuery('#ref').val()+'[/td][/tr][/table]'};

var perguntas='';jQuery('#adicionarpergunta').closest('fieldset').find('#pergunta').each(function(){pergunta=jQuery(this).find('#titulopergunta').val();resposta=jQuery(this).find('#tituloresposta').val();perguntas+='[list][*][b][color=indigo]'+pergunta+'?[/color][/b]\n'+resposta+'[/list]\n\n'});if(perguntas!=''){perguntas=perguntas+'\n'};


  a='[center][table style="margin:auto"][img]'+jQuery('#imgtutorialform').val()+'[/img]\n\n[td][size=26][color=#003399][font=Comic Sans MS]'+jQuery('#titulo').val()+'[/font][/color][/size][/td][/table][/center]\n[justify]'+jQuery('#descricao').val()+'[/justify]\n\n[justify]'+aviso+'[/justify]\n\n[center][color=green][size=16]<strong>[img]http://www.iconesbr.net/iconesbr/2009/07/8436/8436_32x32.png[/img] '+jQuery('#tipo').val()+' [img]http://www.iconesbr.net/iconesbr/2009/07/8454/8454_32x32.png[/img][/size][/color]\n[size=16][color=red]'+jQuery('#titulo').val()+'[/color][/size]</strong>[/center]\n\n[justify]'+passos+'[/justify][justify]'+ref+'[/justify]\n\n[justify]'+perguntas+'[/justify]\n[size=18][center] <strong>Dúvidas com este Artigo?</strong>[/center][/size][table][tr][td][img]http://s28.postimg.org/6h4utgk09/index_10.png[/img] [/td][td]  Se tiver alguma dúvida relacionada com este Artigo, crie um tópico com o seguinte título:\n\n[b][Dúvida] '+jQuery('#titulo').val()+'[/b][/td][/tr][/table]';

jQuery('#resultadopainel').val(a)});


});


    </script>
 
  <!--Fim Js Tuto--->

<!--Inicio Form--->
<script>
    function gerarf() {

  jQuery('#divresultadopainel').slideDown();
        passos = '';
        jQuery('#adpasso').closest('fieldset').find('#passo').each(function (n) {
            titulo = jQuery(this).find('#titulopasso').val();
            descricao = jQuery(this).find('#descricaopasso').val();
            numero = n + 1;
            passos += '[b][size=18]' + numero + 'º[/size] - [color=darkblue]' + titulo + '[/color][/b]\n\n' + descricao + '\n\n'
        });

        var aviso = '';
        if (jQuery('#aviso').length) {
            var aviso = '<strong>Aviso importante!</strong>\n\n[table][tr][td][img]http://2img.net/i/fa/fdf/voix.png[/img][/td][td]' + jQuery('#aviso').val() + '[/td][/tr][/table]'
        };

        var ref = '';
        if (jQuery('#ref').length) {
            var ref = '<strong>Referências Bibliográficas!</strong>\n\n[table][tr][td][img]http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png[/img][/td][td]' + jQuery('#ref').val() + '[/td][/tr][/table]'
        };

        var perguntas = '';
        jQuery('#adicionarpergunta').closest('fieldset').find('#pergunta').each(function () {
            pergunta = jQuery(this).find('#titulopergunta').val();
            resposta = jQuery(this).find('#tituloresposta').val();
            perguntas += '[list][*][b][color=indigo]' + pergunta + '?[/color][/b]\n' + resposta + '[/list]\n\n'
        });
        if (perguntas != '') {
            perguntas = perguntas + '\n'
        };


        a = '[center][table style="margin:auto"][img]' + jQuery('#imgtutorialform').val() + '[/img]\n\n[td][size=26][color=#003399][font=Comic Sans MS]' + jQuery('#titulo').val() + '[/font][/color][/size][/td][/table][/center]\n[justify]' + jQuery('#descricao').val() + '[/justify]\n\n[justify]' + aviso + '[/justify]\n\n[center][color=green][size=16]<strong>[img]http://www.iconesbr.net/iconesbr/2009/07/8436/8436_32x32.png[/img] ' + jQuery('#tipo').val() + ' [img]http://www.iconesbr.net/iconesbr/2009/07/8454/8454_32x32.png[/img][/size][/color]\n[size=16][color=red]' + jQuery('#titulo').val() + '[/color][/size]</strong>[/center]\n\n[justify]' + passos + '[/justify][justify]' + ref + '[/justify]\n\n[justify]' + perguntas + '[/justify]\n[size=18][center] <strong>Dúvidas com este Artigo?</strong>[/center][/size][table][tr][td][img]http://s28.postimg.org/6h4utgk09/index_10.png[/img] [/td][td]  Se tiver alguma dúvida relacionada com este Artigo, crie um tópico com o seguinte título:\n\n[b][Dúvida] ' + jQuery('#titulo').val() + '[/b][/td][/tr][/table]';

 
  jQuery('input[name="message"]').val('&nbsp;'+a+'');
   
    jQuery('input[name="subject"]').val(' '+jQuery('#2').val()+'  '+jQuery('#titulo').val()+' ');

  jQuery('input[name="f"]').val('96');
    }
    </script> <style>#2.find, #2 {
    position: relative !important;
    top: -5px !important;
    margin-left: 35px !important;
    }
    .fields1 {
    padding: 15px;
    padding-top: 5px;
    background-color: white;
    border: 1x solid #1675BC;
    }
    input, select {
    position: relative;
    margin-left: 55px !important;
    width: 250px;
    }
    </style>
<form method="post" action="/post" name="post" enctype="multipart/form-data">
   
  <h1 class="page-title">
      Formulário para elaboração de Tutoriais.
  </h1>
    <br />
      <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></h3>
         
        <p style="font-size: 12px;">
            O presente formulário foi criado com o objetivo de facilitar a vida da Equipe AquaPeixes. Escreva o que é pedido na seção do Tutorial, assim que tudo estiver feito, poderá enviar o tópico, que será postado automaticamente. Caso queira pré-visualizar o Artigo, basta clicar no botão correspondente 'Pré-visualizar'. 
        </p><span class="corners-bottom"><span></span></span>
      </div>
     
  </div><br />
  <div class="panel row2">
     
      <div class="inner">
          <span class="corners-top"><span></span></span>
        <div class="h3" style="margin-top: 7px;">
            Atenção!
        </div></h3>
         
        <p style="font-size: 12px;">
            É 'OBRIGATÓRIO' escrever um título condizente com o artigo, para que o membro possa criar um novo tópico com a dúvida, caso precise. Primeiramente clique em 'Gerar código Tutorial', e depois em 'Enviar' ou 'Pré-visualizar'.
        </p><span class="corners-bottom"><span></span></span>
      </div>
     
  </div><br />
  <div class="fields1">
     
      <div class="panel row2">
         
        <div class="inner">
            <span class="corners-top"><span></span></span>
            <h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
                Sobre o Título
            </h3>
            <br /> <dl class="campos_form"><dt><span class="1"><label>Prefixo Título:</label></span></dt><br /><dd><span class="2" style="floar: right"><select class="find " id="2"><option value="[Artigo]">Artigo</option></select></span></dd></dl> <br />
            <dl><dt>
    <label>Título:</label></dt>
    <dd><input id="titulo" class="inputbox" style="clear: both; width: 510px;">
    </dd></dl>
            </div><br />        <p>
           
        </p>
      </div>
     
  </div>   

<!--Fim Form--->   
       
       
<!--Inicio Tuto--->
        <style>.imgselected{background-color: white;
-webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
}#imagemtutorial img{cursor:pointer}</style><div id="mudarforum"><form action="/post" method="post" enctype="multipart/form-data"><div id="none" class="panel">
    <div class="inner">
            <span class="corners-top"><span></span></span>
        <div class="h3" style="margin-top: 7px;">
      FORMULÁRIO DE ESTRUTURA DO TUTORIAL     
     

    <fieldset class="fields1">

    <dl><dt>
    <label>Imagem:</label><br><b style="
    color: gray;
">Clique sobre uma imagem para selecioná-la</b></dt>
    <dd><input id="imgtutorialform" class="inputbox" style="clear: both; width: 510px;" value="http://i66.servimg.com/u/f66/15/86/37/09/alerte10.png"><div id="imagemtutorial" style="
    width: 100%; 
    height: auto;   
    overflow-x: auto;
display:inline-block;   
"><div style="
    float: left; 
    margin-right: -30000px; 
padding-left: 10px;
padding-right: 10px;
"><img src="http://i66.servimg.com/u/f66/15/86/37/09/alerte10.png" alt="" class="imgselected" style="display:inline;"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/censur10.png" alt="" class="" style="display:inline"> <img src="http://s28.postimg.org/6h4utgk09/index_10.png" alt="" class="" style="display:inline">  <img src="http://cantigasdeumbanda.com.br/interrogacaoazul01.png?v=2zpylsij6l57qw" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/chatbo10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/config10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/ecrire10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/galeri10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/gestio10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/gestio11.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/groupe10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/html10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/images10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_11.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_12.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/jeux10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/logo10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/new_ic10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/newsle10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/permis10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/portai10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/rang10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/reglem10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/ssss10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/statis10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/domain.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/pub.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/stockage.png" alt="" class="" style="display:inline"><img src="http://i66.servimg.com/u/f66/15/86/37/09/suppor10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/footer_nocopyrights.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/servic10.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/miniba10.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/botone10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/marteau.png" alt="" class="" style="display:inline"><img src="http://i76.servimg.com/u/f76/11/66/91/15/sug1013.png" alt="" class="" style="display:inline"><img src="http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/warning_arrow.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/alerte1.png" alt="" class="" style="display:inline"><img src="http://www.illiweb.com/bl/index_users.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/templates.png" alt="" class="" style="display:inline"><img src="http://i40.servimg.com/u/f40/12/30/19/49/jeux10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/voix.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/questions.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/forumactif_smartphone.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/warning.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/stop.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/1.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/2.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/3.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/4.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_bad.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_middle.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_good.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/warning.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/error.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/confirm.gif" alt="" class="" style="display:inline"><img src="http://www.criarumblog.com/rsc/img/logo_blog.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/avatars.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug310.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug110.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug210.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug10.png" alt="" class="" style="display:inline"><img src="http://i22.servimg.com/u/f22/09/02/12/09/tumbli10.png" alt="" class="" style="display:inline"><img src="http://i22.servimg.com/u/f22/09/02/12/09/cardga10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf3/icones_fdf/private4.png" alt="" class="" style="display:inline"><img src="http://i32.servimg.com/u/f32/11/22/70/40/review10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/annonce.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/medaille.gif" alt="" class="" style="display:inline"><img src="http://i42.servimg.com/u/f42/11/32/95/02/autres10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/ecrire2.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/ecrire3.png" alt="" class="" style="display:inline"></div></div>
    </dd></dl>

<dl><dt>
    <label>Descrição:</label></dt>
    <dd><textarea id="descricao" class="inputbox" style="clear: both; height: 100px; width:510px;"></textarea>
    </dd></dl>
 
<br><strong>Adicionar aviso importante!</strong><br><br>
<dl><dd><input type="button"  value="Adicionar aviso" class="button2" onclick="if(jQuery(this).val()=='Adicionar aviso'){jQuery(this).closest('dl').before('<dl id=avisotexto><dt><label><img src=http://2img.net/i/fa/fdf/voix.png></label></dt><dd><textarea id=aviso class=inputbox style=clear:both;height:67px;width:510px;margin-top:0px;margin-bottom:0px></textarea></dd></dl>');jQuery(this).val('Remover aviso')}else if(jQuery(this).val()=='Remover aviso'){jQuery('#avisotexto').remove();jQuery(this).val('Adicionar aviso')};return false"></dd></dl>

<br><strong>Medidas a serem tomadas!</strong><br><br>
<input type=hidden id="numdepassos" value="1">
<dl id="passo"><dt><label>1º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="if(this.value=='Título')this.value=''" onblur="if(this.value=='')this.value='Título'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="if(this.value=='Descrição')this.value=''" onblur="if(this.value=='')this.value='Descrição'">Descrição</textarea></dd></dl>

<dl>
    <dd><input type="button" value="Adicionar passo" id="adpasso" class="button2"><input type="button" value="Remover passo" id="repasso" class="button2">
    </dd></dl>
   
<br><strong>Adicionar Referências!</strong><br><br>
<dl><dd><input type="button"  value="Adicionar referências" class="button2" onclick="if(jQuery(this).val()=='Adicionar referências'){jQuery(this).closest('dl').before('<dl id=avisoref><dt><label><img src=http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png></label></dt><dd><textarea id=ref class=inputbox style=clear:both;height:67px;width:510px;margin-top:0px;margin-bottom:0px></textarea></dd></dl>');jQuery(this).val('Remover referências')}else if(jQuery(this).val()=='Remover referências'){jQuery('#avisoref').remove();jQuery(this).val('Adicionar referências')};return false"></dd></dl>

    <br><br><strong>Perguntas e Respostas!</strong><br><br><dl>
    <dd><input type="button" value="Adicionar pergunta/resposta" id="adpergunta" class="button2">
    </dd></dl>
   
    </fieldset>
   
    <br>   
   
<br><div id="divresultadopainel" style="display:none;padding:5px;background-color:white;border:1px solid #EEE;width:99%;cursor:normal"><a id="copy-description-fade" style="display: none; ">Conteúdo copiado</a><textarea id="resultadopainel" style="font-size: 15px; margin-left: 0px; margin-right: 0px; width: 99%; margin-top: 0px; margin-bottom: 0px; height: 36px; "></textarea></div><br><div style="
    text-align: center;
"><input type="button" value="Gerar código do tutorial" id="gerarcodigotutorial" class="button2"><input  id="tipo" value="Artigos" style="display:none"></div><br>

    </div></div>
 
  <!--Fim Tuto--->


<!--Inicio Form botões enviar e pré--->

<span class="corners-bottom"><span></span></span>
       
        <div class="fields1">
           
            <div class="panel row2">
               
              <div class="inner">
                  <span class="corners-top"><span></span></span> <input name="post" onclick="gerarf();" onclick="gerarcodigotutorial();" value="Enviar" type="submit" /><input name="preview" onclick="gerarf();" onclick="gerarcodigotutorial();" value="Pré-visualizar" type="submit" /><input name="message" value="Formulário" type="hidden" /><input name="subject" value="Formulário" type="hidden" /><input name="mode" value="newtopic" type="hidden" /><input name="f" value="1" type="hidden" /> <span class="corners-bottom"><span></span></span>
              </div>
               
            </div>
           
        </div>
         
      </div>
     
</div></fom>

<!--Fim Form botões enviar e pré--->

Código:

<!--Inicio Js Tuto--->

<script>jQuery(document).ready(function(){jQuery('#imagemtutorial img').click(function(){jQuery('#imagemtutorial img').removeClass('imgselected');jQuery(this).addClass('imgselected');m=jQuery(this).attr('src');jQuery('#imgtutorialform').val(m)});

jQuery('#imgtutorialform').keyup(function(){imgcampo=jQuery(this).val();if(jQuery('#imagemtutorial img[src="'+imgcampo+'"]').length){jQuery('#imagemtutorial img[src="'+imgcampo+'"]').click()}else{jQuery('#imagemtutorial img').removeClass('imgselected')}});

jQuery('#titulo').keyup(function(){if(jQuery(this).val().toLowerCase().indexOf('[tutorial]')!=-1){jQuery('#tipo').val('Artigos')}else if(jQuery(this).val().toLowerCase().indexOf('[faq]')!=-1){jQuery('#tipo').val('Perguntas e respostas frequentes')}});

jQuery('#adpasso').click(function(){var clicktitulo="if(this.value=='Título')this.value=''";var blurtitulo="if(this.value=='')this.value='Título'";var clickdescricao="if(this.value=='Descrição')this.value=''";var blurdescricao="if(this.value=='')this.value='Descrição'";var n=new Number(jQuery('#numdepassos').val())+1;jQuery('#adpasso').closest('dl').before('<dl id="passo"><dt><label>'+n+'º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="'+clicktitulo+'" onblur="'+blurtitulo+'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="'+clickdescricao+'" onblur="'+blurdescricao+'">Descrição</textarea></dd></dl>');jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())+1)});

jQuery('#adpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery(this).closest('dl').replaceWith('<dl id="pergunta"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl><dl><dd><input type="button" value="Adicionar pergunta" id="adicionarpergunta" class="button2"><input type="button" value="Remover pergunta" id="repergunta" class="button2"></dd></dl>');

jQuery('#adicionarpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery('#adicionarpergunta').closest('dl').before('<dl id="pergunta" style="border-top:1px solid white;padding-top:7px"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl>')});

jQuery('#repergunta').click(function(){jQuery(this).closest('fieldset').find('dl#pergunta').eq(-1).remove();});});

jQuery('#repasso').click(function(){if(jQuery('#numdepassos').val()>1){jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())-1);jQuery(this).closest('fieldset').find('dl#passo').eq(-1).remove()};});

jQuery('#gerarcodigotutorial').click(function(){jQuery('#divresultadopainel').slideDown();passos='';jQuery('#adpasso').closest('fieldset').find('#passo').each(function(n){titulo=jQuery(this).find('#titulopasso').val();descricao=jQuery(this).find('#descricaopasso').val();numero=n+1;passos+='[b][size=18]'+numero+'º[/size] - [color=darkblue]'+titulo+'[/color][/b]\n\n'+descricao+'\n\n'});

var aviso='';
if(jQuery('#aviso').length){var aviso='<strong>Aviso importante!</strong>\n\n[table][tr][td][img]http://2img.net/i/fa/fdf/voix.png[/img][/td][td]'+jQuery('#aviso').val()+'[/td][/tr][/table]'};

var ref='';
if(jQuery('#ref').length){var ref='<strong>Referências Bibliográficas!</strong>\n\n[table][tr][td][img]http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png[/img][/td][td]'+jQuery('#ref').val()+'[/td][/tr][/table]'};

var perguntas='';jQuery('#adicionarpergunta').closest('fieldset').find('#pergunta').each(function(){pergunta=jQuery(this).find('#titulopergunta').val();resposta=jQuery(this).find('#tituloresposta').val();perguntas+='[list][*][b][color=indigo]'+pergunta+'?[/color][/b]\n'+resposta+'[/list]\n\n'});if(perguntas!=''){perguntas=perguntas+'\n'};


  a='[center][table style="margin:auto"][img]'+jQuery('#imgtutorialform').val()+'[/img]\n\n[td][size=26][color=#003399][font=Comic Sans MS]'+jQuery('#titulo').val()+'[/font][/color][/size][/td][/table][/center]\n[justify]'+jQuery('#descricao').val()+'[/justify]\n\n[justify]'+aviso+'[/justify]\n\n[center][color=green][size=16]<strong>[img]http://www.iconesbr.net/iconesbr/2009/07/8436/8436_32x32.png[/img] '+jQuery('#tipo').val()+' [img]http://www.iconesbr.net/iconesbr/2009/07/8454/8454_32x32.png[/img][/size][/color]\n[size=16][color=red]'+jQuery('#titulo').val()+'[/color][/size]</strong>[/center]\n\n[justify]'+passos+'[/justify][justify]'+ref+'[/justify]\n\n[justify]'+perguntas+'[/justify]\n[size=18][center] <strong>Dúvidas com este Artigo?</strong>[/center][/size][table][tr][td][img]http://s28.postimg.org/6h4utgk09/index_10.png[/img] [/td][td]  Se tiver alguma dúvida relacionada com este Artigo, crie um tópico com o seguinte título:\n\n[b][Dúvida] '+jQuery('#titulo').val()+'[/b][/td][/tr][/table]';

jQuery('#resultadopainel').val(a)});


});


    </script>
 
  <!--Fim Js Tuto--->

<!--Inicio Form--->
<script>
    function gerarf() {

  jQuery('#divresultadopainel').slideDown();
        passos = '';
        jQuery('#adpasso').closest('fieldset').find('#passo').each(function (n) {
            titulo = jQuery(this).find('#titulopasso').val();
            descricao = jQuery(this).find('#descricaopasso').val();
            numero = n + 1;
            passos += '[b][size=18]' + numero + 'º[/size] - [color=darkblue]' + titulo + '[/color][/b]\n\n' + descricao + '\n\n'
        });

        var aviso = '';
        if (jQuery('#aviso').length) {
            var aviso = '<strong>Aviso importante!</strong>\n\n[table][tr][td][img]http://2img.net/i/fa/fdf/voix.png[/img][/td][td]' + jQuery('#aviso').val() + '[/td][/tr][/table]'
        };

        var ref = '';
        if (jQuery('#ref').length) {
            var ref = '<strong>Referências Bibliográficas!</strong>\n\n[table][tr][td][img]http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png[/img][/td][td]' + jQuery('#ref').val() + '[/td][/tr][/table]'
        };

        var perguntas = '';
        jQuery('#adicionarpergunta').closest('fieldset').find('#pergunta').each(function () {
            pergunta = jQuery(this).find('#titulopergunta').val();
            resposta = jQuery(this).find('#tituloresposta').val();
            perguntas += '[list][*][b][color=indigo]' + pergunta + '?[/color][/b]\n' + resposta + '[/list]\n\n'
        });
        if (perguntas != '') {
            perguntas = perguntas + '\n'
        };


        a = '[center][table style="margin:auto"][img]' + jQuery('#imgtutorialform').val() + '[/img]\n\n[td][size=26][color=#003399][font=Comic Sans MS]' + jQuery('#titulo').val() + '[/font][/color][/size][/td][/table][/center]\n[justify]' + jQuery('#descricao').val() + '[/justify]\n\n[justify]' + aviso + '[/justify]\n\n[center][color=green][size=16]<strong>[img]http://www.iconesbr.net/iconesbr/2009/07/8436/8436_32x32.png[/img] ' + jQuery('#tipo').val() + ' [img]http://www.iconesbr.net/iconesbr/2009/07/8454/8454_32x32.png[/img][/size][/color]\n[size=16][color=red]' + jQuery('#titulo').val() + '[/color][/size]</strong>[/center]\n\n[justify]' + passos + '[/justify][justify]' + ref + '[/justify]\n\n[justify]' + perguntas + '[/justify]\n[size=18][center] <strong>Dúvidas com este Artigo?</strong>[/center][/size][table][tr][td][img]http://s28.postimg.org/6h4utgk09/index_10.png[/img] [/td][td]  Se tiver alguma dúvida relacionada com este Artigo, crie um tópico com o seguinte título:\n\n[b][Dúvida] ' + jQuery('#titulo').val() + '[/b][/td][/tr][/table]';

 
  jQuery('input[name="message"]').val('&nbsp;'+a+'');
   
    jQuery('input[name="subject"]').val(' '+jQuery('#2').val()+'  '+jQuery('#titulo').val()+' ');

  jQuery('input[name="f"]').val('96');
    }
    </script> <style>#2.find, #2 {
    position: relative !important;
    top: -5px !important;
    margin-left: 35px !important;
    }
    .fields1 {
    padding: 15px;
    padding-top: 5px;
    background-color: white;
    border: 1x solid #1675BC;
    }
    input, select {
    position: relative;
    margin-left: 55px !important;
    width: 250px;
    }
    </style>
<form method="post" action="/post" name="post" enctype="multipart/form-data">
   
  <h1 class="page-title">
      Formulário para elaboração de Artigos.
  </h1>
    <br />
      <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></h3>
         
        <p style="font-size: 12px;">
            O presente formulário foi criado com o objetivo de facilitar a vida da Equipe AquaPeixes. Escreva o que é pedido na seção do Tutorial, assim que tudo estiver feito, poderá enviar o tópico, que será postado automaticamente. Caso queira pré-visualizar o Artigo, basta clicar no botão correspondente 'Pré-visualizar'. 
        </p><span class="corners-bottom"><span></span></span>
      </div>
     
  </div><br />
  <div class="panel row2">
     
      <div class="inner">
          <span class="corners-top"><span></span></span>
        <div class="h3" style="margin-top: 7px;">
            Atenção!
        </div></h3>
         
        <p style="font-size: 12px;">
            É 'OBRIGATÓRIO' escrever um título condizente com o artigo, para que o membro possa criar um novo tópico com a dúvida, caso precise. Primeiramente clique em 'Gerar código Tutorial', e depois em 'Enviar' ou 'Pré-visualizar'.
        </p><span class="corners-bottom"><span></span></span>
      </div>
     
  </div><br />
  <div class="fields1">
     
      <div class="panel row2">
         
        <div class="inner">
            <span class="corners-top"><span></span></span>
            <h3 style="font-weight: bold;border-bottom: 4px solid #4682b4;color: #4682b4;text-transform: uppercase;">
                Sobre o Título
            </h3>
            <br /> <dl class="campos_form"><dt><span class="1"><label>Prefixo Título:</label></span></dt><br /><dd><span class="2" style="floar: right"><select class="find " id="2"><option value="[Artigo]">Artigo</option></select></span></dd></dl> <br />
            <dl><dt>
    <label>Título:</label></dt>
    <dd><input id="titulo" class="inputbox" style="clear: both; width: 510px;">
    </dd></dl>
            </div><br />        <p>
           
        </p>
      </div>
     
  </div>   

<!--Fim Form--->   
       
       
<!--Inicio Tuto--->
        <style>.imgselected{background-color: white;
-webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.75);
}#imagemtutorial img{cursor:pointer}</style><div id="mudarforum"><form action="/post" method="post" enctype="multipart/form-data"><div id="none" class="panel">
    <div class="inner">
            <span class="corners-top"><span></span></span>
        <div class="h3" style="margin-top: 7px;">
      FORMULÁRIO DE ESTRUTURA DO ARTIGO     
     

    <fieldset class="fields1">

    <dl><dt>
    <label>Imagem:</label><br><b style="
    color: gray;
">Clique sobre uma imagem para selecioná-la</b></dt>
    <dd><input id="imgtutorialform" class="inputbox" style="clear: both; width: 510px;" value="http://i66.servimg.com/u/f66/15/86/37/09/alerte10.png"><div id="imagemtutorial" style="
    width: 100%; 
    height: auto;   
    overflow-x: auto;
display:inline-block;   
"><div style="
    float: left; 
    margin-right: -30000px; 
padding-left: 10px;
padding-right: 10px;
"><img src="http://i66.servimg.com/u/f66/15/86/37/09/alerte10.png" alt="" class="imgselected" style="display:inline;"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/censur10.png" alt="" class="" style="display:inline"> <img src="http://s28.postimg.org/6h4utgk09/index_10.png" alt="" class="" style="display:inline">  <img src="http://cantigasdeumbanda.com.br/interrogacaoazul01.png?v=2zpylsij6l57qw" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/chatbo10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/config10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/ecrire10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/galeri10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/gestio10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/gestio11.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/groupe10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/html10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/images10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_11.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/index_12.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/jeux10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/logo10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/new_ic10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/newsle10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/permis10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/portai10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/rang10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/reglem10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/ssss10.png" alt="" class="" style="display:inline"> <img src="http://i66.servimg.com/u/f66/15/86/37/09/statis10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/domain.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/pub.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/stockage.png" alt="" class="" style="display:inline"><img src="http://i66.servimg.com/u/f66/15/86/37/09/suppor10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/footer_nocopyrights.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/servic10.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/miniba10.png" alt="" class="" style="display:inline"><img src="http://i23.servimg.com/u/f23/12/73/11/63/botone10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/marteau.png" alt="" class="" style="display:inline"><img src="http://i76.servimg.com/u/f76/11/66/91/15/sug1013.png" alt="" class="" style="display:inline"><img src="http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/warning_arrow.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/alerte1.png" alt="" class="" style="display:inline"><img src="http://www.illiweb.com/bl/index_users.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/templates.png" alt="" class="" style="display:inline"><img src="http://i40.servimg.com/u/f40/12/30/19/49/jeux10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/voix.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf/questions.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/forumactif_smartphone.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/warning.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/stop.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/1.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/2.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/3.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/4.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_bad.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_middle.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/p_strength/pwd_good.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/wait_preview.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/warning.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/error.gif" alt="" class="" style="display:inline"><img src="http://2img.net/i/bl/confirm.gif" alt="" class="" style="display:inline"><img src="http://www.criarumblog.com/rsc/img/logo_blog.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/admin/icones/big_ico/avatars.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug310.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug110.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug210.png" alt="" class="" style="display:inline"><img src="http://i44.servimg.com/u/f44/11/14/55/92/sug10.png" alt="" class="" style="display:inline"><img src="http://i22.servimg.com/u/f22/09/02/12/09/tumbli10.png" alt="" class="" style="display:inline"><img src="http://i22.servimg.com/u/f22/09/02/12/09/cardga10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/fdf3/icones_fdf/private4.png" alt="" class="" style="display:inline"><img src="http://i32.servimg.com/u/f32/11/22/70/40/review10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/annonce.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/medaille.gif" alt="" class="" style="display:inline"><img src="http://i42.servimg.com/u/f42/11/32/95/02/autres10.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/ecrire2.png" alt="" class="" style="display:inline"><img src="http://2img.net/i/fa/optimisation_fdf/common/ecrire3.png" alt="" class="" style="display:inline"></div></div>
    </dd></dl>

<dl><dt>
    <label>Descrição:</label></dt>
    <dd><textarea id="descricao" class="inputbox" style="clear: both; height: 100px; width:510px;"></textarea>
    </dd></dl>
 
<br><strong>Adicionar aviso importante!</strong><br><br>
<dl><dd><input type="button"  value="Adicionar aviso" class="button2" onclick="if(jQuery(this).val()=='Adicionar aviso'){jQuery(this).closest('dl').before('<dl id=avisotexto><dt><label><img src=http://2img.net/i/fa/fdf/voix.png></label></dt><dd><textarea id=aviso class=inputbox style=clear:both;height:67px;width:510px;margin-top:0px;margin-bottom:0px></textarea></dd></dl>');jQuery(this).val('Remover aviso')}else if(jQuery(this).val()=='Remover aviso'){jQuery('#avisotexto').remove();jQuery(this).val('Adicionar aviso')};return false"></dd></dl>

<br><strong>Medidas a serem tomadas!</strong><br><br>
<input type=hidden id="numdepassos" value="1">
<dl id="passo"><dt><label>1º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="if(this.value=='Título')this.value=''" onblur="if(this.value=='')this.value='Título'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="if(this.value=='Descrição')this.value=''" onblur="if(this.value=='')this.value='Descrição'">Descrição</textarea></dd></dl>

<dl>
    <dd><input type="button" value="Adicionar passo" id="adpasso" class="button2"><input type="button" value="Remover passo" id="repasso" class="button2">
    </dd></dl>
   
<br><strong>Adicionar Referências!</strong><br><br>
<dl><dd><input type="button"  value="Adicionar referências" class="button2" onclick="if(jQuery(this).val()=='Adicionar referências'){jQuery(this).closest('dl').before('<dl id=avisoref><dt><label><img src=http://i76.servimg.com/u/f76/11/66/91/15/sug1012.png></label></dt><dd><textarea id=ref class=inputbox style=clear:both;height:67px;width:510px;margin-top:0px;margin-bottom:0px></textarea></dd></dl>');jQuery(this).val('Remover referências')}else if(jQuery(this).val()=='Remover referências'){jQuery('#avisoref').remove();jQuery(this).val('Adicionar referências')};return false"></dd></dl>

    <br><br><strong>Perguntas e Respostas!</strong><br><br><dl>
    <dd><input type="button" value="Adicionar pergunta/resposta" id="adpergunta" class="button2">
    </dd></dl>
   
    </fieldset>   
   
<input  id="tipo" value="Artigos" style="display:none"></div>
 
  <!--Fim Tuto--->

<!--Inicio Form botões enviar e pré--->
 
             <span class="corners-bottom"><span></span></span>
            </div></div>
            
         <br />
       
        <div class="fields1">
           
            <div class="panel row2">
               
              <div class="inner">
                  <span class="corners-top"><span></span></span> <input name="post" onclick="gerarf();" onclick="gerarcodigotutorial();" value="Enviar" type="submit" /><input name="preview" onclick="gerarf();" onclick="gerarcodigotutorial();" value="Pré-visualizar" type="submit" /><input name="message" value="Formulário" type="hidden" /><input name="subject" value="Formulário" type="hidden" /><input name="mode" value="newtopic" type="hidden" /><input name="f" value="1" type="hidden" /> <span class="corners-bottom"><span></span></span>
              </div>
               
            </div>
           
        </div> 
   
     
</fom>

<!--Fim Form botões enviar e pré--->

Código:

#titulopasso {
 margin-left: 0 !important;
}