Setting CSS counter from Confluence Page

[avic]

We are using counters in our CSS for numbering sections subsections, etc.

We want to use h1 as the chapter number, and since each confluence page is a chapter in our 'book', we want to reset the CSS counter for h1 from the Confluence page so that we can manually define the chapter number.

So the CSS currently has something like:

.wiki-content h1:before {
  counter-increment: h1counter;
}
.wiki-content h2:before {
  counter-increment: h2counter;
  content: counter(h1counter) "." counter(h2counter) ". "
}

Is it possible to insert some <div> or other code in the Confluence page, so that we can override and set the value of h1counter = 4 using counter-reset ? Then we can use the same stylesheet, but in the Confluence pages we can define the chapter number manually for that page.

[Sean Curtis · Accepted solution]

If you're using OnDemand then you can use a {style} macro to bump the counter on each page. If you're running your own instance then you can get the {style} macro via the Adaptavist Content Formatting Macros plugin.

You can do:

{style}
.wiki-content h1 {
    counter-increment: h1counter 4;
}
{style}

Then on the next page you could bump it to 5, then 6, and so on.

[avic]

Thank you, that worked exactly as desired.

-v

[avic]

No - I don't want it to always start at 4 (that was just an example). I want it to be settable from each Confluence *Page* in the space (since each page is a chapter, I want h1 to be the chapter number and manually set the value of h1 in the CSS from the Wiki page.

[Sean Curtis]

Do you only want it to start at 4 for specific pages?

You can start a counter at 4 by doing:

.wiki-content h1 {
    counter-reset h1counter 4;
}

Also - you don't need to specify the counter-increment using :before - same with the h2. I'd do this instead:

.wiki-content h1 {
  counter-increment: h1counter;
}
.wiki-content h2 {
  counter-increment: h2counter;
}
.wiki-content h2:before {
  content: counter(h1counter) "." counter(h2counter) ". "
}