Table of contents

Documentation

Table of Contents addon documentation

Usage

Just drop the block in the area where you want to add a table of content and set the options.

Options

These are the options available for the Table of Contents addon:

toc_options.png

The first checkboxes let you to select what to include in the table of contents:

  • Images (<img> tag). The title attribute is used as the entry text in the table of contents.
  • Tables (<table> tag). The caption attribute is used as the entry text in the table of contents.
  • Headers (<h1> to <h6> tag). The header text is used as the entry text in the table of contents. You can use the slider to select which range of headers will be included in the TOC. Usually, in the sake of clarity, is a good idea to keep the number of levels below 4, like in the default settings (3 levels). It's a good practice to have only one <h1> header with the name of the site in a page. You probably don´t want it to be included in four index, that's why we suggest starting at level 2 in the defaults.
  • Figures (<figure> tag). The figurecaption tag is used as the entry text in the table of contents.

Next you can choose the type of list the TOC will be based upon: ordered (numbered) or unordered (with bullets). In case you choose a numbered list you are presented a series of numbering options. At this moment, the options are:

  • Only numbers (default):
    • 1.1.1.1.1.1
  • Mixed numbers and letters:
    • I.1.a.1.1.1
    • A.a.i.1.1.1
    • I.A.a.1.1.1
    • 1.A.i.1.1.1

For ordered list you can also choose whether the numbering is nested or not:

Nested Non-nested: nested_numbering.png non_nested_numbering.png

The smooth scroll option avoids abrupt changes in the page scrolling position (which would be the default browser behaviour for internal links) and applies an animation to the scrolling window, so that your visitor doesn't loose track of the relative position in the page.

Keep the table of contents always visible is an option specifically tailored for TOC placed in a sidebar (don't use it in the main area of your page!). We will discuss about how to add a TOC to the sidebar later.

When Keep the table of contents always visible is checked you can choose at which distance in pixels you want it to stay from the top of the page (distance from top). It is useful with themes that have a header positioned as fixed.

Flash background color will apply a subtle effect to highlight the element the visitor has jumped to. It changes the background of the element to the chosen color and then restores the original bakcground color. That will help to identify the entry chosen in the TOC, specially useful when there is a group of entries together at the bottom of the page. It might not be noticeable in some cases, like images. In such a case you can try adding a padding to the images so that the effect gets visible (e.g.: padding: 3px;).

Finally you can choose among a number of styles:

  • Classic
  • Modern
  • Compact
  • Unstyled

The unstyled option is intended to let you apply your own styles. Well, it is not truly completely unstyled, but we kept our CSS to a minimum. That's how the styles look like:

Classic

classic.png

Modern

modern.png

Compact

compact.png

Unstyled

unstyled.png

TOC indexer block: TOCs in the sidebar

Besides the common TOC block there is a second one called TOC indexer. You can use the TOC indexer block to mark which areas will be included in the table of content. Thats useful, for instance, to include in the sidebar a table of contents for the main area in your page: you simply add a TOC block in the sidebar and a TOC indexer block in the main area.

Excluding content

If you dont want a header, table or image to show up in the table of content just add the class no-bbTOC to it.

In the content editor (Content Block) you can add any class either editing the HTML source (advanced) or by means of the Insert/Edit Attributes (simpler).

Position the cursor in the element to exclude from the table of contents, and press "Insert/Edit Attributes" in the toolbar:

add_class_1.png

In the dialog click in the Class dropdown and select the "(value)" option. Then write no-bbTOC.

add_class_2.png

If you feel comfortable editing HTML you can also do it with the "Edit HTML Source" tool:

add_class_3.png