Governo do Distrito Federal
15/07/22 às 14h53 - Atualizado em 23/01/23 às 12h33

[dicas de formatação]

Matérias e serviços

Título Fonte padrão | tamanho 18 | sem negrito
Título Título Título
   
Sutiã Inserir shotcode lead body copy no lugar de … inserir texto simples
   
Imagem Inserir moldura: img-rounded img-thumbnail (colocar código em classe CSS da imagem na edição)
   
Créditos Fonte padrão | sem itálico | cor: medium grey [#999999] da paleta de cores WP
Nome do jornalista | Ascom/SEEDFNome do fotógrafo | Ascom/SEEDF
   
Cores Destaque principal e  Notícias → Laranja médio WP ff9900

Serviços – marcar a categoria Notícias também → Azul Turquosie do WP 33cccc

Tags → laranja para destaque e amarela para notícias

   
Sinais de marcação ↲  ↳   ↴  ↵   ↶  ↷   ⇅

➥  →  ➙  ➔

▼   ▷ ▹   ■ □ ●  ∘  •

 

Botões

Botão colorido

 

   NOME   

 

   NOME   

 

   NOME   

 

Botão branco/contorno

 

   NOME   

 

   NOME   

 

   NOME   

 

Botão bloco estendido colorido

 

Título

 

Título

 

Título

 

Botão bloco estendido branco/contorno

 

Título

 

Título

 

Título

 

Botão simples → sem formatação

 

  Título 

 

Para mudar cor e tamanho

 

<a class=”btn btn-cor do contorno btn-tamanho” style=”background-color: #cor do botão;” href=”#” target=”_blank” rel=”noopener”><span style=”color: #cor do título;”>   Título   </span></a>

 

Cores do contornowarning   info   success

Tamanhosxs [pequenino] sm [pequeno] md [médio] lg [grande]

Cores do botão → #ff9900   #33cccc   #67b25d   #ffffff [branco]

Cores do título → #ff9900   #33cccc   #008000   #ffffff [branco]

 

Botão desativado com tooltip [informação qdo passa o mouse]

 


 

<span class=”d-inline-block” tabindex=”1″ title=”texto tooltip” data-toggle=”tooltip”><button class=”btn btn-cor btn-tamanho” style=”pointer-events: none;” disabled=”disabled” type=”button”>Botão desativado</button>

 

Texto tooltip – informação que aparece qdo passa o mouse em cima do botão

Corwarning   info   success

Tamanhoxs [pequenino] sm [pequeno] md [médio] lg [grande]

 

ou

 

Aplicar o shortcode tooltip

 

 

Accordions

Accordion colorido

 

Aqui vem o conteúdo

Aqui vem o conteúdo

Aqui vem o conteúdo

Aqui vem o conteúdo

 

Accordion de botão com box

 

  Título   

Texto vem aqui

 

Accordion de botão simples com informação na frente

[ideal para colocar dentro de tabelas, licitações etc]

 

Título Aqui vem uma informação ao lado do botão [como data de publicação, atualização, descrição etc]

conteúdo aqui

 

Box

 

Aqui vem um texto

 

 

Barras laterais

 

Aqui vem o texto

 

Para mudar a cor:  onde tem #ff9900 mude para o código da cor desejada

 


Páginas

Linha responsiva para as páginas

 

Aqui vem o texto

 

 

 

Título para páginas com Tab (menu horizontal)

 

Título

 

Aqui vem o texto

 

Nossa Rede

 

Rodapé das páginas – cor #7db37d

 

Informações atualizadas em MÊS /2023

Fonte: inserir área técnica responsável pelas informações

 

Link permanente

 

Padronizado para todos os itens do menu → tema+assunto
Ex:
nossa-rede-apresentacao
nossa-rede-escola-e-estudantes
nossa-rede-servidores

 

Tabs verde

 

Texto1

Texto2

Texto3

Texto4

Texto5

 

 

Outras formatações da página

Cores: #008000   #67b25d   #def0d8    [clarinho para tabelas, botões, accordion]#99cc00

Botões: verde #67b25d #def0d8 ou branco com contorno e texto verde

Accordion: de botão branco ou de barra verde ou branco

Contatos e observações gerais: box – shortcode Wells
Âncora: sempre ancorar para o topo da página ou topo do accordion em caso de texto muito grande. Exemplo

Ícones:

img-responsiva img-responsiva img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva img-responsiva img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva

 

img-responsiva img-responsiva img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva

 

img-responsiva img-responsiva img-responsiva  img-responsiva img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva img-responsiva  img-responsiva  img-responsiva  img-responsiva img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva  img-responsiva

 

img-responsiva   img-responsiva   img-responsiva   img-responsiva  img-responsiva  img-responsiva  img-responsiva    img-responsiva   img-responsiva  img-responsiva

img-responsiva

 

img-responsiva  img-responsiva  img-responsiva   img-responsiva  img-responsiva img-responsiva img-responsiva

 

 

Governo do Distrito Federal