Histórico da Página
...
No editor de formulários, disponível no editor de processos, é possível selecionar um tema/estilo template para o formulário que está sendo criado. Este estilo pode ser customizado 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 customizado no Fluig.
Deck of Cards | ||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||
|
...
É 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.
...
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, A seguir criaremos um tema com o resultado final com:
- Os campos Campos do tipo input com fundo preto e cor branca.
- As labels Labels em negrito e cor bordô.
- O títutlo Títutlo do formuário formulário com uma margem, cor e borda inferior.
- Cada bloco de campo ter uma terá 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 e cadastrado nos temas:
Bloco de código language css title exemplo.css linenumbers true input { padding:0 15px !important; background-color:#000; color:#fff; } label { font-weight:bold; color:#8B0000; } .title-form-application 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; }