Índice

...

Personalização de Temas de Formulários

...

No editor de formulários, disponível no editor de processos, é possível selecionar um tema/ estilo personalizado para o formulário que está sendo criado.

Este estilo pode ser customizado 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.

Deck of Cards
history effectDuration 0.5 history false id samples false effectType fade
Card default true id Passo1 label Passo 1 effectType slide    Acessar o Painel de Controle pelo menu lateral.   Card id Passo2 label Passo 2 effectType slide   Clique na aba de Processos Verifique no agrupador Desenvolvimento e após clique no item Temas de Formulários. Image Removed   Image Added Card id Passo3 label Passo 3 effectType slide   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 (quando ativo, o tema é disponibilizado para seleção na edição de formulários) e tema padrão que é o tema pré selecionado ao criar um formulário. Para adicionar um tema novo, clique em Adicionar. Image Removed Image Added   Card id Passo4 label Passo 4 effectType slide   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. Image Modified  Clique em Salvar. após Após isto o tema está cadastrado e já pode ser utilizado no editor de formulários.

Recomendações 

Recomendações 

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

...

É 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 do "!important", pois são classes que já são utilizadas pelo fluig pela plataforma e podem ser sobescritassobrescritas.

HTML

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

<form class="t1" name="formulariocreateFormComponents">
	<h1 class="title-form-application">Formulario Exemplo</h1>">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">
		<label<div class="labelform-field-properties">Campo Nome</label>input">
		<span	<div class="isform-requiredgroup">
			<b>*</b>	<label>Label textbox</label>
		</span>
		<div<span class="formrequired text-input">
danger"><strong>*</strong></span>
				<input type="text" class="form-control" name="nometextbox0" value="" />placeholder="">
			</div>
		</div>
	</div>
</form>

...

Exemplo

Exemplificando, A seguir criaremos 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

Image Removed

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
  input { padding:0 15px.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:#000; color:#fff #591202; } .t3 input { margin-bottom: 0 !important; } .t3 .form-field { margin-bottom: 15px !important;} .t3 label { font-weight:bold normal; color:#8B0000 #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; } .form-fieldt3 input, .coffeeTheme textarea, .coffeeTheme select { marginbackground-bottomcolor:#f6dec0 15px!important; border:1px solid red; padding:10px; } . 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:red #c43b1d; font-size: 1.2em; } .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.