Avisos Importantes

O site foi todo feito para que tudo fosse padronizado em todas as OMs, isso nos leva também a entender que praticamente não é necessário inserir algum código para ter um elemento personalizado, mas caso haja essa necessidade, É NECESSÁRIO SEGUIR ALGUNS PRÉ-REQUISITOS ANTES DE QUALQUER INSERÇÃO.

Tabelas

Devido a várias atualizações dos dispositivos, é extremamente importante que as OMs parem de criar conteúdos útilizando tabelas, esse tipo de conteúdo deve ser usado somente quando de fato o conteúdo for uma tabela.

O uso de tabelas para criação e alinhamento de conteúdos, já não é usado, pois no quesito responsividade (conteúdo bem distribuido tanto nos celulares quanto nos PCs), as tabelas deixam muito a desejar e na maioria dos casos, quando não há um CSS para manipular essas linhas, a responsividade simplesmente não existe.

Para criação de conteúdos, é recomendado o uso de classes do Bootstrap, onde geralmente vamos trabalhar com os conteúdos no formato abaixo:

<div class="row">
  <div class="col">Seu conteudo da coluna 1</div>
  <div class="col">Seu conteudo da coluna 2</div>
  <div class="col">Seu conteudo da coluna 3</div>
</div>

Row é a linha e col são colunas, ou seja, teremos 3 colunas em cada linha no exemplo acima. Teste e veja o resultado.

Recomendo pesquisar ainda mais sobre essa questão de colunas, mas só de você trabalhar no formato do código acima, seu site já vai estar muito mais atualizado.

Não importe nenhum CSS nos blocos e conteúdos

Importar CSSs de Frameworks como Bootstrap irá bugar todo o site.

Sua importação é desnecessária, pois essa importação já existe.

Confira a biblioteca Bootstrap para criar elementos como Acordion, Sanfona, Tabelas, Espaçamentos, Margem, Pading, Containers, Colunas, Linhas etc... Alguns destes itens, precisa importar o seu Javascript personalizado.

Não utilize códigos de cores que estejam fora do padrão do site

Há uma lista de cores já pré-existentes no site que tem a ver com a identidade visual da marinha. Temos que levar em conta que o site possui também o padrão escuro e quando é colocado uma cor no código hexadecimal, a cor não irá alterar quando mudar para o tema escuto.

A forma correta de usar as cores é no método abaixo:

<p style="color:var(--cor-sexta)">Texto de exemplo</p>

Ou seja, usar as cores através de variáveis.

A lista de cores disponíveis encontra-se abaixo:

var(--cor-primeira);
var(--cor-segunda);
var(--cor-terceira);
var(--cor-quarta);
var(--cor-quinta);
var(--cor-quinta-light);
var(--cor-quinta-hover);
var(--cor-quinta-hover-op);
var(--cor-sexta);
var(--cor-sexta-dark);
var(--cor-sexta-black);
var(--cor-bg-dark);
var(--cor-bg-dark-2);
var(--cor-oitava);
var(--cor-nona);
var(--cor-decima);

Nunca coloque nenhuma fonte manualmente

Todas as configurações de fontes já estão definidas automaticamente, então nunca defina atributos como:

<font style="font-family:Arial, sans-serif">Texto de exemplo</font>

<span style="font-family:Arial, sans-serif">Texto de exemplo</span>

Caso esteja copiando o texto de algum outro editor e colando no editor do Drupal, lembre-se de colar com Ctrl+shift+V para colar sem a formatação, caso contrario, também estará sendo colado as configurações, isso inclui o background, cor, fonte e tudo mais que não queremos e não precisamos. Lembre-se é importante seguir o padrão Govbr.

Não utilize blocos para criar Menus

Embora muitos não saibam, existe um local específico, por padrão, criado para a criação de menus, isso inclui os itens no footer também, para acessar esta opção é só ir em Estrutura > Menus .

Todas as configurações de CSS estão feitas a partir dos itens dos Menus, o que faz desnecessário qualquer alteração de estilos ou desenvolvimento de um método diferente de menu.

Ajustes das View

Configurações iniciais