0

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 = &emsp; = 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.

|improve this question
  • It all looks good outside of your Joomla implementation. jsfiddle.net/8yjorvgx You must be experiencing some interference -- perhaps from another style sheet. Can you show us more so that we don't need to download Horme3? Are we looking at Phil's code or your code? – mickmackusa♦ Apr 10 at 22:15
  • (1) The html code in my question (the one without Joomla) does work as expected, that I already know. (2) I’ve just checked all css files for <h#> tags; the only one is the default, template.css that might somehow collide with the headingNumbering 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
  • I am not at my Joomla jov/computer today but I might suggest the common, desperate bandaid solution of throwing !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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.