root/docs/trunk/admin_css.txt

===================================================
Personnaliser l'interface d'administration de Dango
===================================================

L'interface d'administration automatique de Django vous offre un espace
d'administration complÚtement fonctionnel sans effort ni code supplémentaire
de votre part. L'administration dynamique a été conçue pour être parée à 
la mise en production, pas seulement comme un point de départ, ce qui vous
permet de l'utiliser telle quelle sur un site en condition réelle. Etant donné
que les pages d'administration sont fondées et construites autour de Django,
vous pouvez en personnaliser l'apparence en modifiant les feuilles de style
et les images de la partie administration.

Voici une vue d'ensemble rapide et non exhaustive de quelques classes et
styles principaux exploités dans les CSS de l'administration de Django.

Modules
=======

La classe ``.module`` est une brique de base regroupant du contenu dans 
l'interface d'administration. Elle est généralement appliquée sur un ``div``
ou un ``fieldset``. Elle encapsule le groupe de contenu dans une boîte et
applique certain styles aux éléments qu'elle contient. Un ``h2`` à l'intérieur
d'un ``div.module`` s'alignera en partie supérieure du ``div`` en tant qu'en-tête
pour tout le groupe.

.. image:: http://media.djangoproject.com/img/doc/admincss/module.gif
   :alt: Exemple d'utilisation d'une classe de module sur la page d'accueil
         de l'administration

Types de colonnes
=================

.. admonition:: Note

    Toutes les pages d'aministration (sauf le tableau de bord) sont en largeur
    fluide. Toutes les classes en largeurs fixes provenant des version précédentes
    de Django ont été supprimées.
    
Le template de base pour chaque page d'administration contient un bloc définissant
la structure en colonne de la page. Il définit une classe pour la partie contenu
de la page (``div#content``) ce qui permet à chaque élément de la page de
connaître sa largeur relative. Il y a trois types de colonnes disponibles.

colM
        C'est la disposition en colonne utilisée par défaut sur les pages. Le "M"
        signifie "principal" (main).  Présuppose que tout le contenu de la page
        est regroupé dans une colonne principale (``div#content-main``).
colMS
    Celle-ci est pour les pages avec une colonne principale et une barre latérale
    à droite. Le "S" signifie "barre latérale" (sidebar). Présuppose que le contenu
    principal est dans ``div#content-main`` et celui de la barre latérale dans
    ``div#content-related``. Utilisé sur la page principale de l'administration.
colSM
    Pareil que ci-dessus, mais avec la barre latérale à gauche. L'ordre des
    colonnes dans le code source n'a pas d'importance.

Par exemple, vous pouvez utiliser ceci dans un template pour avoir une page sur
deux colonnes avec une barre latérale à droite::

    {% block coltype %}colMS{% endblock %}

Styles du Texte
===============

Taille des polices de caractÚres
--------------------------------

La plupart des éléments HTML (en-tête, listes, etc.) possÚdent une taille de police
de caractÚres de base adaptée au contexte dans la feuille de style. Il y a
trois classes disponibles pour forcer le texte à une certaine taille dans chaque
contexte.

small
    11px
tiny
    10px
mini
    9px (à utiliser avec modération)

Styles et alignement des polices de caractÚres
----------------------------------------------

Il y a aussi quelques styles pour personnaliser le texte.

.quiet
    Définit la couleur de la police de caractÚres au gris clair. Utile pour les
    notes latérales dans les directives. Associez-la avec ``.small`` ou ``.tiny``
    pour donner de l'effet.
.help
    C'est une classe sur mesure pour les blocs de texte en ligne détaillant
    le rÎle des éléments de formulaire. Elle rend le texte plus petit et gris,
    et quand elle est appliquée sur les éléments ``p`` contenant des éléments
    ``.form-row`` (voir Styles de formulaires ci-dessous), elle décalera le texte
    pour l'aligner avec le champ de formulaire. Utilisez-la pour du texte d'aide,
    à la place de ``small quiet``. Elle fonctionne sur d'autres éléments, mais
    essayez dans la mesure du possible d'utiliser cette classe sur un ``p``.
.align-left
    Aligne le texte à gauche. Fonctionne seulement sur les éléments de type bloc
    contenant des éléments en ligne.
.align-right
    Etes vous attentif ?
.nowrap
    Préserve le texte et les objets en ligne du retour automatique à la ligne.
    Pratique pour les en-têtes de tableau que vous désirez garder sur une seule ligne.

Flottants et abandon des flottants
----------------------------------

float-left
    flottant à gauche
float-right
    flottant à droite
clear
    abandon de tous les flottants

Utilitaires
===========

Certaines actions s'appliquant directement à un objet sont utilisées dans les
formulaires et les pages de sélection pour modification. Celles-ci apparaissent
dans une colonne "barre d'outils" au dessus du formulaire ou de la sélection
à modifier, à droite de la page. Les outils sont encapsulés dans un ``ul``
avec la classe ``object-tools``. Il y a deux types particuliers d'outils pouvant
être définis avec une classe additionnelle sur le ``a`` de l'outil. Ce sont
les ``.addlink`` et les ``.viewsitelink``.

Exemple pour une page de sélection pour modification::

    <ul class="object-tools">
      <li><a href="/stories/add/" class="addlink">Add redirect</a></li>
    </ul>

.. image:: http://media.djangoproject.com/img/doc/admincss/objecttools_01.gif
   :alt: Utilitaires sur une page de sélection modifiables

et sur une page de formulaire::

    <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>

.. image:: http://media.djangoproject.com/img/doc/admincss/objecttools_02.gif
   :alt: Utilitaires sur un formulaire

Styles de formulaire
====================

Fieldsets
---------

Les formulaires d'administration sont découpés en groupes d'éléments appelés
``fieldset``. Chaque ``fieldset`` doit avoir une classe``.module``.
Chaque ``fieldset`` doit contenir un en-tête ``h2`` en position supérieure (exception
faite pour le premier d'entre eux, et dans certains cas où le
groupe ne possÚde pas d'étiquette logique).

Chaque groupe peut aussi avoir des classes supplémentaires en plus de la classe
``.module`` pour appliquer un formatage approprié au groupe de champs.

.aligned
    Permet d'aligner les étiquettes et les champs de saisie cÎte à cÎte et
    sur la même ligne.
.wide
    Utilisé en combinaison avec ``.aligned`` pour élargir l'espace disponibe
    pour les étiquettes.

Lignes de formulaire
--------------------

Chaque ligne du formulaire (dans un ``fieldset``) doit être incluse dans un
``div`` avec la classe ``form-row``. Si le champ de la ligne est requis, une
classe ``required`` doit aussi être ajouté à ``div.form-row``.

.. image:: http://media.djangoproject.com/img/doc/admincss/formrow.gif
   :alt: Exemple  d'utilisation d'une classe de ligne de formulaire

Etiquettes
----------

Les étiquettes de formulaires doivent toujours précéder le champ de formulaire,
excepté dans le cas des cases à cocher et des boutons radio, pour lesquels
le ``input`` doit venir en premier. Toute explication ou texte d'aide doit
suivre le ``label`` dans un ``p`` avec la classe ``.help``.