Customizando a interface de administração do Django

Warning

O design da administração mudou um pouco desde que a documentação foi escrita, e algumas partes podem não se aplicar mais. Este documento não é mais mantido, uma vez que uma API para customização da interface de administração do Django está em desenvolvimento.

A interface de administração dinâmica do Django oferece uma administração gratuíta, plenamente funcional, sem a necessidade de escrita de código. A administração dinâmica é projetada para estar pronta para produção, não somente um ponto de partida, então você pode usá-la em um site real. Embora o formato subjacente do admin seja construído em páginas do Django, você pode customizar o visual editando os estilos e imagens.

Eis uma breve visão sobre alguns dos principais estilos e classes utilizadas no CSS do admin do Django.

Módulos

A classe .module é um bloco de construção básico para agrupar conteúdos no admin. Ela geralmente é aplicada em um div ou um fieldset, envolvendo os conteúdos do grupo em uma caixa e aplicando certos estilos sobre os elementos internos. Um h2 dentro de um div.module irá alinhar-se ao topo do div como um cabeçalho para o grupo inteiro.

Exemplo de uso da classe module na página do admin

Tipos de Coluna

Note

Todas as páginas do admin (exceto o dashboard) são largura fluída (se ajustam ao navegador). Todas as classes de largura fixa de versões anteriores do Django foram removidas.

O template base para cada página admin possui um bloco que define a estrutura de colunas da página. Ele configura uma classe na área de conteúdo da página (div#content) de modo que tudo dentro da página sabe quão largo deve ser. Existem três tipos de colunas disponíveis.

colM
Esta é a configuração padrão para colunas para todas as páginas. O “M” vem de “Main”. Assume que todo conteúdo na página está em uma coluna principal (div#content-main).
colMS
Esta é para páginas com uma coluna principal e uma “sidebar” (coluna lateral) à direita. O “S” vem de “sidebar”. Assume-se que o conteúdo principal está em div#content-main e o conteúdo da “sidebar” está em div#content-related. Isto é usado na página principal do admin.
colSM
O mesmo descrito acima, com a “sidebar” à esquerda. A ordem das colunas não importa.

Por exemplo, você pode colocar isto em um template para fazer uma página de duas colunas, com uma coluna lateral à direita:

.. code-block:: html+django
{% block coltype %}colMS{% endblock %}

Estilos de Texto

Tamanhos de Font

A maioria dos elementos HTML (cabeçalhos, listas, etc.) possui um tamanho de fonte básico, de acordo com o contexto de estilos. Existem três classes disponíveis para forçar um texto a ter um certo tamanho em qualquer contexto.

small
11px
tiny
10px
mini
9px (use com sabedoria)

Estilos de Fontes e Alinhamento

Existem também alguns poucos para estilizar textos.

.quiet
Configura a cor da fonte para um cinza claro. Bom para notas laterais em instruções. Combine com .small ou .tiny por pura emoção.
.help
Esta é uma classe customizada para blocos de ajuda em linha, como o texto que explica a função dos elementos dos formulários. Ela faz o texto ficar pequeno e cinza, e quando aplicado para p dentro de um elemento .form-row (veja estilos de formulário abaixo), ele será alinhado com o campo de fomulário. Use isto para texto de ajuda, em vez de small quiet. Esta classe funciona em outros elementos, mas tente colocá-la em elementos p sempre que puder.
.align-left
Esta alinha o texto à esquerda. Somente funciona em elementos de bloco contendo elementos em linha.
.align-right
Você está prestando atenção?
.nowrap
Mantém o texto e objetos em linha sem quebra de linha. É útil para cabeçalhos de tabelas, que você deseja manter em uma linha somente.

Floats e Clears

float-left
Flutua à esquerda
float-right
Flutua à direita
clear
Limpa tudo

Ferramentas de Objetos

Algumas ações que se aplicam diretamente a objetos são usadas em páginas de formulário e de listagens. Estas aparecem em uma "barra de ferramentas" acima do formulário ou listagem, à direita da página. As ferramentas ficam envolvidos em um ul com a classe object-tools. Há dois tipos de ferramentas customizadas que podem ser definidas com uma classe adicional sobre o a para a ferramenta. São elas .addlink e .viewsitelink.

Exemplo de uma página de listagem:

<ul class="object-tools">
    <li><a href="/stories/add/" class="addlink">Adicionar redirecionador</a></li>
</ul>
"Object tools" sobre uma página de listagem

and from a form page:

<ul class="object-tools">
    <li><a href="/history/303/152383/">History</a></li>
    <li><a href="/r/303/152383/" class="viewsitelink">View on site</a></li>
</ul>
"Object tool" em uma página de formulário

Estilos de formulário

Fieldsets

Os formulários do admin são separados em grupos por meio de elementos fieldset. Cada fieldset de formulário deve ter uma classe .module. Cada fieldset deve também ter um cabeçalho h2 dentro e no topo (exceto o primeiro grupo do formulário, e em alguns casos onde o grupo de campos não possui uma nomenclatura lógica).

Cada fieldset pode ainda receber classes extras, além de .module para aplicar a formatação apropriada para o grupo de campos.

.aligned
Isto irá alinhar as labels e inputs lado a lado na mesma linha.
.wide
Usado na combinação com .aligned para ampliar o espaço disponível para as labels.

Linhas de formulário

Cada linha do formulário (dentro de um fieldset) deve estar em um div com a classe form-row. Se o campo na linha é obrigatório, a classe required também deverá ser adicionada ao div.form-row.

Exemplo de uso da classe form-row

Labels

As labels de formulários devem sempre preceder o campo, exceto no caso de ser um checkbox ou radio, onde o input deve vir primeiro. Qualquer explicação ou texto de ajuda deve seguir o label em um p com a classe .help.

« previous | up