Number and indent headers, and indent contents

By xngo on February 23, 2019

Create and paste the following code in ..\conf\userall.css. Note: Go to Admin->Configuration Settings and click on Save for the changes to take effect.

/* Number and indent headers, and indent contents */
/* ********************************************** */
.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;
}
 
/* Second xpath is to handle Include plugin. */
div.dokuwiki div.page > h1, div.dokuwiki div.page div:not(#dw__toc) > h1 { margin-left:  0px; color: orange; } /*Don't use "em" because level2's paragraph will not indent correctly.*/
div.dokuwiki div.page > h2, div.dokuwiki div.page div:not(#dw__toc) > h2 { margin-left: 10px; color: indigo; }
div.dokuwiki div.page > h3, div.dokuwiki div.page div:not(#dw__toc) > h3 { margin-left: 15px; color: green;  }
div.dokuwiki div.page > h4, div.dokuwiki div.page div:not(#dw__toc) > h4 { margin-left: 20px; color: blue;   }
div.dokuwiki div.page > h5, div.dokuwiki div.page div:not(#dw__toc) > h5 { margin-left: 25px; color: violet; }
 
div.dokuwiki div.page > div.level1, div.dokuwiki div.page div:not(#dw__toc) > div.level1 { margin-left:  0px; border-left-style: dotted; border-left-width: thin; border-left-color: orange; }
div.dokuwiki div.page > div.level2, div.dokuwiki div.page div:not(#dw__toc) > div.level2 { margin-left: 10px; border-left-style: dotted; border-left-width: thin; border-left-color: indigo; }
div.dokuwiki div.page > div.level3, div.dokuwiki div.page div:not(#dw__toc) > div.level3 { margin-left: 15px; border-left-style: dotted; border-left-width: thin; border-left-color: green;  }
div.dokuwiki div.page > div.level4, div.dokuwiki div.page div:not(#dw__toc) > div.level4 { margin-left: 20px; border-left-style: dotted; border-left-width: thin; border-left-color: blue;   }
div.dokuwiki div.page > div.level5, div.dokuwiki div.page div:not(#dw__toc) > div.level5 { margin-left: 25px; border-left-style: dotted; border-left-width: thin; border-left-color: violet; }

Reference: https://www.dokuwiki.org/devel:css

About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.