Histórico da Página
Índice
Índice | ||||||
---|---|---|---|---|---|---|
|
Personalização de Temas de Formulários
...
No editor de formulários, disponível no editor de processos, é possível selecionar um estilo personalizado para o formulário que está sendo criado.
Este estilo pode ser personalizado por qualquer usuário que possui permissão ao painel de controle.
Acompanhe, navegando nas abas a seguir, o passo a passo para a criação de um novo tema personalizado.
Deck of Cards | ||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||
|
Recomendações
Ao fazer o upload de temas é necessário é importante seguir as seguintes regras:
- O tema deve possuir sempre uma regra por linha.
- Todas as propriedades de cada classe tem que estar na mesma linha, não deve-se pular linha, para melhor interpretação do editor.
- O arquivo .css deve possuir todas as linhas com seletores, não se deve possuir linhas em branco.
- Todas as classes, elementos e identificadores podem ser modificados, desde que respeitando as regras acima.
É possível obter um exemplo de uma folha de estilos acessando a página de Temas, no Painel de Controle.
Abaixo estão cada uma das classes e estrutura de um formulário gerado a partir do editor.
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 |
do campo |
. |
required | Classe do asterisco em campos obrigatórios. |
.paragraph-is-required | Mensagem de obrigatório |
Em alguns casos é necessário utilizar "!important", pois são classes que já são utilizadas pela plataforma e podem ser sobrescritas.
HTML
O HTML gerado automaticamente pelo editor de formulários com apenas um campo, fica com a seguinte estrutura:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
<form class="t1" name="createFormComponents">
<h1 class="title-form-application">Formulário</h1>
<div class="paragraph-is-required system-message-information alert alert-info" role="alert">Todos os campos com * são de preenchimento obrigatório.</div>
<div class="form-field">
<div class="form-input">
<div class="form-group">
<label>Label textbox</label>
<span class="required text-danger"><strong>*</strong></span>
<input type="text" class="form-control" name="textbox0" value="" placeholder="">
</div>
</div>
</div>
</form> |
Exemplo
A seguir criaremos um tema com um estilo personalizado:
Para este resultado, o seguinte CSS deve ser criado e cadastrado nos temas
...
:
Bloco de código language css title exemplo.css linenumbers true
...
.t3 .title-form-application { color: #fff !important; font-weight: bold !important; } .t3 { height: auto !important; min-height: 0 !important; padding: 0 5px !important; background-color:
...
#591202; } .t3 input { margin-bottom: 0 !important; } .t3 .form-field { margin-bottom: 15px !important;} .t3 label {font-weight:
...
normal; color:
...
#f2a547; } .t3 .title-form-application { margin: 5px 5px 20px; padding: 0 0px 10px; font-size: 1.5em; font-weight: normal; color: #006699; border-bottom: 1px dashed #ccc;
...
}
...
.t3 input, .coffeeTheme textarea, .coffeeTheme select {
...
background-color:#f6dec0 !important; border: 0px !important;} .t3 .required input, .required select, .required textarea { border-color: #eeabad !important; box-shadow: 0px 0px 5px rgba(255, 0, 0, .3) !important; border: 0px !important;} .t3 .is-required {display: none; color:
...
#c43b1d; font-size: 1.2em; }
...
Em alguns casos é necessário utilizar do !important, pois são classes que já são utilizadas pelo fluig e podem ser sobescritas.
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
Para melhor entendimento, abaixo está um HTML simples gerado pelo editor:
...
language | html/xml |
---|---|
title | Formulário |
linenumbers | true |
...
.t3 .paragraph-is-required { margin: 0 5px 1em !important; }
- Toda personalização deve iniciar com a classe t + id. Assim, evita-se que as personalizações interfiram no estilo de outras páginas da plataforma., nesse exemplo, a classe é t3 pois o id do tema é 3.