Ajuda:Guia de Estilo: mudanças entre as edições

Edição das 02h53min de 1 de dezembro de 2025

Este guia documenta os componentes visuais do Celta Wiki Framework. Utilize estes padrões para manter a consistência, agilidade e beleza da documentação.

1. Cabeçalho (Obrigatório)

Toda página deve iniciar com o componente de cabeçalho para gerar o breadcrumb (navegação) e o título padrão.

Opção A: Padrão (Manuais)

Gera a caixa azul com título. Ideal para documentações.

{{Cabecalho
 | [[Módulo Pai]] › [[Sub-rotina]]
 | Título da Página
}}

Opção B: Invisível (Dashboards)

Gera apenas o breadcrumb. Use em páginas com design personalizado.

{{Cabecalho
 | [[Módulo Pai]]
 | no
}}

2. Caixas de Aviso (Notas)

Use o template


 Nota

para destacar informações. Agora possuímos 4 cores semânticas.

Sintaxe

{{Nota | TIPO | TÍTULO | Seu texto aqui... }}

Tipos Disponíveis

INFO (Padrão)

Use para dicas gerais ou informações complementares.

{{Nota|info|DICA|Texto da dica...}}

SUCESSO

Use para indicar novas funcionalidades ou boas práticas.

{{Nota|success|NOVIDADE|Versão 15.0 lançada...}}

ATENÇÃO

Use para alertas que requerem cuidado do usuário.

{{Nota|warning|ATENÇÃO|Verifique o cadastro antes de salvar...}}

CRÍTICO

Use para riscos de perda de dados ou bloqueios.

{{Nota|danger|IMPORTANTE|Não desligue o servidor...}}

3. Tabelas de Campos (Data Grid)

Substitua as tabelas manuais pelo componente



 Campo / Parâmetro
 Função e Instruções

.

Sintaxe Básica

{{TabelaCampos|
  {{Linha| Nome do Campo | Explicação do que deve ser preenchido. }}
}}

Sintaxe Segura (Anti-Bug)

RECOMENDADO

{{TabelaCampos|
  {{Linha
   | 1= Nome do Campo
   | 2= Explicação longa que permite:
* Listas com marcadores
* Quebras de linha
   }}
}}

Resultado Visual

Campo / Parâmetro	Função e Instruções
Data Inicial	Informe a data de início do relatório.
Cliente	Selecione o cliente ou deixe em branco para todos.

4. Cards e Grids

4.1. Cards Básicos

Use


 {{{titulo}}}

{{{texto}}}

para blocos simples de texto.

<div class="celta-grid">
  {{Card|titulo=Dicas|texto=Texto do card...}}
</div>

4.2. Menus de Navegação (CardMenu)

Use


 {{{titulo}}}

{{{conteudo}}}

para criar listas de links. Cores: `blue`, `dark`, `orange`, `green`, `red`.

IMPORTANTE

Os asteriscos (*) da lista devem estar colados na margem esquerda.

<div class="celta-grid">
{{CardMenu
 | cor = orange
 | icone = bi-star
 | titulo = Favoritos
 | conteudo = 
* [[Link 1]]
* [[Link 2]]
}}
</div>

4.3. Grid de 2 Colunas Fixas

Para forçar 2 colunas grandes, adicione a classe celta-grid-2.

<div class="celta-grid celta-grid-2">
  {{Card...}}
</div>

5. Imagens e Badges

Prints de Tela

Padroniza o tamanho e a borda das imagens.

{{Print|Nome_Arquivo.png|Legenda da imagem}}

Badges (Etiquetas)

Use ao lado de títulos para destacar versões.

== Instalação {{Badge|novo|v15.2}} ==

Resultado: Instalação v15.2

6. Barras de Contato (Rodapé)

Adicione no final das páginas para exibir os canais de atendimento.

Padrão (Suporte Técnico)

Use:








Precisando de ajuda?

Fale com nosso suporte via e-mail ou WhatsApp.





E-mail → Suporte



WhatsApp → Suporte



Celta Sistemas

Financeiro / Comercial

Use:


 Contato




Email
[email protected]




WhatsApp
(66) 3515-0001




Site
celtasistemas.com.br

Contato

Email

[email protected]

(66) 3515-0001

Site

celtasistemas.com.br

7. Template Base (Copiar e Colar)

Use este código para iniciar uma nova página de manual rapidamente.

{{Cabecalho
 | [[Módulo]] › [[Funcionalidade]]
 | Título do Manual
}}

Resumo da funcionalidade.

{{Nota|info|PRÉ-REQUISITO|Necessário estar na versão 15.0 ou superior.}}

== 1. Visão Geral ==
Explicação do conceito...

== 2. Configuração ==
Acesse o menu '''Cadastro > Operações'''.

{{TabelaCampos|
  {{Linha
   | tipo=check
   | 1= Nome do Campo
   | 2= Explicação do campo.
  }}
}}

== 3. Passo a Passo ==
# Clique em '''Incluir''';
# Preencha os dados;
#: {{Print|Exemplo_Tela.png|Tela de cadastro}}
# Clique em '''Gravar'''.

{{ContatoSuporte}}

8. Layouts Especiais

Tela Cheia (Sem Sidebar)

Para Dashboards ou Home Page:

<div class="celta-full-width">
   ... conteúdo ...
</div>

Menu Lateral Estilo Sistema

Para replicar o menu branco lateral do sistema Celta:

<div class="celta-sys-menu">
  <div class="celta-sys-header">Menu do Sistema</div>
  <div style="display: flex; flex-direction: column;">
    [[Link|<span class="celta-sys-btn"><i class="bi bi-house"></i> Botão 1</span>]]
  </div>
</div>

@@ Linha 49: / Linha 49: @@
 === Tipos Disponíveis ===
-{{Nota|info|INFO (Padrão)|Use para dicas gerais ou informações complementares. (Se não informar o tipo, este será usado).}}
+{{Nota|info|INFO (Padrão)|Use para dicas gerais ou informações complementares.}}
 <pre>{{Nota|info|DICA|Texto da dica...}}</pre>
-{{Nota|success|SUCESSO / NOVIDADE|Use para indicar novas funcionalidades ou boas práticas recomendadas.}}
+{{Nota|success|SUCESSO|Use para indicar novas funcionalidades ou boas práticas.}}
 <pre>{{Nota|success|NOVIDADE|Versão 15.0 lançada...}}</pre>
-{{Nota|warning|ATENÇÃO|Use para alertas que requerem cuidado do usuário, mas não são críticos.}}
+{{Nota|warning|ATENÇÃO|Use para alertas que requerem cuidado do usuário.}}
 <pre>{{Nota|warning|ATENÇÃO|Verifique o cadastro antes de salvar...}}</pre>
-{{Nota|danger|CUIDADO / CRÍTICO|Use para riscos de perda de dados, bloqueios ou ações irreversíveis.}}
+{{Nota|danger|CRÍTICO|Use para riscos de perda de dados ou bloqueios.}}
-<pre>{{Nota|danger|IMPORTANTE|Não desligue o servidor durante o processo...}}</pre>
+<pre>{{Nota|danger|IMPORTANTE|Não desligue o servidor...}}</pre>
 ----
 == 3. Tabelas de Campos (Data Grid) ==
-Substitua as tabelas manuais pelo componente <code>{{TabelaCampos}}</code>. Ele padroniza a largura (30% campo / 70% descrição) e as cores.
+Substitua as tabelas manuais pelo componente <code>{{TabelaCampos}}</code>.
 === Sintaxe Básica ===
-Para textos curtos e simples.
 <pre>
 {{TabelaCampos|
@@ Linha 75: / Linha 74: @@
 === Sintaxe Segura (Anti-Bug) ===
-{{Nota|warning|RECOMENDADO|Se você precisar quebrar linhas ou usar listas (bullets) dentro da tabela, use '''1=''' e '''2=''' para evitar erros de formatação (caixas cinzas).}}
+{{Nota|warning|RECOMENDADO|Se você precisar quebrar linhas ou usar listas dentro da tabela, use '''1=''' e '''2=''' para evitar erros.}}
 <pre>
@@ Linha 96: / Linha 95: @@
 ----
-== 4. Cards e Grids (Layout) ==
+== 4. Cards e Grids ==
-Use para criar menus visuais, dashboards ou agrupar informações lado a lado.
 === 4.1. Cards Básicos ===
@@ Linha 104: / Linha 102: @@
 <pre>
 <div class="celta-grid">
-   {{Card|titulo=Dicas|texto=Texto do card 1...}}
+   {{Card|titulo=Dicas|texto=Texto do card...}}
-  {{Card|titulo=Manual|texto=Texto do card 2...}}
 </div>
 </pre>
 === 4.2. Menus de Navegação (CardMenu) ===
-Use <code>{{CardMenu}}</code> para criar listas de links com acentos coloridos. Ideal para Hubs de conteúdo.
+Use <code>{{CardMenu}}</code> para criar listas de links. Cores: `blue`, `dark`, `orange`, `green`, `red`.
-'''Cores disponíveis:''' blue, dark, orange, green, red.
+{{Nota|warning|IMPORTANTE|Os asteriscos (*) da lista devem estar colados na margem esquerda.}}
 <pre>
@@ Linha 126: / Linha 123: @@
 </div>
 </pre>
-{{Nota|warning|IMPORTANTE|Ao usar o CardMenu, os asteriscos (*) da lista devem estar colados na margem esquerda, sem espaços antes.}}
-'''Resultado Visual:'''
-<div class="celta-grid">
-{{CardMenu
- | cor = orange
- | icone = bi-star
- | titulo = Favoritos
- | conteudo =
-* [[Página principal|Link Exemplo 1]]
-* [[Página principal|Link Exemplo 2]]
-}}
-</div>
 === 4.3. Grid de 2 Colunas Fixas ===
-Por padrão, a grid divide em 3 ou 4 colunas dependendo da tela. Para forçar '''2 colunas grandes''', adicione a classe <code>celta-grid-2</code>.
+Para forçar '''2 colunas grandes''', adicione a classe <code>celta-grid-2</code>.
 <pre>
 <div class="celta-grid celta-grid-2">
-  {{Card...}}
    {{Card...}}
 </div>
@@ Linha 165: / Linha 148: @@
 ----
-== 6. Template Base (Copiar e Colar) ==
+== 6. Barras de Contato (Rodapé) ==
-''Use este código para iniciar uma nova página de manual rapidamente. Ele já usa a sintaxe segura.''
+Adicione no final das páginas para exibir os canais de atendimento.
+=== Padrão (Suporte Técnico) ===
+Use: <code>{{ContatoSuporte}}</code>
+{{ContatoSuporte}}
+=== Financeiro / Comercial ===
+Use: <code>{{ContatoFinanceiro}}</code>
+{{ContatoFinanceiro}}
+----
+== 7. Template Base (Copiar e Colar) ==
+''Use este código para iniciar uma nova página de manual rapidamente.''
 <pre>
@@ Linha 174: / Linha 172: @@
 }}
-Breve resumo sobre o que é esta funcionalidade e para que ela serve.
+Resumo da funcionalidade.
 {{Nota|info|PRÉ-REQUISITO|Necessário estar na versão 15.0 ou superior.}}
@@ Linha 187: / Linha 185: @@
    {{Linha
     | tipo=check
-    | 1= Nome do Checkbox
+    | 1= Nome do Campo
-    | 2= Explicação do que essa opção faz.
+    | 2= Explicação do campo.
-  }}
-  {{Linha
-   | 1= Outro Campo
-   | 2= Descrição do campo.
    }}
 }}
@@ Linha 198: / Linha 192: @@
 == 3. Passo a Passo ==
 # Clique em '''Incluir''';
-# Preencha os dados conforme a tabela acima;
+# Preencha os dados;
 #: {{Print|Exemplo_Tela.png|Tela de cadastro}}
 # Clique em '''Gravar'''.
-{{Nota|success|DICA|Você pode usar a tecla F5 para gravar rapidamente.}}
+{{ContatoSuporte}}
 </pre>
 ----
-== 7. Layout Tela Cheia (Sem Sidebar) ==
+== 8. Layouts Especiais ==
-Para páginas como a '''Home''' ou Dashboards que não precisam de índice lateral, envolva todo o conteúdo da página nesta div:
+=== Tela Cheia (Sem Sidebar) ===
+Para Dashboards ou Home Page:
 <pre>
 <div class="celta-full-width">
-    ... todo o conteúdo da página aqui ...
+    ... conteúdo ...
 </div>
 </pre>
-----
+=== Menu Lateral Estilo Sistema ===
+Para replicar o menu branco lateral do sistema Celta:
-== 8. Menu Lateral Estilo Sistema ==
-Para criar uma barra lateral branca com botões idênticos ao sistema Celta, use esta estrutura HTML dentro de um container flexível:
 <pre>
 <div class="celta-sys-menu">
    <div class="celta-sys-header">Menu do Sistema</div>
    <div style="display: flex; flex-direction: column;">
      [[Link|<span class="celta-sys-btn"><i class="bi bi-house"></i> Botão 1</span>]]
-    [[Link|<span class="celta-sys-btn"><i class="bi bi-gear"></i> Botão 2</span>]]
    </div>
 </div>
 </pre>