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:

• MoinMoin/macro/TableOfContents.py

• wiki/htdocs/classic/css/common.css

• wiki/htdocs/rightsidebar/css/common.css

• wiki/htdocs/modern/css/common.css

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-11-21 19:01:36

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:

• Can't there be trouble with mutliple TOCs all having the same ID when using Include macro?

  • Yes, instead of IDs, we should use CLASSes. The only change needed in the css would be .table-of-contents-heading instead of #table-of-contents-heading.

• Please include some hunks of clean css code for all std themes in your final diff -ur patch also.

  • For this, a simple solution would be to add a border with a color (prhaps a background color too), and float it to a border (both coherent with the theme). The rest can be customized by each author to his/her will.
• PEP8

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

• I think it was mostly about space char distribution. PEP8 (and me to) likes it to be xxx, yyy and not xxx,yyy, xxx * yyy and not xxx*yyy, xxx = yyy and not xxx=yyy. It is really minor, but it jumps in my eyes. -- ThomasWaldmann 2006-01-16 18:07:01

• There is a very small specialised patch at MoinMoinPatch/TocNumberingStyle that does the numbering thing too (without the css stuff) - PJ

2024-11-21 19:01:36

Plan

• Priority: medium

• Assigned to: ThomasWaldmann

• Status: Committed as moin--main--1.5--patch-561.

• CategoryFeatureImplemented