How to have nested number lists in Confluence

Still need help?

The Atlassian Community is here for you.

Ask the community

Platform Notice: Server and Data Center Only - This article only applies to Atlassian products on the server and data center platforms.

The information in this page relates to customisations or development changes in Confluence. Consequently, Atlassian Support cannot guarantee to provide any support for the steps described on this page. Please be aware that this material is provided for your information only and that you use it at your own risk.

 The steps described in this page has been tested on Confluence 5.8.4

Problem

Currently, numbering style in Confluence is as follows

However, some users would like this style to be changed and using a nested number list instead

Diagnosis

This style is not readily available in Confluence. 

Workaround

To implement the style change within a space:

Add the following CSS code on Confluence space Stylesheet.

(warning) This workaround includes a customization and might not be compatible with previously implemented customization in Confluence. Please try the following workaround in a test space first.

  1. Go to the space that you would like this numbering be implemented on
  2. Go to Space Tools > Look and Feel > Stylesheet
  3. Edit > copy and paste the following code > Save
ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

 

To implement the style change within a specific list:

Utilize the usage of User Macros.

  1. Create a user macro by going to Confluence Admin > User Macros > Create a User Macro. For example:

    Field
    Value
    Macro namenestedlist
    VisibilityVisible to all users in the Macro Browser
    Macro TitleNested Number List
    DescriptionChange number list style to nested number list
    CategoriesConfluence Content
    Icon URLYou can leave this field blank
    Documentation URLYou can leave this field blank
    Macro body processingRendered
    Template

    Enter the code below in the template field.

     

    ## @noparams
    <div class="nestedlist">$body</div>
  2. Define the CSS for this user macro by going to the space you would like to implement the user macro in > Space Tools > > Look and Feel > Stylesheet

  3. Edit > copy and paste the following code > Save

    .nestedlist ol {
        counter-reset: item;
    }
    .nestedlist ol li {
        display: block;
        position: relative;
    }
    .nestedlist ol li:before {
        content: counters(item, ".")".";
        counter-increment: item;
        position: absolute;
        margin-right: 100%;
        right: 10px; /* space between number and text */
    }
  4. Now you can add the macro to your Confluence page using the Macro Browser. Number lists entered into the body of the macro placeholder will change its style to numbered nested lists

Last modified on Nov 2, 2018

Was this helpful?

Yes
No
Provide feedback about this article
Powered by Confluence and Scroll Viewport.