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
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:
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 criaremos um crearemos un tema comcon:
- Campos do del tipo input com fundo preto e cor branca con fondo negro y color blanco.
- Labels em negrito e cor bordô. en negrito y color bordó.
- Título del formulario con un margen, color y borde Títutlo do formulário com uma margem, cor e borda inferior.
- Cada bloco bloque de campo terá margem tendrá margen inferior, com espaçamento interno e uma borda vermelha.
- Cor vermelho e tamanho da fonte para o asterisco de obrigatório.
- con espaciamiento interno y un borde rojo.
- Color rojo y tamaño de la fuente para el asterisco de obligatorio.
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; }