Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

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


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

Fóruns de suporte oficiais
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
279 usuários online :: 7 usuários cadastrados, Nenhum Invisível e 272 Visitantes :: 1 Motor de busca

Connor R., Daniel Z, Fou-Lu, Harleen, Solaria Magnum, Stewart, William_iHarDz

[ Ver toda a lista ]


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

Personalizar formulário

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

Resolvido Personalizar formulário

Mensagem por Brunelli em Qua 9 Nov 2016 - 17:30

Detalhes da questão


Endereço do fórum: http://gsf-nwd.forumeiros.com/
Versão do fórum: PhpBB3

Descrição


Olá Convidado

Então, eu queria "personalizar" meu(s) formulário(s) mas gostaria que a estrutura continuasse a mesma, por exemplo o(s) atual(is) é da seguinte maneira:

~> http://i.imgur.com/W9gOaID.png (A parte ali na onde pede o perfil, eu fiz um esquema pra pessoa por o link e o link sair naquele código [url=..." | e a parte da modalidade é uma caixinha com outras opções, e o level tem uma coisa que você pode mudar o lvl pelas setinhas)

~> http://i.imgur.com/Wm3WGER.png (E no fim fica assim, o esquema do "Meu Perfil" ali é o link pedido no formulário ai clica em "Meu Perfil" e redireciona pra lá)

Para mais informações basta criar uma conta em meu fórum ir em "Recrutamento ~> Novo" ou "Revisão de Banidos ~> Novo" que podem ver como são.

Bom, vamos ao ponto, eu queria mudar eles só a aparência, deixar mais bonito, no estilo dos formulários aqui do FdF o de Pedidos graficos só que no caso verde, mas mantendo a mesma estrutura de respostas

É possível?

Brunelli
Nível 6

Masculino
Inscrito dia : 09/10/2016
Mensagens : 79
Pontos Ativos : 276

http://gsf-nwd.forumeiros.com/ https://www.facebook.com/BrunelliK3 https://twitter.com/BrunelliK3

Resolvido Re: Personalizar formulário

Mensagem por Gaaratsu em Qui 10 Nov 2016 - 15:44

Saudações!

O senhor diz deixar o formulário mais bonito na hora da criação ou quando já postado(em tópico)? E diz à respeito do tamanho do título, da cor, barra, é isto?

Peço que me passe por gentileza o código do teu formulário! Muito feliz

Até! Contente

Gaaratsu
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5541
Pontos Ativos : 9333

http://narutongo.forumeiros.com/

Resolvido Re: Personalizar formulário

Mensagem por Brunelli em Qui 10 Nov 2016 - 20:05

Olá,

Então, meus formulários, são assim: http://i.imgur.com/q2RpEhw.png
E eu quero deixa-los, nesse estilo: http://i.imgur.com/FhIdNQ1.png (mas no caso verde); não igual do FdF mas o estilo e aparência, eu quero mexer na aparência dele quando você está nele pra preencher.

Como são mais de 10 formulários no meu fórum, irei mandar o principal, mas todos são a mesma base, só muda as perguntas:

Formulário de Recrutamento (Esse é o que você pode acessar se quiser ver):
Código:
<script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
               <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script src="http://ajuda.forumeiros.com/29110.js"></script>
                <script src="http://ajuda.forumeiros.com/28074.js"></script>
                <style>
            #generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
 
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
 
#generated_form dl {
   margin-bottom: 10px;
   font-size: 1.1em;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
 
#generated_form dt {
   width: 30%;
   padding-top: 5px;
   border: none;
   float: left;
}
 
#generated_form dd {
   padding: 5px;
   padding-right: 5px;
   margin-left: 30%;
   vertical-align: middle;
}
#generated_form dl:hover dt {
   color: #666;
}
 
#generated_form input {
   font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   color: #333333;
   padding: 2px;
   vertical-align: middle;
   padding-left: 4px;
}
 
#generated_form input[disabled] {
   background-color:#ddd;
   cursor:pointer;
}
 
#generated_form select {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   cursor: default;
   vertical-align: middle;
   width:auto;
   max-width:100%;/* Bug IE */
   padding: 1px;
}
 
#generated_form textarea {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   width: 300px;
   height: 100px;
   padding: 2px;
   padding-left: 4px;
   cursor: text;
}
 
#generated_form input[type=text], #generated_form input[type=fields_list] {
   width: 300px;
   cursor: text;
}
</style>
          


 <form onsubmit="submit_form();" action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">

 <input type="hidden" name="form_mode" value="0">

<dl><dt>Qual é o Seu Nick na NWD?:</dt>
                            <dd><input type="text" data-type="field" value="" id="field0"></dd>
                        </dl>

<dl><dt>Quais seus Nick's Antigos na NWD? (Se não tem, não responda):</dt>
                            <dd><input type="text" data-type="field" value="" id="field1"></dd>
                        </dl>

<dl><dt>Qual Seu Level na NWD?:</dt>
                            <dd><input type="number" min="0" max="100000" data-type="field" value="" step="1" id="field2"></dd>
                        </dl>

<dt>Coloque aqui o LINK do seu PERFIL do Fórum NWD:</dt>
                            <dd><input type="text" data-type="field" value="Vá na NWD, clique no seu Nick e Copie o perfil, ex: http://www.nwdgames.com/u7773" id="field4"></dd>
                        </dl>

<dt>Por quais Clãs você já passou:</dt>
                            <dd><input type="text" data-type="field" value="" id="field6"></dd>
                        </dl>

<dl>
                            <dt>Escolha uma Modalidade para fazer o Teste</dt>
  <dd><select data-type="field" id="field8"><option value="CRIME">CRIME</option><option value="DM">DM</option></select></dd>
                        </dl>

<dl>
                            <dt>Porque quer entrar para a GSF? (Grove Street FamilieS):</dt>
                            <dd><textarea data-type="field" id="field10"></textarea></dd>
                        </dl>


                <input type="hidden" name="f" value="2">
                <input type="hidden" name="subject" value="O script não enviou o título" template="[ Recrutamento ] {field0}">
                <input type="hidden" name="description" value="O script não enviou a descrição" template="">
                <textarea name="message" style="display:none"></textarea>
               
                <textarea id="message-template-bbcode-0" style="display:none">[b]Meu Nick:[/b] {field0}

[b]Nicks Antigos:[/b] {field1}

[b]Meu Level:[/b] {field2}

[b]Meu Perfil na NWD:[/b] [url={field4}][color=#00ff00]Meu Perfil[/color][/url]
                 
[b]Os clãs que já passei, foram:[/b] {field6}

[b]Eu Escolho a Modalidade:[/b] {field8}

[b]Porque quero entrar para GSF:[/b] {field10}</textarea>
                <input type="hidden" name="mode" value="newtopic">
                <input type="hidden" name="lt" value="0">
                <input type="submit" name="post" class="button2" value="Enviar">
           

</form>



Esse é o JS do Formulário:
Código:
$(function() {
$('a[href="/post?f=2&mode=newtopic"]').attr('href', '/h1-');
});

Brunelli
Nível 6

Masculino
Inscrito dia : 09/10/2016
Mensagens : 79
Pontos Ativos : 276

http://gsf-nwd.forumeiros.com/ https://www.facebook.com/BrunelliK3 https://twitter.com/BrunelliK3

Resolvido Re: Personalizar formulário

Mensagem por Kyo Panda em Dom 13 Nov 2016 - 15:36

Veja se lhe agrada:

Código:
<script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajuda.forumeiros.com/29110.js"></script>
<script src="http://ajuda.forumeiros.com/28074.js"></script>
<style>
    #generated_form .part {
        background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px;
        width: 60px;
        height: 20px;
    }
   
    #generated_form .more {
        background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px;
        width: 12px;
        height: 20px;
        cursor: pointer;
    }
   
    #generated_form .image .part {
        background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px;
        width: 60px;
        height: 20px;
    }
   
    #generated_form .remove {
        float: left;
        background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;
        padding-left: 16px;
        width: 12px;
        height: 20px;
        cursor: pointer;
        position: relative;
        top: 3px;
    }
   
    #generated_form .image {
        width: 300px;
    }
   
    #generated_form h1 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 2em;
        font-weight: 400;
        margin: .8em 0 .2em;
    }
   
    #generated_form dl {
        margin-bottom: 10px;
        font-size: 1.1em;
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    }
   
    #generated_form dt {
        width: 30%;
        padding-top: 5px;
        border: none;
        float: left;
    }
   
    #generated_form dd {
        padding: 5px;
        padding-right: 5px;
        margin-left: 30%;
        vertical-align: middle;
    }
   
    #generated_form dl:hover dt {
        color: #666;
    }
   
    #generated_form input {
        font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
        font-weight: normal;
        color: #333333;
        padding: 2px;
        vertical-align: middle;
        padding-left: 4px;
    }
   
    #generated_form input[disabled] {
        background-color: #ddd;
        cursor: pointer;
    }
   
    #generated_form select {
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
        font-weight: normal;
        font-style: normal;
        cursor: default;
        vertical-align: middle;
        width: auto;
        max-width: 100%;
        /* Bug IE */
        padding: 1px;
    }
   
    #generated_form textarea {
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
        width: 300px;
        height: 100px;
        padding: 2px;
        padding-left: 4px;
        cursor: text;
    }
   
    #generated_form input[type=text],
    #generated_form input[type=fields_list] {
        width: 300px;
        cursor: text;
    }
   
    form#generated_form {
        color: #fff;
        font-size: 14px;
        padding: 0;
    }
    /* Custom */
   
    .generated_form_title {
        padding: 15px 0 15px 15px;
        border-bottom: 1px rgba(255, 255, 255, 0.25) solid;
        border-left: 15px rgba(255, 255, 255, 0.25) solid;
        text-transform: uppercase;
        font-weight: 700;
    }
   
    .generated_form_list {
        background-color: #1fb51f;
    }
   
    form#generated_form dl {
        overflow: hidden;
        padding: 15px 30px;
        margin: 0;
        border-bottom: 1px rgba(255, 255, 255, 0.25) solid;
        transition: 250ms ease background-color;
    }
   
    form#generated_form dl:hover {
        background-color: rgba(255, 255, 255, 0.25);
    }
   
    form#generated_form dl:hover dt {
        color: inherit;
    }
   
    form#generated_form dt {
        line-height: 30px;
        padding: 0;
        width: auto;
        font-size: 12px;
        float: none;
    }
   
    form#generated_form dd {
        padding: 0;
        margin: 0;
        display: block;
    }
   
    form#generated_form input,
    form#generated_form select,
    form#generated_form textarea {
        padding: 5px 15px;
        line-height: 30px;
        height: 30px;
        border-radius: 5px;
        border: none;
        width: 40%;
    }
   
    form#generated_form select {
        width: auto;
    }
   
    form#generated_form textarea {
        min-height: 300px;
    }
   
    form#generated_form input[type=text],
    form#generated_form input[type=fields_list] {
        width: 40%;
    }
   
    form#generated_form input[type="submit"] {
        height: 40px;
        line-height: 40px;
        padding: 0 30px !important;
        margin-top: 30px;
    }
</style>

<form onsubmit="submit_form();" action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">

    <input type="hidden" name="form_mode" value="0">

    <div class="generated_form_list">
       
        <div class="generated_form_title">Preencha o formulário</div>

        <dl>
            <dt>Qual é o Seu Nick na NWD?:</dt>
            <dd><input type="text" data-type="field" value="" id="field0"></dd>
        </dl>

        <dl>
            <dt>Quais seus Nick's Antigos na NWD? (Se não tem, não responda):</dt>
            <dd><input type="text" data-type="field" value="" id="field1"></dd>
        </dl>

        <dl>
            <dt>Qual Seu Level na NWD?:</dt>
            <dd><input type="number" min="0" max="100000" data-type="field" value="" step="1" id="field2"></dd>
        </dl>

        <dl>
            <dt>Coloque aqui o LINK do seu PERFIL do Fórum NWD:</dt>
            <dd><input type="text" data-type="field" value="Vá na NWD, clique no seu Nick e Copie o perfil, ex: http://www.nwdgames.com/u7773"
                    id="field4"></dd>
        </dl>

        <dl>
            <dt>Por quais Clãs você já passou:</dt>
            <dd><input type="text" data-type="field" value="" id="field6"></dd>
        </dl>

        <dl>
            <dt>Escolha uma Modalidade para fazer o Teste</dt>
            <dd><select data-type="field" id="field8"><option value="CRIME">CRIME</option><option value="DM">DM</option></select></dd>
        </dl>

        <dl>
            <dt>Porque quer entrar para a GSF? (Grove Street FamilieS):</dt>
            <dd><textarea data-type="field" id="field10"></textarea></dd>
        </dl>
    </div>

    <input type="hidden" name="f" value="2">
    <input type="hidden" name="subject" value="O script não enviou o título" template="[ Recrutamento ] {field0}">
    <input type="hidden" name="description" value="O script não enviou a descrição" template="">
    <textarea name="message" style="display:none"></textarea>

    <textarea id="message-template-bbcode-0" style="display: none;">[b]Meu Nick:[/b] {field0}
 
[b]Nicks Antigos:[/b] {field1}
 
[b]Meu Level:[/b] {field2}
 
[b]Meu Perfil na NWD:[/b] [url={field4}][color=#00ff00]Meu Perfil[/color][/url]
                 
[b]Os clãs que já passei, foram:[/b] {field6}
 
[b]Eu Escolho a Modalidade:[/b] {field8}
 
[b]Porque quero entrar para GSF:[/b] {field10}</textarea>

    <input type="hidden" name="mode" value="newtopic">
    <input type="hidden" name="lt" value="0">
    <input type="submit" name="post" class="button2" value="Enviar">
</form>

As partes importantes no código acima são:

  • No estilo CSS:

    Código:
    /* Custom */

    .generated_form_title {
        padding: 15px 0 15px 15px;
        border-bottom: 1px rgba(255, 255, 255, 0.25) solid;
        border-left: 15px rgba(255, 255, 255, 0.25) solid;
        text-transform: uppercase;
        font-weight: 700;
    }

    .generated_form_list {
        background-color: #1fb51f;
    }

    form#generated_form dl {
        overflow: hidden;
        padding: 15px 30px;
        margin: 0;
        border-bottom: 1px rgba(255, 255, 255, 0.25) solid;
        transition: 250ms ease background-color;
    }

    form#generated_form dl:hover {
        background-color: rgba(255, 255, 255, 0.25);
    }

    form#generated_form dl:hover dt {
        color: inherit;
    }

    form#generated_form dt {
        line-height: 30px;
        padding: 0;
        width: auto;
        font-size: 12px;
        float: none;
    }

    form#generated_form dd {
        padding: 0;
        margin: 0;
        display: block;
    }

    form#generated_form input,
    form#generated_form select,
    form#generated_form textarea {
        padding: 5px 15px;
        line-height: 30px;
        height: 30px;
        border-radius: 5px;
        border: none;
        width: 40%;
    }

    form#generated_form select {
        width: auto;
    }

    form#generated_form textarea {
        min-height: 300px;
    }

    form#generated_form input[type=text],
    form#generated_form input[type=fields_list] {
        width: 40%;
    }

    form#generated_form input[type="submit"] {
        height: 40px;
        line-height: 40px;
        padding: 0 30px !important;
        margin-top: 30px;
    }

  • Nas listas HTML, geralmente estarão assim:

    Código:
    <dl>
        <dt>Qual é o Seu Nick na NWD?:</dt>
        <dd><input type="text" data-type="field" value="" id="field0"></dd>
    </dl>

    <dl>
        <dt>Quais seus Nick's Antigos na NWD? (Se não tem, não responda):</dt>
        <dd><input type="text" data-type="field" value="" id="field1"></dd>
    </dl>

    ...

    <dl>
        <dt>Qual Seu Level na NWD?:</dt>
        <dd><input type="number" min="0" max="100000" data-type="field" value="" step="1" id="field2"></dd>
    </dl>

    Você deve colocar no início delas:

    Código:
    <div class="generated_form_list">

        <div class="generated_form_title">Preencha o formulário</div>

    E no fim:

    Código:
    </div>

    O resultado final seria:

    Código:
    <div class="generated_form_list">

        <div class="generated_form_title">Preencha o formulário</div>

        <dl>
            <dt>Qual é o Seu Nick na NWD?:</dt>
            <dd><input type="text" data-type="field" value="" id="field0"></dd>
        </dl>

        <dl>
            <dt>Quais seus Nick's Antigos na NWD? (Se não tem, não responda):</dt>
            <dd><input type="text" data-type="field" value="" id="field1"></dd>
        </dl>

        ...

        <dl>
            <dt>Qual Seu Level na NWD?:</dt>
            <dd><input type="number" min="0" max="100000" data-type="field" value="" step="1" id="field2"></dd>
        </dl>
    </div>

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2350
Pontos Ativos : 5288

http://ajuda.forumeiros.com

Resolvido Re: Personalizar formulário

Mensagem por Brunelli em Dom 13 Nov 2016 - 22:19

Olá =D
Então, eu coloquei lá veja se coloquei correto:
~> http://prnt.sc/d6w3ov
~> http://prnt.sc/d6w3sy

Se estiver certo, tem como arrumar o botão "Enviar"? ele ficou muito grande.

E outra coisa, eu não entendi o que disse sobre o CSS e o HTML, eu tenho que adicionar algo na minha folha de estilo CSS? 
E tipo, uma parte da explicação foi de como eu adicionar o "tema" do formulário nos demais?
Não entendi muito bem, me perdoe.

Brunelli
Nível 6

Masculino
Inscrito dia : 09/10/2016
Mensagens : 79
Pontos Ativos : 276

http://gsf-nwd.forumeiros.com/ https://www.facebook.com/BrunelliK3 https://twitter.com/BrunelliK3

Resolvido Re: Personalizar formulário

Mensagem por Kyo Panda em Ter 15 Nov 2016 - 19:06

Eu alterei o tamanho do botão para seguir o estilo do formulário. Troque por esse, se desejar o tamanho normal:

Código:
<script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajuda.forumeiros.com/29110.js"></script>
<script src="http://ajuda.forumeiros.com/28074.js"></script>
<style>
    #generated_form .part {
        background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px;
        width: 60px;
        height: 20px;
    }
   
    #generated_form .more {
        background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px;
        width: 12px;
        height: 20px;
        cursor: pointer;
    }
   
    #generated_form .image .part {
        background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px;
        width: 60px;
        height: 20px;
    }
   
    #generated_form .remove {
        float: left;
        background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;
        padding-left: 16px;
        width: 12px;
        height: 20px;
        cursor: pointer;
        position: relative;
        top: 3px;
    }
   
    #generated_form .image {
        width: 300px;
    }
   
    #generated_form h1 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 2em;
        font-weight: 400;
        margin: .8em 0 .2em;
    }
   
    #generated_form dl {
        margin-bottom: 10px;
        font-size: 1.1em;
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    }
   
    #generated_form dt {
        width: 30%;
        padding-top: 5px;
        border: none;
        float: left;
    }
   
    #generated_form dd {
        padding: 5px;
        padding-right: 5px;
        margin-left: 30%;
        vertical-align: middle;
    }
   
    #generated_form dl:hover dt {
        color: #666;
    }
   
    #generated_form input {
        font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
        font-weight: normal;
        color: #333333;
        padding: 2px;
        vertical-align: middle;
        padding-left: 4px;
    }
   
    #generated_form input[disabled] {
        background-color: #ddd;
        cursor: pointer;
    }
   
    #generated_form select {
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
        font-weight: normal;
        font-style: normal;
        cursor: default;
        vertical-align: middle;
        width: auto;
        max-width: 100%;
        /* Bug IE */
        padding: 1px;
    }
   
    #generated_form textarea {
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
        width: 300px;
        height: 100px;
        padding: 2px;
        padding-left: 4px;
        cursor: text;
    }
   
    #generated_form input[type=text],
    #generated_form input[type=fields_list] {
        width: 300px;
        cursor: text;
    }
   
    form#generated_form {
        color: #fff;
        font-size: 14px;
        padding: 0;
    }
    /* Custom */

    .generated_form_title {
        padding: 15px 0 15px 15px;
        border-bottom: 1px rgba(255, 255, 255, 0.25) solid;
        border-left: 15px rgba(255, 255, 255, 0.25) solid;
        text-transform: uppercase;
        font-weight: 700;
    }

    .generated_form_list {
        background-color: #1fb51f;
    }

    form#generated_form dl {
        overflow: hidden;
        padding: 15px 30px;
        margin: 0;
        border-bottom: 1px rgba(255, 255, 255, 0.25) solid;
        transition: 250ms ease background-color;
    }

    form#generated_form dl:hover {
        background-color: rgba(255, 255, 255, 0.25);
    }

    form#generated_form dl:hover dt {
        color: inherit;
    }

    form#generated_form dt {
        line-height: 30px;
        padding: 0;
        width: auto;
        font-size: 12px;
        float: none;
    }

    form#generated_form dd {
        padding: 0;
        margin: 0;
        display: block;
    }

    form#generated_form input,
    form#generated_form select,
    form#generated_form textarea {
        padding: 5px 15px;
        line-height: 30px;
        height: 30px;
        border-radius: 5px;
        border: none;
        width: 40%;
    }

    form#generated_form select {
        width: auto;
    }

    form#generated_form textarea {
        min-height: 300px;
    }

    form#generated_form input[type=text],
    form#generated_form input[type=fields_list] {
        width: 40%;
    }

    form#generated_form input[type="submit"] {
        line-height: 18px;
        margin-top: 30px;
    }
</style>

<form onsubmit="submit_form();" action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">

    <input type="hidden" name="form_mode" value="0">

    <div class="generated_form_list">

        <div class="generated_form_title">Preencha o formulário</div>

        <dl>
            <dt>Qual é o Seu Nick na NWD?:</dt>
            <dd><input type="text" data-type="field" value="" id="field0"></dd>
        </dl>

        <dl>
            <dt>Quais seus Nick's Antigos na NWD? (Se não tem, não responda):</dt>
            <dd><input type="text" data-type="field" value="" id="field1"></dd>
        </dl>

        <dl>
            <dt>Qual Seu Level na NWD?:</dt>
            <dd><input type="number" min="0" max="100000" data-type="field" value="" step="1" id="field2"></dd>
        </dl>

        <dl>
            <dt>Coloque aqui o LINK do seu PERFIL do Fórum NWD:</dt>
            <dd><input type="text" data-type="field" value="Vá na NWD, clique no seu Nick e Copie o perfil, ex: http://www.nwdgames.com/u7773"
                    id="field4"></dd>
        </dl>

        <dl>
            <dt>Por quais Clãs você já passou:</dt>
            <dd><input type="text" data-type="field" value="" id="field6"></dd>
        </dl>

        <dl>
            <dt>Escolha uma Modalidade para fazer o Teste</dt>
            <dd><select data-type="field" id="field8"><option value="CRIME">CRIME</option><option value="DM">DM</option></select></dd>
        </dl>

        <dl>
            <dt>Porque quer entrar para a GSF? (Grove Street FamilieS):</dt>
            <dd><textarea data-type="field" id="field10"></textarea></dd>
        </dl>
    </div>

    <input type="hidden" name="f" value="2">
    <input type="hidden" name="subject" value="O script não enviou o título" template="[ Recrutamento ] {field0}">
    <input type="hidden" name="description" value="O script não enviou a descrição" template="">
    <textarea name="message" style="display:none"></textarea>

    <textarea id="message-template-bbcode-0" style="display: none;">[b]Meu Nick:[/b] {field0}
 
[b]Nicks Antigos:[/b] {field1}
 
[b]Meu Level:[/b] {field2}
 
[b]Meu Perfil na NWD:[/b] [url={field4}][color=#00ff00]Meu Perfil[/color][/url]
                 
[b]Os clãs que já passei, foram:[/b] {field6}
 
[b]Eu Escolho a Modalidade:[/b] {field8}
 
[b]Porque quero entrar para GSF:[/b] {field10}</textarea>

    <input type="hidden" name="mode" value="newtopic">
    <input type="hidden" name="lt" value="0">
    <input type="submit" name="post" class="button2" value="Enviar">
</form>

Sobre o CSS, todo formulário que você possui no seu fórum, possui uma parte de <style></style>:

Código:
<style>
    #generated_form .part {
        background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px;
        width: 60px;
        height: 20px;
    }
   
    #generated_form .more {
        background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px;
        width: 12px;
        height: 20px;
        cursor: pointer;
    }
   
    #generated_form .image .part {
        background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px;
        width: 60px;
        height: 20px;
    }
   
    #generated_form .remove {
        float: left;
        background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;
        padding-left: 16px;
        width: 12px;
        height: 20px;
        cursor: pointer;
        position: relative;
        top: 3px;
    }
   
    #generated_form .image {
        width: 300px;
    }
   
    #generated_form h1 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 2em;
        font-weight: 400;
        margin: .8em 0 .2em;
    }
   
    #generated_form dl {
        margin-bottom: 10px;
        font-size: 1.1em;
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    }
   
    #generated_form dt {
        width: 30%;
        padding-top: 5px;
        border: none;
        float: left;
    }
   
    #generated_form dd {
        padding: 5px;
        padding-right: 5px;
        margin-left: 30%;
        vertical-align: middle;
    }
   
    #generated_form dl:hover dt {
        color: #666;
    }
   
    #generated_form input {
        font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
        font-weight: normal;
        color: #333333;
        padding: 2px;
        vertical-align: middle;
        padding-left: 4px;
    }
   
    #generated_form input[disabled] {
        background-color: #ddd;
        cursor: pointer;
    }
   
    #generated_form select {
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
        font-weight: normal;
        font-style: normal;
        cursor: default;
        vertical-align: middle;
        width: auto;
        max-width: 100%;
        /* Bug IE */
        padding: 1px;
    }
   
    #generated_form textarea {
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
        width: 300px;
        height: 100px;
        padding: 2px;
        padding-left: 4px;
        cursor: text;
    }
   
    #generated_form input[type=text],
    #generated_form input[type=fields_list] {
        width: 300px;
        cursor: text;
    }
   
    form#generated_form {
        color: #fff;
        font-size: 14px;
        padding: 0;
    }
</style>

O CSS que citei na mensagem anterior deve ser colocado no fim dessa tag, antes do </style>, em todos os formulários. O senhor até pode ir em Painel de controle :seta2: Visualização :seta2: Imagens e Cores :seta2: Cores :seta2: Folha de estilo CSS e colocar o CSS lá, aplicando para todos os formulários, mas não há garantia que todos os formulários estarão uniformes.

A segunda parte se refere ao título dos formulários, em adição a algumas partes necessárias para que o visual fique de acordo com o passado. Todos os códigos de formulário do seu fórum terão uma parte onde diversos <dl></dl> aparecerão. Estes são os campos HTML do seu formulário. Para que o tema dos formulários seja devidamente aplicado, você deverá procurar a parte dos formulários com esses <dl></dl>

Código:
<dl>
    <dt>Qual é o Seu Nick na NWD?:</dt>
    <dd><input type="text" data-type="field" value="" id="field0"></dd>
</dl>
 
<dl>
    <dt>Quais seus Nick's Antigos na NWD? (Se não tem, não responda):</dt>
    <dd><input type="text" data-type="field" value="" id="field1"></dd>
</dl>
 
...
 
<dl>
    <dt>Qual Seu Level na NWD?:</dt>
    <dd><input type="number" min="0" max="100000" data-type="field" value="" step="1" id="field2"></dd>
</dl>

No início deles, inserir:

Código:
<div class="generated_form_list">
 
    <div class="generated_form_title">Preencha o formulário</div>

E no fim:

Código:
</div>

Caso contrário o tema não será aplicado.

Eu peço perdão, mas foi a melhor forma que encontrei para aplicar o tema que deixaria semelhante ao do FdF. Logo, o senhor terá esse trabalho extra para alterar os formulários do seu fórum. :/

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2350
Pontos Ativos : 5288

http://ajuda.forumeiros.com

Resolvido Re: Personalizar formulário

Mensagem por Brunelli em Qua 16 Nov 2016 - 13:26

Eu não entendi muito bem, são muitos códigos kkkk, mas eu consegui mesmo que com alguns erros aplicar o estilo do fórum, e ficou incrível.

Obrigado e Resolvido.
(Marquem como Resolvido, não está indo, só fica em "marcando".)

Brunelli
Nível 6

Masculino
Inscrito dia : 09/10/2016
Mensagens : 79
Pontos Ativos : 276

http://gsf-nwd.forumeiros.com/ https://www.facebook.com/BrunelliK3 https://twitter.com/BrunelliK3

Resolvido Re: Personalizar formulário

Mensagem por Cream em Qua 16 Nov 2016 - 14:56

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

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

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 13903

http://ajuda.forumeiros.com

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

- Tópicos similares

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