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.
Now browse through the tabs below to follow the step-by-step instructions to create a new custom theme in TOTVS Fluig Platform.
|
When uploading themes, it is important to follow these rules:
It is possible to see an example of a style sheet by using the Themes page in the control panel.
Below are each of the classes and structure of a form generated from the editor.
Class | Description |
---|---|
. paragraph-is-required | Mandatory message |
.form-field | DIV that fits all form fields |
.form-input | Parent page DIV only for the field (does not fit the label) |
.is-required | Class of the asterisk on mandatory fields. |
.label-field-properties | Label of the fields |
.title-form-application | Form title class |
In some cases, it is necessary to use the !important, as these are classes that are already used by TOTVS Fluig Platform and can be subscribed.
The HTML automatically generated by the form editor with only one field gets the following structure:
<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> |
Now, we'll create a theme with:
For this result, the following CSS must be created and registered on the themes:
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; } |