DokuWiki

It's better when it's simple

User Tools

Site Tools


tips:numbered_headings

This is an old revision of the document!


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:

userstyle.css
div.dokuwiki .page {counter-reset: level1;}
div.dokuwiki div.toc:before, div.dokuwiki div.toc:after {counter-reset: level1; content: "";}
 
div.dokuwiki .page h1, div.dokuwiki ul.toc li.level1 {counter-reset: level2;}
div.dokuwiki .page h2, div.dokuwiki ul.toc li.level2 {counter-reset: level3;}
div.dokuwiki .page h3, div.dokuwiki ul.toc li.level3 {counter-reset: level4;}
div.dokuwiki .page h4, div.dokuwiki ul.toc li.level4 {counter-reset: level5;}
div.dokuwiki .page h5, div.dokuwiki ul.toc li.level5 {}
 
div.dokuwiki .page h1:before,
div.dokuwiki ul.toc li.level1 a:before {
    content: counter(level1) " ";
    counter-increment: level1;
}
div.dokuwiki .page h2:before,
div.dokuwiki ul.toc li.level2 a:before {
    content: counter(level1) "." counter(level2) " ";
    counter-increment: level2;
}
div.dokuwiki .page h3:before,
div.dokuwiki ul.toc li.level3 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) " ";
    counter-increment: level3;
}
div.dokuwiki .page h4:before,
div.dokuwiki ul.toc li.level4 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) " ";
    counter-increment: level4;
}
div.dokuwiki .page h5:before,
div.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).

Drawbacks

  • works only in “modern” browsers (no IE, have tested in Win FF and Opera; Safari is probable)
  • no restriction to certain pages (yet; could be done through another plugin)
tips/numbered_headings.1358174620.txt.gz · Last modified: 2013-01-14 15:43 by 93.159.251.2

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki