Histórico da Página
Índice
Índice | ||||||
---|---|---|---|---|---|---|
|
Personalização de Temas de Formulários
...
Este estilo pode ser personalizado 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 personalizado.
Deck of Cards | ||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||
|
Recomendações
Ao fazer o upload de temas é importante seguir as seguintes regras:
...
Abaixo estão cada uma das classes e estrutura de um formulário gerado a partir do editor.
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 do campo |
.required | Classe do asterisco em campos obrigatórios. |
.paragraph-is-required | Mensagem de obrigatório |
Em alguns casos é necessário utilizar "!important", pois são classes que já são utilizadas pela plataforma e podem ser sobrescritas.
...
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
<form class="t1" name="createFormComponents"> <h1 class="title-form-application">Formulário</h1> <div class="paragraph-is-required system-message-information alert alert-info" role="alert">Todos os campos com * são de preenchimento obrigatório.</div> <div class="form-field"> <div class="form-input"> <div class="form-group"> <label>Label textbox</label> <span class="required text-danger"><strong>*</strong></span> <input type="text" class="form-control" name="textbox0" value="" placeholder=""> </div> </div> </div> </form> |
...
Exemplo
A seguir criaremos um tema com um estilo personalizado:
Para este resultado, o seguinte CSS deve ser criado e cadastrado nos temas:
Bloco de código language css title exemplo.css linenumbers true .t3 .title-form-application { color: #fff !important; font-weight: bold !important; } .t3 { height: auto !important; min-height: 0 !important; padding: 0 5px !important; background-color: #591202; } .t3 input { margin-bottom: 0 !important; } .t3 .form-field { margin-bottom: 15px !important;} .t3 label {font-weight: normal; color: #f2a547; } .t3 .title-form-application { margin: 5px 5px 20px; padding: 0 0px 10px; font-size: 1.5em; font-weight: normal; color: #006699; border-bottom: 1px dashed #ccc;} .t3 input, .coffeeTheme textarea, .coffeeTheme select { background-color:#f6dec0 !important; border: 0px !important;} .t3 .required input, .required select, .required textarea { border-color: #eeabad !important; box-shadow: 0px 0px 5px rgba(255, 0, 0, .3) !important; border: 0px !important;} .t3 .is-required {display: none; color: #c43b1d; font-size: 1.2em; } .t3 .paragraph-is-required { margin: 0 5px 1em !important; }
- Toda personalização deve iniciar com a classe t + id. Assim, evita-se que as personalizações interfiram no estilo de outras páginas da plataforma., nesse exemplo, a classe é t3 pois o id do tema é 3.
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas