Use this filter to prevent loading translations in your current locale and kee the UI in english.

The function must return false to disable loading the translations in the current locale.

// Prevents translations from being loaded to keep the UI in english
add_filter('joli_toc_load_translations', '__return_false');

The post joli_toc_load_translations appeared first on wpjoli.

The maximum heading depth for the timeline is H3.

Timeline TOC Concept

• H2 Markers are bigger
• H3 Markers are smaller (and optional)
• The spacing between markers is proportionate to their position within the article
• The timeline can also be used as a vertical progress bar
• A width-adjustable “invisible” area will trigger the expansion of the timeline on hover

The timeline has 2 states:

Collapsed: The timeline is visible but does not show any labels, only the markers. The markers are smaller.

Expanded: The timeline shows the headings as labels next to the markers, and the markers enlarge and include their respective number from the heading numbering.

An adjustable animation happens during the transition between the 2 states.

How to activate the Timeline TOC

Under Timeline TOC > Timeline table of contents, switch on the Activate timeline table of contents option.

The timeline will be activated with the default values.

How to adjust the trigger area

The trigger area will trigger the expansion of the timeline when it is in collapsed state. To prevent unwanted expansions of the timeline, you can adjust :

• The width of the area
• The delay (so that if you mouse hovers quickly it does not expanded it)
• The animation duration (from instant to a longer animation)

Here is how to adjust those settings:

Expanded state area

Once the timeline is expanded, its container area width can also be adjusted. This will determine how the timeline will automatically collapse.

While the mouse remains within the boundaries of the expanded area, the timeline will remain expanded. As soon as it leaves, the timeline will collapse.

On mobile, the expanded area takes up all the horizontal space and the background is blurred.

Adjust the value here:

How to keep the timeline static between collapsed/expanded states

What determines if the timeline will expand with a slide-in effect from the edge is the difference between these 2 values:

• Horizontal offset
• Horizontal offset (expanded)

By default, these values are different. This creates a slide-in animation.

To prevent the animation, you need to set the exact same 2 values, like so:

The post Timeline TOC appeared first on wpjoli.

Add custom content at the bottom of the slide-out panel.

The container’s selector of the custom content is .wpj-jtoc--slide-out-custom-box-bottom

add_action( 'joli_toc_slide_out_box_bottom', function (){
    echo do_shortcode('[my-shortcode]);
});

The post joli_toc_slide_out_box_bottom appeared first on wpjoli.

Add custom content at the top of the slide-out panel.

The container’s selector of the custom content is .wpj-jtoc--slide-out-custom-box-top

add_action( 'joli_toc_slide_out_box_top', function (){
    echo do_shortcode('[my-shortcode]);
});

The post joli_toc_slide_out_box_top appeared first on wpjoli.

How to add a Slide-out Table of Contents

Prerequisite: an inline table of contents must be in the content for the Slide-out TOC to work.

After ensuring you have an inline table of contents, switch on Activate slide-out table of contents (under Floating TOC > Slide-out table of contents), select the desired Floating mode and adjust the settings to your liking.

How to adjust the Slide-out appearance ?

By default, the slide-out TOC looks is based on the selected theme.

Adjust the Padding for more or less empty space around the TOC.

For a cleaner look of the table of contents within the Slide-out, switch on the Blend into panel option

How to add custom content in the Slide-out panel ?

To add custom content at the top/bottom of the panel, you need to:

1. Switch on Top box / Bottom box (under Slide-out TOC > Slide-out custom content boxes).
2. Add custom content through the top or the bottom action hook

The content must be in HTML. You can use shortcodes as well.

This way, you can add custom elements such as display Ads or Call-To-Action.

The post Slide-out TOC appeared first on wpjoli.

Floating modes for the Floating Table of Contents

Originally, the floating TOC was only available with the “active heading” mode. This mode dynamically updates the current section the reader is viewing.

Since v3, there 3 additional modes for extra flexibility.

Active Heading

Show the active section with optional navigation buttons.

TOC Title

This mode uses the TOC title and icon (if it’s set) and remains static.

Custom Icon

This mode is the most minimalistic mode showing only an icon of your choice.

Custom Text

This mode shows a custom text.

How to add a Floating Table of Contents

Prerequisite: an inline table of contents must be in the content for the floating TOC to work.

After ensuring you have an inline table of contents, switch on Activate floating table of contents (under Floating TOC > Floating table of contents), select the desired Floating mode and adjust the settings to your liking.

I only want to show the Floating TOC on my page, how to do ?

If you don’t want an inline TOC while keeping the Floating TOC feature, you need to keep the inline TOC hidden.

To do so, go to General > Table of contents and switch on Hide main table of contents.

The floating widget is (partially) hidden, what to do ?

When using page builders such as Divi, Elementor, etc, it is likely that the table of contents gets nested in multiple DIV elements. This can lead to visual issues.

To get around this, activate the Compatibility mode and check if this solves the problem.

The floating widget is misaligned or is shown too early

By default, the floating widget is positioned relative to the inline TOC in the content.

In the case the content container could not be detected automatically, you will have to set it manually to provide a context for the floating TOC.

To determine what your content container selector, browse to a page where the floating TOC is activated and around the top of the article (ideally on the inline table of contents), right click and press “Inspect” to bring up the element inspector.

As you hover elements, it will highlight the corresponding area in the browser.

The content container is normally the parent element of the table of contents (unless you placed your TOC in other elements like a “column”).

What we are looking for is the element that “wraps” the entire article (without the title).

In the screen capture below, when hovering the <div class="entry-content single-content"> element, it highlights the article wrapping element. This is our content container.

Now the actual selector will be one of the class name preceded by a dot “.” and become .entry-content

The selector must be as specific as possible so that it cannot be mistaken for another element. It doesn’t have to be a single class name, but it can be any type of valid CSS selector. It can also be an id like #content-container.

Here are some valid selector for this example:

• .entry-content
• .entry-content-wrap .entry-content
• .entry-content.single-content

The selector must match the content container for every alike page.

After you’ve determined the content container selector, enter it in Content selector (under General > Content container) and save the settings.

The post Floating TOC appeared first on wpjoli.

How to activate the Sticky Table of Contents ?

1. From the settings, under General > Sticky Table of Contents, switch on the Activate Sticky TOC option.

2. Enable widget support for the post types you will be using the Sticky TOC on and save the settings.

3. In the WordPress menu, go to Appearance > Widgets and add Joli Table of Contents to the sidebar of your choice (usually the main sidebar but the actual sidebar name will vary from theme to theme).

For simplicity, you can insert the Joli TOC Block in the sidebar but you can also use the Shortcode.

Once you have inserted the table of contents, just Save / Update your Sidebar.

If there are other elements in your sidebar, it is recommended to place the TOC as the last item of the sidebar.

How to adjust the Sticky TOC ?

If the sticky TOC looks too close to the upper edge of the viewport, increase the value of the Sticky TOC offset top option.

If your articles are very long, you can also enable the Auto-scroll to active heading option so that the TOC auto-scrolls and the active headings remain visible at all times.

The post Sticky TOC appeared first on wpjoli.

The inline Table of Contents is not showing

• Check the Minimal headings count (under General > Table of Contents) option value. By default it is set to 3 and the TOC will not show if there are less than 3 headings on the page. Set to 0 to show always.
• Make sure the Hide main table of contents (under General > Table of Contents) option is switched off.

Options or not applying correctly

• If you are using the Block, open the block settings, and check for any setting override (marked with a red star *)
• If you are using the Shortcode, make sure you did not use a custom attribute that could override the Global settings.
• If you are using Post type settings, make sure you are saving the relevant Post type settings (it will show next to the Save button which settings you are currently editing)

The Floating TOC is not showing or is partially hidden

• If your site has a fixed header, the floating TOC could be hidden behind it. Adjust the Floating vertical offset to push the floating TOC down.
• Try activating the Compatibility mode (under Floating TOC > Floating Table of contents)
• Increase the z-index value of the floating TOC by adding (see how below)

To increase the z-index value of the Floating TOC, add this custom CSS under Styles > Custom CSS and increase the value if needed.

:root{
    --jtoc-floating-toc-z-index: 10000;
}

One or many colors from the palette are not applying

• Check for any overrides under the Styles tab. For example, you set the Background color in the palette to Red (color #1) and you expect the background color to be red. But at the same time, you also set the Table of contents Background color (under Styles > Table of contents) to Blue. The value from the Styles tab has a higher priority and overrides the palette. Unset this color or change it accordingly.

Some headings are missing

• Make sure your heading is covered by the selected Headings depth (under Headings > Headings processing). If your missing is of type H4, you need to have the H4 type checked (in blue)
• If using the Block, check for any override in the Block settings.
• Make sure your article is correctly structured (from H2 to H6). Basically the first heading should be of type H2.

The heading structure looks awkward

• Make sure your article is correctly structured (from H2 to H6) and does not skip levels. For example, if a heading is of type H2, its direct child should be of type H3 (not H4 or H5).

The table of contents shows unwanted bullets or spacing

Your theme may override the ol / li list CSS styles generated by the TOC (despite being highly specific by default).

To get around this, you may need to add custom CSS rules (under Styles > Custom CSS) with either a higher CSS specificity or by leveraging the !important tag.

The post Troubleshooting appeared first on wpjoli.

Use a custom icon for the TOC title icon.

Adjust the --jtoc-title-icon-size CSS Variable to set a custom icon size.

add_filter('joli_toc_title_icon', 'my_custom_title_icon', 10, 1);

function my_custom_title_icon( $icon ){ 
    return <<<HTML
        <style>
            .--has-icon svg {--jtoc-title-icon-size: 24px;}
        </style>
        <svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M91.89 238.457c-29.899 0-54.133 24.239-54.133 54.134 0 29.899 24.234 54.137 54.133 54.137s54.138-24.238 54.138-54.137c0-29.896-24.239-54.134-54.138-54.134z" fill="#E5594F"></path><path d="M91.89 462.463c-29.899 0-54.133 24.239-54.133 54.139 0 29.895 24.234 54.133 54.133 54.133s54.138-24.238 54.138-54.133c0-29.9-24.239-54.139-54.138-54.139z" fill="#C45FA0"></path><path d="M91.89 686.475c-29.899 0-54.133 24.237-54.133 54.133 0 29.899 24.234 54.138 54.133 54.138s54.138-24.238 54.138-54.138c0-29.896-24.239-54.133-54.138-54.133z" fill="#F39A2B"></path><path d="M941.26 234.723H328.964c-28.867 0-52.263 23.4-52.263 52.268v3.734c0 28.868 23.396 52.269 52.263 52.269H941.26c28.869 0 52.269-23.401 52.269-52.269v-3.734c-0.001-28.868-23.4-52.268-52.269-52.268z" fill="#F0D043"></path><path d="M941.26 682.74H328.964c-28.867 0-52.263 23.399-52.263 52.268v3.734c0 28.863 23.396 52.269 52.263 52.269H941.26c28.869 0 52.269-23.405 52.269-52.269v-3.734c-0.001-28.868-23.4-52.268-52.269-52.268z" fill="#4A5699"></path><path d="M709.781 458.729H328.964c-28.867 0-52.263 23.4-52.263 52.269v3.734c0 28.873 23.396 52.269 52.263 52.269h380.817c28.866 0 52.271-23.396 52.271-52.269v-3.734c0.001-28.869-23.405-52.269-52.271-52.269z" fill="#E5594F"></path></g></svg>
    HTML;
}

The post joli_toc_title_icon appeared first on wpjoli.