<form name="formulario">
	<h1

<div id="main-content" class="wiki-content group">
	<h1 id="CustomizaçãodeTemasdeFormulários-Índice">Contents</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'>Form
					theme customization</a>
				<ul class='toc-indentation'>
					<li><span class='TOCOutline'>1.1</span> <a
						href='#CustomizaçãodeTemasdeFormulários-Recomendações'>Recommendations&#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'>Example</a></li>
				</ul></li>
		</ul>
	</div>
	</p>
	<h1
		id="CustomizaçãodeTemasdeFormulários-CustomizaçãodeTemasdeFormulários">Form
		theme customization</h1>
	<p>In the form editor, available in the process editor, you can
		select a template for the form that is being created. This style can
		be customized by any user who has permission to access the control
		panel.</p>
	<p>&#160;</p>
	<p>
		<img class="confluence-embedded-image image-center" width="500"
			src="attachments/146965249/147096252.png"
			data-image-src="attachments/146965249/147096252.png">
	</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>Now browse through the tabs below to follow the step-by-step
		instructions to create a new custom theme in 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;Access the <strong>Control panel</strong> from the
						side menu.
					</li>
				</ul>
				<p>
					<img class="confluence-embedded-image image-center"
						src="attachments/146965249/147096108.png"
						data-image-src="attachments/146965249/147096108.png">
				</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>Click on the <strong>Processes</strong> tab and then click
						the <strong>Form themes</strong> item.
					</li>
				</ul>
				<p>
					<img class="confluence-embedded-image image-center"
						src="attachments/146965249/147096109.png"
						data-image-src="attachments/146965249/147096109.png">
				</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>On the screen, it is possible to <em>download</em> themes
						already registered, define whether the theme is or is not active
						to appear to the user and the standard theme which is the
						pre-selected theme when creating a form. To add a new theme, click
						<strong>Add</strong>.
					</li>
				</ul>
				<p>
					<img class="confluence-embedded-image image-center" width="500"
						src="attachments/146965249/147096251.png"
						data-image-src="attachments/146965249/147096251.png">
				</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>On the screen, to add a new style, you are required to
						fill in a code to the theme, the description of the theme and
						select the CSS file to execute the <em>upload</em>.
					</li>
				</ul>
				<p>
					<img class="confluence-embedded-image image-center" width="500"
						src="attachments/146965249/147096111.png"
						data-image-src="attachments/146965249/147096111.png">
				</p>
				<p>&#160;</p>
				<p>
					Click <strong>Save</strong>. After that, the theme is registered
					and can already be used in the form editor.
				</p>
				<p>&#160;</p>
			</div>
		</div>
	</div>
	<!-- // .deck -->
	<p>&#160;</p>
	<h3 id="CustomizaçãodeTemasdeFormulários-Recomendações">Recommendations&#160;</h3>
	<p>When uploading themes, it is important to follow these rules:</p>
	<ol>
		<li>The theme must always have a rule per line.</li>
		<li>All the properties of each class have to be on the same line;
			for better interpretation of the editor, lines should not be skipped.</li>
		<li>The <em>.CSS</em> file should have all lines with selectors
			and it cannot have blank lines.
		</li>
		<li>All classes, elements and identifiers can be modified,
			provided that the rules mentioned above are followed.</li>
	</ol>
	<p>It is possible to see an example of a style sheet by using the
		Themes page in the control panel.</p>
	<p>
		<br />Below are each of the classes and structure of a form generated
		from the editor.
	</p>
	<div class="table-wrap">
		<table class="confluenceTable">
			<tbody>
				<tr>
					<th class="confluenceTh">Class</th>
					<th class="confluenceTh">Description</th>
				</tr>
				<tr>
					<td class="confluenceTd">.title-form-application</td>
					<td class="confluenceTd">Form title class</td>
				</tr>
				<tr>
					<td class="confluenceTd">.form-field</td>
					<td class="confluenceTd">DIV that fits all form fields</td>
				</tr>
				<tr>
					<td class="confluenceTd">.form-input</td>
					<td class="confluenceTd">Parent page DIV only for the field
						(does not fit the label)</td>
				</tr>
				<tr>
					<td class="confluenceTd">.label-field-properties</td>
					<td class="confluenceTd"><em>Label</em> of the fields</td>
				</tr>
				<tr>
					<td class="confluenceTd">.is-required</td>
					<td class="confluenceTd">Class of the asterisk on mandatory
						fields.</td>
				</tr>
				<tr>
					<td class="confluenceTd">. paragraph-is-required</td>
					<td class="confluenceTd">Mandatory message</td>
				</tr>
			</tbody>
		</table>
	</div>
	<p>
		<span style="font-size: 10.0pt; line-height: 13.0pt;">In some
			cases, it is necessary to use the !important, as these are classes
			that are already used by Fluig and can be subscribed.</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>The HTML automatically generated by the form editor with only
		one field gets the following structure:</p>
	<div class="code panel pdl" style="border-width: 1px;">
		<div class="codeHeader panelHeader pdl"
			style="border-bottom-width: 1px;">
			<b>Form</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 class="title-form-application">Formulario Exemplo&lt;Exemplo</h1>
	&lt;div<div class="form-field">
		&lt;label<label class="label-field-properties">Campo Nome&lt;Nome</label>
		&lt;span<span class="is-required">
			&lt;b>*&lt;<b>*</b>
		&lt;</span>
		&lt;div<div class="form-input">
			&lt;<input input type = "text" name = "namenome" />
		&lt;/div>
	&lt;/div>
&lt;/form></pre>
		</div>
	</div>
	<p>&#160;</p>
	<h3 id="CustomizaçãodeTemasdeFormulários-Exemplo">Example</h3>
	<p>Now, </form>