Índice

Personalización de Temas de Formularios

En el editor de formularios, disponible en el editor de 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. 

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.

Recomendaciones 

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

...

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

El 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

A seguir crearemos un tema con:

1. Campos del tipo input con fondo negro y color blanco.
2. Labels en negrito y color bordó.
3. Título del formulario con un margen, color y borde inferior.
4. Cada bloque de campo tendrá margen inferior, con espaciamiento interno y un borde rojo.
5. Color rojo y tamaño de la fuente para el asterisco de obligatorio.

...

• Para este resultado, 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; }