Removed an obsolete documentation page about admin style customization.
This commit is contained in:
parent
f1bdfbd24b
commit
6eb4f25692
|
@ -28,14 +28,3 @@ Indices, glossary and tables
|
||||||
* :ref:`genindex`
|
* :ref:`genindex`
|
||||||
* :ref:`modindex`
|
* :ref:`modindex`
|
||||||
* :ref:`glossary`
|
* :ref:`glossary`
|
||||||
|
|
||||||
Deprecated/obsolete documentation
|
|
||||||
=================================
|
|
||||||
|
|
||||||
The following documentation covers features that have been deprecated or that
|
|
||||||
have been replaced in newer versions of Django.
|
|
||||||
|
|
||||||
.. toctree::
|
|
||||||
:maxdepth: 2
|
|
||||||
|
|
||||||
obsolete/index
|
|
||||||
|
|
|
@ -91,8 +91,7 @@ The dynamically-generated admin site is ugly! How can I change it?
|
||||||
We like it, but if you don't agree, you can modify the admin site's
|
We like it, but if you don't agree, you can modify the admin site's
|
||||||
presentation by editing the CSS stylesheet and/or associated image files. The
|
presentation by editing the CSS stylesheet and/or associated image files. The
|
||||||
site is built using semantic HTML and plenty of CSS hooks, so any changes you'd
|
site is built using semantic HTML and plenty of CSS hooks, so any changes you'd
|
||||||
like to make should be possible by editing the stylesheet. We've got a
|
like to make should be possible by editing the stylesheet.
|
||||||
:doc:`guide to the CSS used in the admin </obsolete/admin-css>` to get you started.
|
|
||||||
|
|
||||||
What browsers are supported for using the admin?
|
What browsers are supported for using the admin?
|
||||||
------------------------------------------------
|
------------------------------------------------
|
||||||
|
@ -104,5 +103,5 @@ There *may* be minor stylistic differences between supported browsers—for
|
||||||
example, some browsers may not support rounded corners. These are considered
|
example, some browsers may not support rounded corners. These are considered
|
||||||
acceptable variations in rendering.
|
acceptable variations in rendering.
|
||||||
|
|
||||||
.. _YUI's A-grade: http://yuilibrary.com/yui/docs/tutorials/gbs/
|
.. _YUI's A-grade: http://yuilibrary.com/yui/docs/tutorials/gbs/
|
||||||
|
|
||||||
|
|
|
@ -67,8 +67,7 @@ different needs:
|
||||||
whathaveyou.
|
whathaveyou.
|
||||||
|
|
||||||
* Finally, there's some "specialized" documentation not usually relevant to
|
* Finally, there's some "specialized" documentation not usually relevant to
|
||||||
most developers. This includes the :doc:`release notes </releases/index>`,
|
most developers. This includes the :doc:`release notes </releases/index>` and
|
||||||
:doc:`documentation of obsolete features </obsolete/index>`,
|
|
||||||
:doc:`internals documentation </internals/index>` for those who want to add
|
:doc:`internals documentation </internals/index>` for those who want to add
|
||||||
code to Django itself, and a :doc:`few other things that simply don't fit
|
code to Django itself, and a :doc:`few other things that simply don't fit
|
||||||
elsewhere </misc/index>`.
|
elsewhere </misc/index>`.
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
Before Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
Before Width: | Height: | Size: 2.2 KiB |
|
@ -1,186 +0,0 @@
|
||||||
======================================
|
|
||||||
Customizing the Django admin interface
|
|
||||||
======================================
|
|
||||||
|
|
||||||
.. warning::
|
|
||||||
|
|
||||||
The design of the admin has changed somewhat since this document was
|
|
||||||
written, and parts may not apply any more. This document is no longer
|
|
||||||
maintained since an official API for customizing the Django admin interface
|
|
||||||
is in development.
|
|
||||||
|
|
||||||
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:: _images/module.png
|
|
||||||
:alt: Example use of module class on admin homepage
|
|
||||||
|
|
||||||
Column Types
|
|
||||||
============
|
|
||||||
|
|
||||||
.. 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:
|
|
||||||
|
|
||||||
.. code-block:: html+django
|
|
||||||
|
|
||||||
{% 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:
|
|
||||||
|
|
||||||
.. code-block:: html+django
|
|
||||||
|
|
||||||
<ul class="object-tools">
|
|
||||||
<li><a href="/stories/add/" class="addlink">Add redirect</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
.. image:: _images/objecttools_01.png
|
|
||||||
:alt: Object tools on a changelist page
|
|
||||||
|
|
||||||
and from a form page:
|
|
||||||
|
|
||||||
.. code-block:: html+django
|
|
||||||
|
|
||||||
<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:: _images/objecttools_02.png
|
|
||||||
: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:: _images/formrow.png
|
|
||||||
: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``.
|
|
|
@ -1,12 +0,0 @@
|
||||||
Deprecated/obsolete documentation
|
|
||||||
=================================
|
|
||||||
|
|
||||||
These documents cover features that have been deprecated or that have been
|
|
||||||
replaced in newer versions of Django. They're preserved here for folks using old
|
|
||||||
versions of Django or those still using deprecated APIs. No new code based on
|
|
||||||
these APIs should be written.
|
|
||||||
|
|
||||||
.. toctree::
|
|
||||||
:maxdepth: 1
|
|
||||||
|
|
||||||
admin-css
|
|
Loading…
Reference in New Issue