← Back to branch summary

~kkubasik/django/aggregation-branch

« back to all changes in this revision

Viewing changes to docs/admin_css.txt

  • Committer: adrian
  • Date: 2006-05-02 01:31:56 UTC
  • Revision ID: vcs-imports@canonical.com-20060502013156-2941fcd40d080649
MERGED MAGIC-REMOVAL BRANCH TO TRUNK. This change is highly backwards-incompatible. Please read http://code.djangoproject.com/wiki/RemovingTheMagic for upgrade instructions.

Show diffs side-by-side

added added

removed removed

Lines of Context:
docs/admin_css.txt
28
28
 
29
29
.. admonition:: Note
30
30
 
31
 
    In the Django development version, all admin pages (except the dashboard) are fluid-width. All fixed-width classes have been removed.
 
31
    All admin pages (except the dashboard) are fluid-width. All fixed-width
 
32
    classes from previous Django versions have been removed.
32
33
 
33
34
The base template for each admin page has a block that defines the column
34
35
structure for the page. This sets a class on the page content area
35
 
(``div#content``) so everything on the page knows how wide it should be. There are three column types available.
 
36
(``div#content``) so everything on the page knows how wide it should be. There
 
37
are three column types available.
36
38
 
37
39
colM
38
40
    This is the default column setting for all pages. The "M" stands for "main".
46
48
colSM
47
49
    Same as above, with the sidebar on the left. The source order of the columns
48
50
    doesn't matter.
49
 
colM superwide (removed in Django development version)
50
 
    This is for ridiculously wide pages. Doesn't really work very well for
51
 
    anything but colM. With superwide, you've got 1000px to work with. Don't
52
 
    waste them.
53
 
flex (removed in Django development version)
54
 
    This is for liquid-width pages, such as changelists. Currently only works
55
 
    with single-column pages (does not combine with ``.colMS`` or ``.colSM``).
56
 
    Form pages should never use ``.flex``.
57
51
 
58
 
For instance, you could stick this in a template to make a two-column page with the sidebar on the right::
 
52
For instance, you could stick this in a template to make a two-column page with
 
53
the sidebar on the right::
59
54
 
60
55
    {% block coltype %}colMS{% endblock %}
61
56
 
62
 
 
63
 
Widths
64
 
======
65
 
 
66
 
**Removed in Django development version (see note above).**
67
 
 
68
 
There's a whole mess of classes in the stylesheet for custom pixel widths on
69
 
objects. They come in handy for tables and table cells, if you want to avoid
70
 
using the ``width`` attribute. Each class sets the width to the number of pixels
71
 
in the class, except ``.xfull`` which will always be the width of the column
72
 
it's in. (This helps with tables that you want to always fill the horizontal
73
 
width, without using ``width="100%"`` which makes IE 5's box model cry.)
74
 
 
75
 
**Note:** Within a ``.flex`` page, the ``.xfull`` class will ``usually`` set
76
 
to 100%, but there are exceptions and still some untested cases.
77
 
 
78
 
Available width classes::
79
 
 
80
 
    .x50 .x75 .x100 .x150 .x200 .x250 .x300 .x400 .x500 .xfull
81
 
 
82
57
Text Styles
83
58
===========
84
59
 
107
82
.help
108
83
    This is a custom class for blocks of inline help text explaining the
109
84
    function of form elements. It makes text smaller and gray, and when applied
110
 
    to ``p`` elements withing ``.form-row`` elements (see Form Styles below), it will
111
 
    offset the text to align with the form field. Use this for help text,
112
 
    instead of ``small quiet``. It works on other elements, but try to put the class
113
 
    on a ``p`` whenever you can.
 
85
    to ``p`` elements withing ``.form-row`` elements (see Form Styles below),
 
86
    it will offset the text to align with the form field. Use this for help
 
87
    text, instead of ``small quiet``. It works on other elements, but try to
 
88
    put the class on a ``p`` whenever you can.
114
89
.align-left
115
 
    It aligns the text left. Only works on block elements containing inline elements.
 
90
    It aligns the text left. Only works on block elements containing inline
 
91
    elements.
116
92
.align-right
117
93
    Are you paying attention?
118
94
.nowrap
119
 
    Keeps text and inline objects from wrapping. Comes in handy for table headers you want to stay
120
 
    on one line.
 
95
    Keeps text and inline objects from wrapping. Comes in handy for table
 
96
    headers you want to stay on one line.
121
97
 
122
98
Floats and Clears
123
99
-----------------
173
149
appropriate formatting to the group of fields.
174
150
 
175
151
.aligned
176
 
    this will align the labels and inputs side by side on the same line.
 
152
    This will align the labels and inputs side by side on the same line.
177
153
.wide
178
 
    used in combination with ``.aligned`` to widen the space available for the labels.
 
154
    Used in combination with ``.aligned`` to widen the space available for the
 
155
    labels.
179
156
 
180
157
Form Rows
181
158
---------