Histórico da Página
...
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 Recomendações
Ao fazer o upload de temas é importante seguir as seguintes regras:
...
Em alguns casos é necessário utilizar "!important", pois são classes que já são utilizadas pela plataforma e podem ser sobrescritas.
HTML
O HTML gerado automaticamente pelo editor de formulários com apenas um campo, fica com a seguinte estrutura:
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