Índice

...

Index

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.

Image Removed

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

Form theme customization

In the form editor, available in the process editor, you can select a template for the form that is being created. This style can be customized by any user who has permission to access the control panel.

Image Added

Now browse through the tabs below to follow the step-by-step instructions to create a new custom theme in TOTVS Fluig Platform. 

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.

...

Recommendations 

When uploading themes, it is important to follow these rules:

1. The theme must always have a rule per line.
2. All the properties of each class have to be on the same line; for better interpretation of the editor, lines should not be skipped.
3. The .CSS file should have all lines with selectors and it cannot have blank lines.
4. All classes, elements and identifiers can be modified, provided that the rules mentioned above are followed.

It is possible to see an example of a style sheet by using the Themes page in the control panel.

Below are each of the classes and structure of a form generated from the editor.

In some cases, it is necessary to use the !important, as these are classes that are already used by TOTVS Fluig Platform and can be subscribedEm alguns casos é necessário utilizar do !important, pois são classes que já são utilizadas pelo fluig e podem ser sobescritas.

HTML

El HTML generado automáticamente por el editor de formularios con apenas un campo, queda con la siguiente estructuraThe HTML automatically generated by the form editor with only one field gets the following structure:

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

Image Removed

Example

Now, we'll create a theme with:

1. Input type fields with black background and white color.
2. Labels in bold and maroon color.
3. Form title with a margin, color and bottom edge.
4. Each block of field will have a bottom margin, with internal spacing and a red border.
5. Red color and font size for the mandatory asterisk.

Image Added

• For this result, the following CSS must be created and registered on the themesPara 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; }