How to use the plugin in Joomla?

DJ-TOC works in Joomla articles. Using an empty (new) article as an example, we will show you how to use it quickly and easily.

1. Create a new article and open the web builder.

Click the "New layout" button. Now click the "pencil" icon to enter settings. Choose the layout for your article.

We choose the simple 2 columns layout, where the right column will be used for the website content and left column for the DJ-TOC element.

Click the right column to enter the content. Our example includes sample content and example headings (h1,h2,h3,h4).

Now add the TOC element in the left column. Choose DJ-TOC from the list of installed YOOtheme Pro elements.

Click the left column (DJ-TOC item) to open the settings. You can enter the "TOC Heading" name and the "Selector of TOC (ID) name.

In order to make the article structure look correct (DJ-Toc activated), it is necessary to copy the "Selector of TOC (ID)" (which can of course be edited) into the column settings (in which we have the content). To do that, open the layout properties and paste the copied ID.

Now refresh your website and you should see the correct structure.

Click the "DJ-TOC" element to enter settings.

There are many settings, that you can configure, depending to your needs.

1. Styles and icons for each level of the table of contents

You can easily customize the table of contents to suit your needs by applying the appropriate styles for each level. Additionally, each level can be assigned an icon.

2. Header style

Similarly, for the header, there is the option to define its appearance.

3. Style for the progress bar

In the element settings, you can specify the height and color of the progress bar.

We made a quick customization. That is what the final result looks like on the website: