Unable to indent sub-headers on V2

  • Resolved sturley

    (@sturley)


    2 years, 2 months ago

    Hello – I have been trying to recreate my Joli TOC on v2, but have been able to get my sub-headers to indent under the main headers. I thought I would use the Hierarchy offset setting but nothing happens when I make changes to that one. Any help or guidance would be appreciate! We did use some CSS in V1, but it looks like some of that may not be necessary for the new version…so I’m not sure what impact that may be having.
    Image from the Joli TOC v1


    Image from the Joli TOC v2

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author WPJoli

    (@wpjoli)

    Hi,

    For some reason I can’t see your images.

    From my understanding, you may want to play with the STYLES settings.

    The TOC is divided in multiple parts. From the STYLES tab, hover the “Visualise (i)” icon to understand what setting you are adjusting.

    From there, you need to play with margins/paddings settings, most likely for the TABLE OF CONTENTS BODY or HEADINGS.

    Let me know if this helps.

    Thank you.

    Thread Starter sturley

    (@sturley)

    Thank you so much for replying. The issue I’m finding with padding/margins for Table of Contents Body or Headings is they move/adjust everything. In the past H2 was lined up on the left, and H2 was indented under the H1 headings.
    I’m going to try and upload the images again. And I am also including the CSS we used in version 1 to achieve this:

    /* indentation and spacing between items in TOC MAIN SECTION HEADERS in bullet lists*/
    joli-toc-wrapper nav#joli-toc ul.joli-nav li.item {
    margin-bottom: 1.3em;
    margin-left: -18px;
    }

    /* indentation and spacing between items in TOC SUBSECTION HEADER items in bullet lists */
    joli-toc-wrapper nav#joli-toc ul.joli-nav li.subitem {
    margin-bottom: 1.0em;
    margin-top: 1.0em;
    margin-left: 0px;
    }

    TOC v1

    For WordPress

    I hope the images are viewable this time. Thank you again for any help you can provide!

    • This reply was modified 2 years, 2 months ago by sturley.
    Plugin Author WPJoli

    (@wpjoli)

    Thank you for posting the images. So basically the hierarchical view is not working in v2 ?

    Normally that would be the hierarchy offset setting, you had it right.

    If this does not change anything, maybe your theme is overriding the CSS property.

    Maybe you can fix it by adding the !important marker.

    Try this custom CSS (this will allow you to adjust the hierarchy offset from the settings page still, so you need to set it to something else than 0) :

    .wpj-jtoc--toc ul.wpj-jtoc--items .wpj-jtoc--items, .wpj-jtoc--toc ol.wpj-jtoc--items .wpj-jtoc--items {
    margin-left: var(--jtoc-hierarchy-offset, 16px) !important;
}

    If this does not work, please send the URL of the page here or to [email protected]

    Thanks!

    Thread Starter sturley

    (@sturley)

    Thank you so much! That CSS worked! I really appreciate the help

    Plugin Author WPJoli

    (@wpjoli)

    Excellent !

    Thank you for the feedback ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Unable to indent sub-headers on V2’ is closed to new replies.