Histórico da Página
Índice
Í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.
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.
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 | ||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||
|
Recomendações
Ao fazer o upload de temas é importante seguir as seguintes regras:
- O tema deve possuir sempre uma regra por linha.
- Todas as propriedades de cada classe tem que estar na mesma linha, não deve-se pular linha, para melhor interpretação do editor.
- O arquivo .css deve possuir todas as linhas com seletores, não se deve possuir linhas em branco.
- 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:
- El tema debe poseer siempre una regla por línea.
- 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.
- El archivo .css debe poseer todas las líneas con selectores, no se debe poseer líneas en blanco.
- 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.
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
Exemplo
A seguir criaremos um crearemos un tema comcon:
- Campos do tipo input com fundo preto e cor brancadel tipo input 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; }
...