Histórico da Página
...
Classe | Descrição |
---|---|
.title-form-application | Classe do título do formulário |
.form-field | DIV que enquadra todo campo do formulário |
.form-input | DIV pai apenas do campo (não enquadra a label) |
.label-field-properties | Label dos campos |
.is-required | Classe do asterisco em campos obrigatórios. |
.paragraph-is-required | Mensagem de obrigatório |
Abaixo, segue um arquivo de tema válido:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
input { padding:0 15px !important; background-color:#000; color:#fff; }
label { font-weight:bold; color:#8B0000; }
.title-form-application { margin:20px; padding: 0 0px 10px; font-size: 1.5em; color: #006699; border-bottom: 1px dashed #ccc; }
.form-field { margin-bottom: 15px; border:1px solid red; padding:10px; }
.is-required { color:red; font-size:2em; } |
Em alguns casos é necessário utilizar do !important, pois são classes que já são utilizadas pelo fluig e podem ser sobescritas.
Exemplo
No exemplo, para o tema queremos:
- Os campos do tipo input com fundo preto e cor branca
- As labels em negrito e cor bordô
- O títutlo do formuário com uma margem, cor e borda inferior
- Cada bloco de campo ter uma margem inferior, com espaçamento interno e uma borda vermelha
- Cor vermelho e tamanho da fonte para o asterisco de obrigatório
HTML
O HTML gerado automaticamente pelo editor de formulários com apenas um campo, fica com a seguinte estruturaPara melhor entendimento, abaixo está um HTML simples gerado pelo editor:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
<form name="formulario"> <h1 class="title-form-application">Formulario Exemplo</h1> <div class="form-field"> <label class="label-field-properties">Campo Nome</label> <span class="is-required"> <b>*</b> </span> <div class="form-input"> <input type="text" name="nome" /> </div> </div> </form> |
Exemplo
Exemplificando, um tema com o resultado final com:
- Os campos do tipo input com fundo preto e cor branca
- As labels em negrito e cor bordô
- O títutlo do formuário com uma margem, cor e borda inferior
- Cada bloco de campo ter uma margem inferior, com espaçamento interno e uma borda vermelha
- Cor vermelho e tamanho da fonte para o asterisco de obrigatório
Para este resultado, o seguinte CSS deve ser criado:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
input { padding:0 15px !important; background-color:#000; color:#fff; }
label { font-weight:bold; color:#8B0000; }
.title-form-application { margin:20px; padding: 0 0px 10px; font-size: 1.5em; color: #006699; border-bottom: 1px dashed #ccc; }
.form-field { margin-bottom: 15px; border:1px solid red; padding:10px; }
.is-required { color:red; font-size:2em; } |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas