Histórico da Página
| HTML |
|---|
<div id="main-content" class="wiki-content group">
<h1 id="CustomizaçãodeTemasdeFormulários-Índice">Contents</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'>Form
theme customization</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>1.1</span> <a
href='#CustomizaçãodeTemasdeFormulários-Recomendações'>Recommendations </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> </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> </p>
<p> </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> </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> 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> </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>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> </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>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> </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>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> </p>
<p>
Click <strong>Save</strong>. After that, the theme is registered
and can already be used in the form editor.
</p>
<p> </p>
</div>
</div>
</div>
<!-- // .deck -->
<p> </p>
<h3 id="CustomizaçãodeTemasdeFormulários-Recomendações">Recommendations </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;"><form name="formulario">
<h1 |
Í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 Fluig.
| Deck of Cards | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||
|
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.
...
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 e podem ser sobescritas.
HTML
El 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<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 = "nomename" /> </div> </div> </form></pre> </div> </div> </form> |
Ejemplo
A seguir crearemos un tema con:
- Campos del tipo input con fondo negro y color blanco.
- Labels en negrito y color bordó.
- Título del formulario con un margen, color y borde inferior.
- Cada bloque de campo tendrá margen inferior, con espaciamiento interno y un borde rojo.
- Color rojo y tamaño de la fuente para el asterisco de obligatorio.
Para este resultado, el siguiente CSS se debe crear y registrar en los temas:
...
| language | css |
|---|---|
| title | exemplo.css |
| linenumbers | true |
...
<p> </p> <h3 id="CustomizaçãodeTemasdeFormulários-Exemplo">Example</h3> <p>Now, we'll create a theme with:</p> <ol> <li><em>Input</em> type fields with black background and white color.</li> <li><em>Labels</em> in bold and maroon color.</li> <li>Form title with a margin, color and bottom edge.</li> <li>Each block of field will have a bottom margin, with internal spacing and a red border.</li> <li>Red color and font size for the mandatory asterisk.</li> </ol> <p> </p> <p> <img class="confluence-embedded-image image-center" width="500" src="attachments/146965249/147095978.png" data-image-src="attachments/146965249/147095978.png"> </p> <p> </p> <ul> <li><p> <span>For this result, the following CSS must be created and registered on the themes:</span> </p> <div class="code panel pdl" style="border-width: 1px;"> <div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"> <b>exemplo.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> |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas