Índice

...

Personalización de Temas de

...

Formularios

No En el editor de formulários, disponível no formularios, disponible en el editor de processos, é possível selecionar um 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.

Image Removed

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

procesos, es posible seleccionar un template para el formulario que se está creando. Este estilo se puede personalizar por cualquier usuario que posee permiso al panel de control.

Image Added

Siga, navegando en las pestañas a continuación, el paso a paso para la creación de un nuevo tema personalizad en el TOTVS Fluig Plataforma. 

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.

...

Recomendaciones 

Al hacer el upload de temas es importante seguir las siguientes reglas:

1. El tema debe poseer siempre una regla por línea.
2. Todas las propiedades de cada clase tienen que estar en la misma línea, no se debe saltar la línea, para una mejor interpretación del editor.
3. El archivo .css debe poseer todas las líneas con selectores, no se debe poseer líneas en blanco.
4. Todas las clases, elementos e identificadores se pueden modificar, siempre que se respeten las reglas anteriores.

Es posible obtener un ejemplo de una hoja de estilos accediendo a la página de Temas, en el Panel de Control.

A seguir están cada una de las clases y estructura de un formulario generado a partir del editor.

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

HTML

O HTML gerado automaticamente pelo editor de formulários com apenas um campo, fica com a seguinte estruturaEl HTML generado automáticamente por el editor de formularios con apenas un campo, queda con la siguiente estructura:

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

...

Ejemplo

Exemplo

A seguir criaremos um crearemos un tema comcon:

1. Campos do tipo input com fundo preto e cor brancadel tipo input con fondo negro y color blanco.
2. Labels em negrito e cor bordô. en negrito y color bordó.
3. Título del formulario con un margen, color y borde Títutlo do formulário com uma margem, cor e borda inferior.
4. Cada bloco bloque de campo terá margem tendrá margen inferior, com espaçamento interno e uma borda vermelha.
5. Cor vermelho e tamanho da fonte para o asterisco de obrigatório.

Image Removed

1. con espaciamiento interno y un borde rojo.
2. Color rojo y tamaño de la fuente para el asterisco de obligatorio.

Image Added

• Para este resultado, o seguinte CSS deve ser criado e cadastrado nos el siguiente CSS se debe crear y registrar en los 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 { 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; }

...