Numbered headings per CSS only

Here follows the CSS only approach for numbered headings (see the numberedheadings plugin for a different approach).

The following CSS code will number all headlines of your wiki content, as well as their TOC counterpart. Put it either in one of your template's CSS files (and a second time in your print.css, if you want the numbers to be printable) or in a userstyle.css in your ./conf directory (or userall.css if it should also be used for the print version):

userstyle.css

.dokuwiki .page {counter-reset: level1;}
.dokuwiki #dw__toc:before, .dokuwiki #dw__toc:after {counter-reset: level1; content: "";}
.dokuwiki #dw__toc h3:before{content: ""}
 
.dokuwiki .page h1, .dokuwiki ul.toc li.level1 {counter-reset: level2;}
.dokuwiki .page h2, .dokuwiki ul.toc li.level2 {counter-reset: level3;}
.dokuwiki .page h3, .dokuwiki ul.toc li.level3 {counter-reset: level4;}
.dokuwiki .page h4, .dokuwiki ul.toc li.level4 {counter-reset: level5;}
.dokuwiki .page h5, .dokuwiki ul.toc li.level5 {}
 
.dokuwiki .page h1:before,
.dokuwiki ul.toc li.level1 a:before {
    content: counter(level1) " ";
    counter-increment: level1;
}
.dokuwiki .page h2:before,
.dokuwiki ul.toc li.level2 a:before {
    content: counter(level1) "." counter(level2) " ";
    counter-increment: level2;
}
.dokuwiki .page h3:before,
.dokuwiki ul.toc li.level3 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) " ";
    counter-increment: level3;
}
.dokuwiki .page h4:before,
.dokuwiki ul.toc li.level4 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) " ";
    counter-increment: level4;
}
.dokuwiki .page h5:before,
.dokuwiki ul.toc li.level5 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) " ";
    counter-increment: level5;
}

This works for the default template. For other templates every occurence of .page should be substituted with the template's “content surrounding box” (probably “#content” or similar).

• no restriction to certain pages (yet; could be done through another plugin; in the standard template it could at least be restricted by adding .mode_show)
• The first h1 which kind of works as a page title is numbered

userstyle.css

.dokuwiki .page {counter-reset: level1;}
.dokuwiki #dw__toc:before,
.dokuwiki #dw__toc:after {counter-reset: level1; content: "";}
.dokuwiki #dw__toc h3:before{content: ""}
 
.dokuwiki .page h1, .dokuwiki ul.toc li.level1 {counter-reset: level2;}
.dokuwiki .page h2, .dokuwiki ul.toc li.level2 {counter-reset: level3;}
.dokuwiki .page h3, .dokuwiki ul.toc li.level3 {counter-reset: level4;}
.dokuwiki .page h4, .dokuwiki ul.toc li.level4 {counter-reset: level5;}
.dokuwiki .page h5, .dokuwiki ul.toc li.level5 {}
 
.dokuwiki .page h1:before,
.dokuwiki ul.toc li.level1 a:before {
    content: counter(level1) " ";
    counter-increment: level1;
}
.dokuwiki .page h1.sectionedit1:before,
.dokuwiki ul.toc li.level1:first-child a:before {
    content: none;
}
.dokuwiki .page h2:before,
.dokuwiki ul.toc li.level2 a:before {
    content: counter(level1) "." counter(level2) " ";
    counter-increment: level2;
}
.dokuwiki .page h3:before,
.dokuwiki ul.toc li.level3 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) " ";
    counter-increment: level3;
}
.dokuwiki .page h4:before,
.dokuwiki ul.toc li.level4 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) " ";
    counter-increment: level4;
}
.dokuwiki .page h5:before,
.dokuwiki ul.toc li.level5 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) " ";
    counter-increment: level5;
}

I use several h1s in my wiki so it doesn't “steal” one level from my TOC. I use the first h1 as the title of the page which I don't want to be numbered.

• If you have only one h1 and use h2, it will be numbered 0.1 in the document and not numbered at all in the TOC

In this case, you may use this variant of the CSS file (tested on Bootstrap3 theme)

userstyle.css

.dokuwiki .page {counter-reset: level1;}
.dokuwiki #dw__toc:before,
.dokuwiki #dw__toc:after {counter-reset: level1; content: "";}
.dokuwiki #dw__toc h3:before{content: ""}
 
.dokuwiki .page h1, .toc-body ul.toc li.level1 {counter-reset: level2;}
.dokuwiki .page h2, .toc-body ul.toc li.level2 {counter-reset: level3;}
.dokuwiki .page h3, .toc-body ul.toc li.level3 {counter-reset: level4;}
.dokuwiki .page h4, .toc-body ul.toc li.level4 {counter-reset: level5;}
.dokuwiki .page h5, .toc-body ul.toc li.level5 {}
 
.dokuwiki .page h1:before,
.dokuwiki ul.toc li.level1 a:before {
    content: counter(level1) ". ";
    counter-increment: level1;
}
.dokuwiki .page h1.sectionedit1:before,
.dokuwiki ul.toc li.level1 a:before {
    content: none;
}
.dokuwiki .page h2:before,
.dokuwiki ul.toc li.level2 a:before {
    content: counter(level2) ". ";
    counter-increment: level2;
}
.dokuwiki .page h3:before,
.dokuwiki ul.toc li.level3 a:before {
    content: counter(level2) "." counter(level3) ". ";
    counter-increment: level3;
}
.dokuwiki .page h4:before,
.dokuwiki ul.toc li.level4 a:before {
    content: counter(level2) "." counter(level3) "." counter(level4) ". ";
    counter-increment: level4;
}
.dokuwiki .page h5:before,
.dokuwiki ul.toc li.level5 a:before {
    content: counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) ". ";
    counter-increment: level5;
}

This may have been better achieved by using the PageTitle Plugin and the original style here, but then I would have to manually rename each page of my wiki.

The combo plugin used also a CSS approach with configuration