+
−======================================
+
−Customizing the Django admin interface
+
−======================================
+
−
+
−Django's dynamic admin interface gives you a fully-functional admin for free
+
−with no hand-coding required. The dynamic admin is designed to be
+
−production-ready, not just a starting point, so you can use it as-is on a real
+
−site. While the underlying format of the admin pages is built in to Django, you
+
−can customize the look and feel by editing the admin stylesheet and images.
+
−
+
−Here's a quick and dirty overview some of the main styles and classes used in
+
−the Django admin CSS.
+
−
+
−Modules
+
−=======
+
−
+
−The ``.module`` class is a basic building block for grouping content in the
+
−admin. It's generally applied to a ``div`` or a ``fieldset``. It wraps the content
+
−group in a box and applies certain styles to the elements within. An ``h2``
+
−within a ``div.module`` will align to the top of the ``div`` as a header for the
+
−whole group.
+
−
+
−.. image:: http://media.djangoproject.com/img/doc/admincss/module.gif
+
−   :alt: Example use of module class on admin homepage
+
−
+
−Column Types
+
−============
+
−
+
−.. admonition:: Note
+
−
+
−    All admin pages (except the dashboard) are fluid-width. All fixed-width
+
−    classes from previous Django versions have been removed.
+
−
+
−The base template for each admin page has a block that defines the column
+
−structure for the page. This sets a class on the page content area
+
−(``div#content``) so everything on the page knows how wide it should be. There
+
−are three column types available.
+
−
+
−colM
+
−    This is the default column setting for all pages. The "M" stands for "main".
+
−    Assumes that all content on the page is in one main column
+
−    (``div#content-main``).
+
−colMS
+
−    This is for pages with one main column and a sidebar on the right. The "S"
+
−    stands for "sidebar". Assumes that main content is in ``div#content-main``
+
−    and sidebar content is in ``div#content-related``. This is used on the main
+
−    admin page.
+
−colSM
+
−    Same as above, with the sidebar on the left. The source order of the columns
+
−    doesn't matter.
+
−
+
−For instance, you could stick this in a template to make a two-column page with
+
−the sidebar on the right::
+
−
+
−    {% block coltype %}colMS{% endblock %}
+
−
+
−Text Styles
+
−===========
+
−
+
−Font Sizes
+
−----------
+
−
+
−Most HTML elements (headers, lists, etc.) have base font sizes in the stylesheet
+
−based on context. There are three classes are available for forcing text to a
+
−certain size in any context.
+
−
+
−small
+
−    11px
+
−tiny
+
−    10px
+
−mini
+
−    9px (use sparingly)
+
−
+
−Font Styles and Alignment
+
−-------------------------
+
−
+
−There are also a few styles for styling text.
+
−
+
−.quiet
+
−    Sets font color to light gray. Good for side notes in instructions. Combine
+
−    with ``.small`` or ``.tiny`` for sheer excitement.
+
−.help
+
−    This is a custom class for blocks of inline help text explaining the
+
−    function of form elements. It makes text smaller and gray, and when applied
+
−    to ``p`` elements within ``.form-row`` elements (see Form Styles below),
+
−    it will offset the text to align with the form field. Use this for help
+
−    text, instead of ``small quiet``. It works on other elements, but try to
+
−    put the class on a ``p`` whenever you can.
+
−.align-left
+
−    It aligns the text left. Only works on block elements containing inline
+
−    elements.
+
−.align-right
+
−    Are you paying attention?
+
−.nowrap
+
−    Keeps text and inline objects from wrapping. Comes in handy for table
+
−    headers you want to stay on one line.
+
−
+
−Floats and Clears
+
−-----------------
+
−
+
−float-left
+
−    floats left
+
−float-right
+
−    floats right
+
−clear
+
−    clears all
+
−
+
−Object Tools
+
−============
+
−
+
−Certain actions which apply directly to an object are used in form and
+
−changelist pages. These appear in a "toolbar" row above the form or changelist,
+
−to the right of the page. The tools are wrapped in a ``ul`` with the class
+
−``object-tools``. There are two custom tool types which can be defined with an
+
−additional class on the ``a`` for that tool. These are ``.addlink`` and
+
−``.viewsitelink``.
+
−
+
−Example from a changelist page::
+
−
+
−    <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: Object tools on a changelist page
+
−
+
−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>
+
−
+
−.. image:: http://media.djangoproject.com/img/doc/admincss/objecttools_02.gif
+
−   :alt: Object tools on a form page
+
−
+
−Form Styles
+
−===========
+
−
+
−Fieldsets
+
−---------
+
−
+
−Admin forms are broken up into groups by ``fieldset`` elements. Each form fieldset
+
−should have a class ``.module``. Each fieldset should have a header ``h2`` within the
+
−fieldset at the top (except the first group in the form, and in some cases where the
+
−group of fields doesn't have a logical label).
+
−
+
−Each fieldset can also take extra classes in addition to ``.module`` to apply
+
−appropriate formatting to the group of fields.
+
−
+
−.aligned
+
−    This will align the labels and inputs side by side on the same line.
+
−.wide
+
−    Used in combination with ``.aligned`` to widen the space available for the
+
−    labels.
+
−
+
−Form Rows
+
−---------
+
−
+
−Each row of the form (within the ``fieldset``) should be enclosed in a ``div``
+
−with class ``form-row``. If the field in the row is required, a class of
+
−``required`` should also be added to the ``div.form-row``.
+
−
+
−.. image:: http://media.djangoproject.com/img/doc/admincss/formrow.gif
+
−   :alt: Example use of form-row class
+
−
+
−Labels
+
−------
+
−
+
−Form labels should always precede the field, except in the case
+
−of checkboxes and radio buttons, where the ``input`` should come first. Any
+
−explanation or help text should follow the ``label`` in a ``p`` with class
+
−``.help``.