HTML


<div id="main-content" class="wiki-content group">
	<h1 id="CustomizaçãodeTemasdeFormulários-Índice">Índice</h1>
	<p>&#160;</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&#160;</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>&#160;</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>&#160;</p>
	<p>&#160;</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>&#160;</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>&#160;</p>
				<ul>
					<li>&#160;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>&#160;</p>
			</div>
			<div id="Passo2" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 2" title="" nextafter="0" effecttype="slide"
				effectduration="-1.0">
				<p>&#160;</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>&#160;</p>
			</div>
			<div id="Passo3" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 3" title="" nextafter="0" effecttype="slide"
				effectduration="-1.0">
				<p>&#160;</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>&#160;</p>
			</div>
			<div id="Passo4" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 4" title="" nextafter="0" effecttype="slide"
				effectduration="-1.0">
				<p>&#160;</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>&#160;</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>&#160;</p>
			</div>
		</div>
	</div>
	<!-- // .deck -->
	<p>&#160;</p>
	<h3 id="CustomizaçãodeTemasdeFormulários-Recomendações">Recomendaciones&#160;</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;">&lt;form name="formulario">
	&lt;h1

Índice

outline	true
style	none
exclude	.*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.

Image Removed

Acompanhe, navegando nas abas a seguir, o passo a passo para a criação de um novo tema customizado no Fluig.

Deck of Cards

effectDuration	0.5
id	samples
history	false
effectType	fade

Card

default	true
id	Passo1
label	Passo 1
effectType	slide

Acessar o Painel de Controle pelo menu lateral.

Image Removed

Card

id	Passo2
label	Passo 2
effectType	slide

Clique na aba de Processos e após clique no item Temas de Formulários.

Image Removed

Card

id	Passo3
label	Passo 3
effectType	slide

Na tela é possível realizar o download de temas já cadastrados, definir se o tema está ou não está ativo para aparecer para o usuário e tema padrão que é o tema pré selecionado ao criar um formulário. Para adicionar um tema novo, clique em Adicionar.

Image Removed

Card

id	Passo4
label	Passo 4
effectType	slide

Na tela para adicionar um estilo novo, é necessário preencher um código ao tema, a descrição do tema e selecionar o arquivo CSS para realizar o upload.

Image Removed

Clique em Salvar. após isto o tema está cadastrado e já pode ser utilizado no editor de formulários.

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

language	html/xml
title	Formulário
linenumbers	true

<form name="formulario">
	<h1 class="title-form-application">Formulario Exemplo<Exemplo&lt;/h1>
	<div&lt;div class="form-field">
		<label&lt;label class="label-field-properties">Campo Nome<Nome&lt;/label>
		<span&lt;span class="is-required">
			<b>*<&lt;b>*&lt;/b>
		<&lt;/span>
		<div&lt;div class="form-input">
			<input&lt;input type="text" name="nome" />
		&lt;/div>
	&lt;/div>
&lt;/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.

Image Removed

Para este resultado, o seguinte CSS deve ser criado e cadastrado nos temas:

...

language	css
title	exemplo.css
linenumbers	true

...

	<p>&#160;</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>&#160;</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>&#160;</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>&#160;</p>
</div>

Árvore de páginas

Versões comparadas

Versão antiga 1

Nova versão 2

Chave

Índice

Customização de Temas de Formulários

Recomendações

HTML

Exemplo

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 1

Nova versão 2

Chave

Índice

Customização de Temas de Formulários

Recomendações

HTML

Exemplo