It's better when it's simple

User Tools

Site Tools


Translations of this page?:

Learn about DokuWiki

Advanced Use

Corporate Use

Our Community

Follow us on Facebook, Twitter and other social networks.


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):

.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)
tips/numbered_headings.txt · Last modified: 2013-04-09 03:41 by ach