Histórico da Página
Índice
Í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.
Deck of Cards | ||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||
|
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.
Clase | Descripción |
---|---|
.form-field | DIV que encuadra todo campo del formulario |
.form-input | DIV principal apenas del campo (no encuadra la label) |
.is-required | Clase del asterisco en campos obligatorios. |
.label-field-properties | Label de los campos |
.paragraph-is-required | Mensaje de obligatorio |
.title-form-application | Clase del título del formulario |
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:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
<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:
- Campos del tipo input con fondo negro y color blanco.
- Labels en negrito y color bordó.
- Título del formulario con un margen, color y borde inferior.
- Cada bloque de campo tendrá margen inferior, con espaciamiento interno y un borde rojo.
- 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; }