Details

Applies to
1.5.0
Purpose

Alters output of TableOfContents macro to allow it to be CSS styled

Description

This patch causes the output for the table of contents (in the HTML formatter) to be wrapped in a <div> element, whose CSS class is "table-of-contents". This allows CSS style sheets to alter its appearance. Additionally within the div but before the list there is a heading paragraph with a class "table-of-contents-heading". It contains the text "Contents" (or a translated equivalent).

The CSS stylesheets of the distributed themes are updated to apply a simple style to the table of contents. In the modern and rightsidebar themes, the table of contents is enclosed in a subtly-outlined box. In all themes the font size is slightly smaller than the normal text size.

See also FeatureRequests/AlterTableOfContentsAppearanceWithStyleSheet for the original request.

Patch

/!\ Note this patch depends upon patch MoinMoinPatch/FormatterApiConsistencyForHtmlAttributes.

toc-formatting-patch.diff It patches these files:

For history only, an older version of this patch is TableOfContents.py.diff - do not use it.

Discussion

Creating your own styles

An example of stylesheet rules which could be used follows (this patch does not actually modify the css files):

/* example CSS rules for table of contents */
.table-of-contents { border: 1px solid #bbbbbb;
                     margin: 4px; padding: 4px;
                     background-color:#eeeeee; width:50%;
                     font-size: small;
                     }
.table-of-contents-heading { font-weight:bold; padding:0; margin:0; }
.table-of-contents ul { margin:0; list-style-type:decimal; }

To change the numbering notation in front of each Table of Contents item to, for example, lower-case roman numerals, instead of the default numbering scheme, change

list-style-type:decimal;

to an element below:

decimal
Causes the list to be numbered with decimal numbers; 1., 2., 3., etc. This is most browser's default for ordered lists
lower-roman
Causes the list to be numbered with lower-case roman numerals; i., ii., iii., etc.
upper-roman
Causes the list to be numbered with upper-case roman numerals; I., II., III., etc.
lower-alpha
Causes the list to be labeled with lower-case alphabet characters; a., b., c., etc.
upper-alpha
Causes the list to be labeled with upper-case alphabet characters; A., B., C., etc.
disc
(not "disk") Causes the list to be bulleted with a disc character, a filled circle. This is most browser's default for unordered lists in the first level.
circle
Causes the list to be bulleted with a circle character, an outlined circle.
square
Causes the list to be bulleted with a square character, whether outlined or filled depends on the browser. This is most browser's default for unordered lists in second and subsequent levels
none
Causes the list to have no label or bullet. The effect is like a left paragraph indent.

- added on 2024-03-29 06:36:39

The "Contents" heading

I've updated the patch to adhere to the I18N guidelines.

This patch will by default put a heading line of "Contents" right before the table. The reason is because applied styles (such as the example above) may render boxes around the contents or may wish to apply style elements to the contents heading itself. This styling is not possible if the heading is done outside the macro (such as with a typical =Contents= text).

However if a site does not wish this heading to be applied, it can be hidden through an additional CSS rule placed in the theme's common.css file:

   #table-of-contents-heading {display:none;}

Discussion

Nice patch ;-). -- AlexanderSchremmer 2006-01-14 12:16:35

How about allowing options to the macro like [[TableOfContents("roman")]] in order to obtain different numbering style? Likewise I'd wish a page option #style-of-numbering roman to have the headings themselves numbered as desired.

Remaining issues / questions:

I've updated a new patch (as a single file). Changed id to css class. Included basic css rules in the different themes. I did not by default use a float, because I figured many people would not like the float behavior (especially without also including lots of clear:both for heading elements). Note that by changing to class from id, this patch will now definitely not work at all without the referenced dependency patch. Also, what in PEP8 am I violating? -- DeronMeranda 2006-01-16 16:06:45

2024-03-29 06:36:39

Plan


MoinMoin: MoinMoinPatch/AlterTableOfContentsAppearanceWithStyleSheet (last edited 2007-10-29 19:07:44 by localhost)