Setting CSS counter from Confluence Page

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.

3 answers

1 accepted

This widget could not be displayed.
Sean Curtis Atlassian Team May 09, 2013

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.

Thank you, that worked exactly as desired.

-v

This widget could not be displayed.
Sean Curtis Atlassian Team May 09, 2013

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) ". "
}

This widget could not be displayed.
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.

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Tuesday in Jira

What modern development practices are at the heart of how your team delivers software?

Hey Community mates! Claire here from the Software Product Marketing team. We all know software development changes rapidly, and it's often tough to keep up. But from our research, we've found the h...

86 views 0 1
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you