TOTVS Fluig

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 20

changes.mady.by.user Samara Buettgen

Gravado em

comparado com

Nova versão Atual

changes.mady.by.user Samara Buettgen

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

Este estilo pode ser personalizado por qualquer usuário que possui permissão ao painel de controle.


Image Modified



Acompanhe, navegando nas abas a seguir, o passo a passo para a criação de um novo tema personalizado.

Deck of Cards
effectDuration0.5
historyfalse
idsamples
effectTypefade
Card
defaulttrue
idPasso1
labelPasso 1
effectTypeslide


  •  Acessar o Painel de Controle pelo menu lateral.


Card
idPasso2
labelPasso 2
effectTypeslide


  • Verifique no agrupador Desenvolvimento e após clique no item Temas de Formulários.

Card
idPasso3
labelPasso 3
effectTypeslide


  • Na tela é possível realizar o download de temas já cadastrados, definir se o tema está ou não está ativo (quando ativo, o tema é disponibilizado para seleção na edição de formulários) e tema padrão que é o tema pré selecionado ao criar um formulário. Para adicionar um tema novo, clique em Adicionar.

Image Modified

Card
idPasso4
labelPasso 4
effectTypeslide


  • Na tela para adicionar um estilo novo, é necessário preencher um código ao tema, a descrição do tema e selecionar o arquivo CSS para realizar o upload.

Image Modified


  • Clique em Salvar. Após isto o tema está cadastrado e já pode ser utilizado no editor de formulários.



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
languagehtml/xml
titleFormulário
linenumberstrue
<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:

Image Modified


  • Para este resultado, o seguinte CSS deve ser criado e cadastrado nos temas:

    Bloco de código
    languagecss
    titleexemplo.css
    linenumberstrue
    .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. 

...