Histórico da Página
HTML |
---|
<div id="main-content" class="wiki-content group">
<h1 id="CustomizaçãodeTemasdeFormulários-Índice">Índice</h1>
<p> </p>
<p>
<style type='text/css'>/*<![CDATA[*/
div.rbtoc1412695808727 {
padding: 0px;
}
div.rbtoc1412695808727 ul {
list-style: none;
margin-left: 0px;
}
div.rbtoc1412695808727 li {
margin-left: 0px;
padding-left: 0px;
}
/*]]>*/
</style>
<div class='toc-macro rbtoc1412695808727'>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>1</span> <a
href='#CustomizaçãodeTemasdeFormulários-CustomizaçãodeTemasdeFormulários'>Personalización
de Temas de Formularios</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>1.1</span> <a
href='#CustomizaçãodeTemasdeFormulários-Recomendações'>Recomendaciones </a></li>
<li><span class='TOCOutline'>1.2</span> <a
href='#CustomizaçãodeTemasdeFormulários-HTML'>HTML</a></li>
<li><span class='TOCOutline'>1.3</span> <a
href='#CustomizaçãodeTemasdeFormulários-Exemplo'>Ejemplo</a></li>
</ul></li>
</ul>
</div>
</p>
<h1
id="CustomizaçãodeTemasdeFormulários-CustomizaçãodeTemasdeFormulários">Personalización
de Temas de Formularios</h1>
<p>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.</p>
<p> </p>
<p>
<img class="confluence-embedded-image image-center" width="500"
src="http://www.tdn.totvs.com/download/attachments/146965249/form.PNG?version=1&modificationDate=1404237253000&api=v2"
data-image-src="http://www.tdn.totvs.com/download/attachments/146965249/form.PNG?version=1&modificationDate=1404237253000&api=v2">
</p>
<p> </p>
<p> </p>
<p>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.</p>
<p> </p>
<a name="composition-deck-samples"></a>
<div id="samples" class="deck" history="false" loopcards="false"
effecttype="fade" effectduration="0.5" nextafter="0.0">
<ul class="tab-navigation"></ul>
<!-- // .tab-navigation -->
<div class="deck-cards panel" style="">
<div id="Passo1" class="deck-card active-pane" style="" cssclass=""
accesskey="" label="Passo 1" title="" nextafter="0"
effecttype="slide" effectduration="-1.0">
<p> </p>
<ul>
<li> Acceder el <strong>Panel de Control </strong>por el
menú lateral.
</li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="http://www.tdn.totvs.com/download/attachments/146965249/p1.PNG?version=1&modificationDate=1404223591000&api=v2"
data-image-src="http://www.tdn.totvs.com/download/attachments/146965249/p1.PNG?version=1&modificationDate=1404223591000&api=v2">
</p>
<p> </p>
</div>
<div id="Passo2" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 2" title="" nextafter="0" effecttype="slide"
effectduration="-1.0">
<p> </p>
<ul>
<li>Haga clic en la pestaña de <strong>Procesos</strong> y
después haga clic en el ítem <strong>Temas de Formularios</strong>.
</li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="http://www.tdn.totvs.com/download/attachments/146965249/p2.PNG?version=1&modificationDate=1404223646000&api=v2"
data-image-src="http://www.tdn.totvs.com/download/attachments/146965249/p2.PNG?version=1&modificationDate=1404223646000&api=v2">
</p>
<p> </p>
</div>
<div id="Passo3" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 3" title="" nextafter="0" effecttype="slide"
effectduration="-1.0">
<p> </p>
<ul>
<li>En la pantalla es posible realizar el <em>download</em> de
temas ya registrados, definir si el tema está o no está activo
para aparecer para el usuario y tema estándar que es el tema
preseleccionado al crear un formulario. Para agregar un tema
nuevo, haga clic en <strong>Agregar</strong>.
</li>
</ul>
<p>
<img class="confluence-embedded-image image-center" width="500"
src="http://www.tdn.totvs.com/download/attachments/146965249/11.PNG?version=1&modificationDate=1404236857000&api=v2"
data-image-src="http://www.tdn.totvs.com/download/attachments/146965249/11.PNG?version=1&modificationDate=1404236857000&api=v2">
</p>
<p> </p>
</div>
<div id="Passo4" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 4" title="" nextafter="0" effecttype="slide"
effectduration="-1.0">
<p> </p>
<ul>
<li>En la pantalla para agregar un estilo nuevo, es necesario
rellenar un código al tema, la descripción del tema y seleccionar
el archivo CSS para realizar el <em>upload</em>.
</li>
</ul>
<p>
<img class="confluence-embedded-image image-center" width="500"
src="http://www.tdn.totvs.com/download/attachments/146965249/p4.PNG?version=1&modificationDate=1404223946000&api=v2"
data-image-src="http://www.tdn.totvs.com/download/attachments/146965249/p4.PNG?version=1&modificationDate=1404223946000&api=v2">
</p>
<p> </p>
<p>
Haga clic en <strong>Guardar</strong>. después de esto el tema está
registrado y ya se puede utilizar en el editor de formularios.
</p>
<p> </p>
</div>
</div>
</div>
<!-- // .deck -->
<p> </p>
<h3 id="CustomizaçãodeTemasdeFormulários-Recomendações">Recomendaciones </h3>
<p>Al hacer el upload de temas es importante seguir las siguientes
reglas:</p>
<ol>
<li>El tema debe poseer siempre una regla por línea.</li>
<li>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.</li>
<li>El archivo <em>.css</em> debe poseer todas las líneas con
selectores, no se debe poseer líneas en blanco.
</li>
<li>Todas las clases, elementos e identificadores se pueden
modificar, siempre que se respeten las reglas anteriores.</li>
</ol>
<p>Es posible obtener un ejemplo de una hoja de estilos accediendo
a la página de Temas, en el Panel de Control.</p>
<p>
<br />A seguir están cada una de las clases y estructura de un
formulario generado a partir del editor.
</p>
<div class="table-wrap">
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">Clase</th>
<th class="confluenceTh">Descripción</th>
</tr>
<tr>
<td class="confluenceTd">.title-form-application</td>
<td class="confluenceTd">Clase del título del formulario</td>
</tr>
<tr>
<td class="confluenceTd">.form-field</td>
<td class="confluenceTd">DIV que encuadra todo campo del
formulario</td>
</tr>
<tr>
<td class="confluenceTd">.form-input</td>
<td class="confluenceTd">DIV principal apenas del campo (no
encuadra la label)</td>
</tr>
<tr>
<td class="confluenceTd">.label-field-properties</td>
<td class="confluenceTd"><em>Label</em> de los campos</td>
</tr>
<tr>
<td class="confluenceTd">.is-required</td>
<td class="confluenceTd">Clase del asterisco en campos
obligatorios.</td>
</tr>
<tr>
<td class="confluenceTd">.paragraph-is-required</td>
<td class="confluenceTd">Mensaje de obligatorio</td>
</tr>
</tbody>
</table>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">En
algunos casos es necesario utilizar del !important, pues son clases
que ya se utilizan por el fluig y se pueden sobrescribir.</span>
</p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></span>
</p>
<h3 id="CustomizaçãodeTemasdeFormulários-HTML">HTML</h3>
<p>El HTML generado automáticamente por el editor de formularios
con apenas un campo, queda con la siguiente estructura:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>Formulario</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: true"
style="font-size: 12px;"><form name="formulario">
<h1 |
Índice
Índice | ||||||
---|---|---|---|---|---|---|
|
Customização de Temas de Formulários
No editor de formulários, disponível no 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.
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.
...
Classe | Descrição |
---|---|
.title-form-application | Classe do título do formulário |
.form-field | DIV que enquadra todo campo do formulário |
.form-input | DIV pai apenas do campo (não enquadra a label) |
.label-field-properties | Label dos campos |
.is-required | Classe do asterisco em campos obrigatórios. |
.paragraph-is-required | Mensagem de obrigatório |
Em alguns casos é necessário utilizar do !important, pois são classes que já são utilizadas pelo fluig e podem ser sobescritas.
HTML
O HTML gerado automaticamente pelo editor de formulários com apenas um campo, fica com a seguinte estrutura:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
<form name="formulario"> <h1 class="title-form-application">Formulario Exemplo<Exemplo</h1> <div<div class="form-field"> <label<label class="label-field-properties">Campo Nome<Nome</label> <span<span class="is-required"> <b>*<<b>*</b> <</span> <div<div class="form-input"> <input<input type="text" name="nome" /> </div> </div> </form></pre> </div> </div> </form> |
Exemplo
A seguir criaremos um tema com:
- Campos do tipo input com fundo preto e cor branca.
- Labels em negrito e cor bordô.
- Títutlo do formulário com uma margem, cor e borda inferior.
- Cada bloco de campo terá margem inferior, com espaçamento interno e uma borda vermelha.
- Cor vermelho e tamanho da fonte para o asterisco de obrigatório.
Para este resultado, o seguinte CSS deve ser criado e cadastrado nos temas:
...
language | css |
---|---|
title | exemplo.css |
linenumbers | true |
...
<p> </p> <h3 id="CustomizaçãodeTemasdeFormulários-Exemplo">Ejemplo</h3> <p>A seguir crearemos un tema con:</p> <ol> <li>Campos del tipo <em>input</em> con fondo negro y color blanco. </li> <li><em>Labels</em> en negrito y color bordó.</li> <li>Título del formulario con un margen, color y borde inferior.</li> <li>Cada bloque de campo tendrá margen inferior, con espaciamiento interno y un borde rojo.</li> <li>Color rojo y tamaño de la fuente para el asterisco de obligatorio.</li> </ol> <p> </p> <p> <img class="confluence-embedded-image image-center" width="500" src="http://www.tdn.totvs.com/download/attachments/146965249/tema.PNG?version=1&modificationDate=1404156739000&api=v2" data-image-src="http://www.tdn.totvs.com/download/attachments/146965249/tema.PNG?version=1&modificationDate=1404156739000&api=v2"> </p> <p> </p> <ul> <li><p> <span>Para este resultado, el siguiente CSS se debe crear y registrar en los temas:</span> </p> <div class="code panel pdl" style="border-width: 1px;"> <div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"> <b>ejemplo.css</b> </div> <div class="codeContent panelContent pdl"> <pre class="theme: Confluence; brush: css; gutter: true" style="font-size: 12px;">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; } |
...
</pre>
</div>
</div></li>
</ul>
<p> </p>
</div> |