Índice

 

Customização de Temas de Formulários

No editor de formulários, disponível no editor de processos, é possível selecionar um tema/estilo 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.

 

 

  •  Acessar o Painel de Controle pelo menu lateral.

 

 

  • Clique na aba de Processos e após clique no item Temas de Formulários.

 

 

  • Na tela é possível realizar o download de temas já cadastrados, definir se o tema está ou não está ativo para aparecer para o usuário e tema padrão que é o tema pré selecionado ao criar um formulário. Para adicionar um tema novo, clique em Adicionar.

 

 

  • Na tela para adicionar um estilo novo, é necessário preencher um código ao tema, a descrição do tema e selecionar o arquivo CSS para realizar o upload.

 

Clique em Salvar. após isto o tema está cadastrado e já pode ser utilizado no editor de formulários.

 

 

Recomendações 

Ao fazer o upload de temas é importante seguir as seguintes regras:

  1. O tema deve possuir sempre uma regra por linha.
  2. Todas as propriedades de cada classe tem que estar na mesma linha, não deve-se pular linha, para melhor interpretação do editor.
  3. O arquivo .css deve possuir todas as linhas com seletores, não se deve possuir linhas em branco.
  4. 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.

ClasseDescrição
.title-form-applicationClasse do título do formulário
.form-fieldDIV que enquadra todo campo do formulário
.form-inputDIV pai apenas do campo (não enquadra a label)
.label-field-propertiesLabel dos campos
.is-requiredClasse do asterisco em campos obrigatórios.
.paragraph-is-requiredMensagem de obrigatório

Em alguns casos é necessário utilizar do !important, pois são classes que já são utilizadas pelo fluig e podem ser sobescritas.


HTML

O HTML gerado automaticamente pelo editor de formulários com apenas um campo, fica com a seguinte estrutura:

<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:

  1. Os campos do tipo input com fundo preto e cor branca
  2. As labels em negrito e cor bordô
  3. O títutlo do formuário com uma margem, cor e borda inferior
  4. Cada bloco de campo ter uma margem inferior, com espaçamento interno e uma borda vermelha
  5. Cor vermelho e tamanho da fonte para o asterisco de obrigatório