DecimalOutlineListsAndHeadings

Summary: Decimal Outline Lists and Headings

Version: 1.0

Prerequisites: CSS2

Status: Stable

Maintainer: ccox

License: CC0

Categories: CSS

Users: (view ? / edit)

Discussion: DecimalOutlineListsAndHeadings-Talk ?

Questions answered by this recipe

How can I have an ordered list using numbers like 1, 2, 2.2, 2.3, 2.3.1, etc.?

How can I have headings using numbers like 1, 2, 2.2, 2.3, 2.3.1, etc.?

Installation

For Lists

Add the following to your pub/local.css (or the css for your skin):

 
/* Decimal section outine list */
.decimaloutlinelist ol {
  counter-reset: dsection;
  list-style-type: none;
}

.decimaloutlinelist li::before {
  counter-increment: dsection;
  content: counters(dsection,".") " ";
}

For Headings

You will need both some CSS and some changes to your config.php.

Add the following to your pub/local.css (or the css for your skin):

 
/* Decimal section outline via headings */
.decimaloutlineheadings h1 {counter-reset: h2}
.decimaloutlineheadings h2 {counter-reset: h3}
.decimaloutlineheadings h3 {counter-reset: h4}
.decimaloutlineheadings h4 {counter-reset: h5}
.decimaloutlineheadings h5 {counter-reset: h6}
.decimaloutlineheadings h2:before {counter-increment: h2; content: counter(h2) ". "}
.decimaloutlineheadings h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
.decimaloutlineheadings h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}
.decimaloutlineheadings h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
.decimaloutlineheadings h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
.decimaloutlineheadings h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before { content: ""; counter-increment: none }

Then add the following to your config.php:

 
# we can apply class=nocount in particular to exempt headings under decimaloutlineheadings class
$WikiStyleApply['h2'] = 'h2';
$WikiStyleApply['h3'] = 'h3';
$WikiStyleApply['h4'] = 'h4';
$WikiStyleApply['h5'] = 'h5';
$WikiStyleApply['h6'] = 'h6';

Usage

For lists:

>>decimaloutlinelist<<
# Numbered List
# Second Item
## Sub Item
### Sub Sub Item
### Second Sub Sub Item \\
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\\
\\
%lfloat%http://pmichaud.com/img/misc/pc.jpg%% \\
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
## Second Sub Item
>><<

Numbered List
Second Item
1. Sub Item
  1. Sub Sub Item
  2. Second Sub Sub Item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
2. Second Sub Item

For headings:

>>decimaloutlineheadings<<
! Paper Title (a first level heading, required!)
!! Second Level Heading
Here is some content.
(:include PmWiki/PmWiki:)
!!! Third Level Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
!! Another Second Level Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
!! %apply=h2 class=nocount% What's this... oh... exempt this Second Level Heading
!!! Third Level Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
!!! Another Third Level Heading
More content.
!!!! Forth Level Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
!!!! Another Forth Level Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
!!!!! Fifth Level Heading (can't go lower)
!!!!!! Ok, I Lied, but this is as deep as it goes!!
!!!!!! Sorry, no more...
!!! Back to Third Level Heading
!! Back to Second Level Heading
>><<

Paper Title (a first level heading, required!)

Second Level Heading

Here is some content. PmWiki is a wiki-based content-management system (CMS) for collaborative creation and maintenance of websites.

PmWiki pages look and act like normal web pages, except they have an "Edit" link that makes it easy to modify existing pages and add new pages into the website, using basic editing rules. You do not need to know or use any HTML or CSS. Page editing can be left open to the public or restricted to small groups of authors.

Key PmWiki Features

Custom look-and-feel: A site administrator can quickly change the appearance and functions of a PmWiki site by using different skins and HTML templates. If you can't find an appropriate skin already made, you can easily modify one or create your own.

Access control: PmWiki password protection can be applied to an entire site, to groups of pages, or to individual pages. Password protection controls who can read pages, edit pages, and upload attachments. PmWiki's access control system is completely self-contained, but it can also work in conjunction with existing password databases, such as .htaccess, LDAP servers, and MySQL databases.

Customization and plugin architecture: One principle of the PmWikiPhilosophy is to only include essential features in the core engine, but make it easy for administrators to customize and add new markup. Hundreds of features are already available by using extensions (called "recipes") that are available from the PmWiki Cookbook.

PmWiki is written in PHP and distributed under the General Public License. It is designed to be simple to install, customize, and maintain for a variety of applications. This site is running pmwiki-2.3.37.

PmWiki is a registered trademark of Patrick R. Michaud. Since January 2009 PmWiki is actively maintained by Petko Yotov under the oversight of Dr Michaud.

PmWiki's home on the web is at www.pmwiki.org.

Third Level Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Another Second Level Heading

What's this... oh... exempt this Second Level Heading

Third Level Heading

Another Third Level Heading

Forth Level Heading

Another Forth Level Heading

Fifth Level Heading (can't go lower)

Ok, I Lied, but this is as deep as it goes!!

Sorry, no more...

Back to Third Level Heading

Back to Second Level Heading

Notes

The headings version was created for long documents that would be hard to do with a list.

Change log / Release notes

Comments

See discussion at DecimalOutlineListsAndHeadings-Talk ?

mjw2019-08-20 does not seem to be working

User notes ? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.