I would like to have headings in an article to be automatically numbered as follows:
<h2>a</h2> <!-- 1 -->
<h3>a</h3> <!-- 1.1 -->
<h4>a</h4> <!-- 1.1.1 -->
<h4>a</h4> <!-- 1.1.2 -->
<h3>a</h3> <!-- 1.2 -->
<h4>a</h4> <!-- 1.2.1 -->
<h5>a</h5> <!-- 1.2.1.1 -->
<h6>a</h6> <!-- 1.2.1.1.1 -->
For this to accomplish I have found a css on the Internet, which I had to modify a bit (it originally had a dot after the last digit in the numbering; and I want to have em space between numbering and the title itself). I tested it out as follows:
<!DOCTYPE html>
<html>
<head>
<style>
/* source: http://philarcher.org/css/numberheadings.css
* info: https://philarcher.org/diary/2013/headingnumbers/
* author: Phil Archer
* licence: https://creativecommons.org/licenses/by/3.0
*/
body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h5 {counter-reset: h6}
h2:before {counter-increment: h2; content: counter(h2) "\002003" } /* \002003 = U+2003 =   = em space */
h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) "\002003" }
h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) "\002003" }
h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "\002003" }
h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "\002003" }
h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before {content: ""; counter-increment: none}
</style>
</head>
<body>
<h2>a</h2> <!-- 1 -->
<h3>a</h3> <!-- 1.1 -->
<h4>a</h4> <!-- 1.1.1 -->
<h4>a</h4> <!-- 1.1.2 -->
<h3>a</h3> <!-- 1.2 -->
<h4>a</h4> <!-- 1.2.1 -->
<h5>a</h5> <!-- 1.2.1.1 -->
<h6>a</h6> <!-- 1.2.1.1.1 -->
</body>
</html>
However, when I add the css to www/templates/horme_3/css/custom.css
(of course, I prepended .headingNumbering
to all code lines in the css) and edit the menu item (which links to the specified article) and add "headingNumbering" to Page Class.
It works as expected, however, the numbering does not work, I have no idea why:
<h2>a</h2> <!-- 1 -->
<h3>a</h3> <!-- 0.1 -->
<h4>a</h4> <!-- 0.1.1 -->
<h4>a</h4> <!-- 0.1.2 -->
<h3>a</h3> <!-- 0.2 -->
<h4>a</h4> <!-- 0.2.1 -->
<h5>a</h5> <!-- 0.2.1.1 -->
<h6>a</h6> <!-- 0.2.1.1.1 -->
Could someone help me solve this? The solution does not have to use the mentioned css, however, the numbering must be automatic (as in the example: I need to input <h2>a</h2>
, nothing more) and there should be a way to override it (as using the nocount
in the css above).
Update: I use Horme 3 template.
<h#>
tags; the only one is the default, template.css that might somehow collide with theheadingNumbering
css, though I can’t see how (if at all). (3) The code in my question is ‘my’ code, that is the modified code heavily based on the Phil’s code. Still it works, however outside Joomla only. – tukusejssirs Apr 11 at 14:09!important
on all of the declarations. Otherwise, what is the loading order of all of the style scripts/declarations? Are you able to provide all of the css details in a pastebin link? – mickmackusa♦ Apr 11 at 22:26