Í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.

Image Added

Acompanhe, navegando nas abas a seguir, o passo a passo para a criação de um novo tema personalizado.

Recomendações 

Ao fazer o upload de temas é necessário é 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.

...

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:

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

Image Added

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

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

Image Removed

Para melhor entendimento, abaixo está um HTML simples gerado pelo editor:

...

...

• .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.