Where to place Code for Bold H2?

  • Resolved kvncrll

    (@kvncrll)


    10 months, 3 weeks ago

    I have FAQ for How to add code to make the H2 Headers BOLD, however, were unclear where to “place” the code.

    The Code instructions indicate it should be placed in “Settings”? Please assist, and Thank you!

    Screenshot of Instructions:

    Custom styles for specific headings depth

Let’s keep pushing our customization journey by leveraging another built-in capability of Joli Table of Contents.

For each generated heading, Joli Table of Contents automatically “tags” it with a specific depth class. This way, it is easy to target different depth for styling.

The way it works is the following: if the heading is of type H2, it will get the .--jtoc-h2 CSS class. if the heading is of type H3, it will get the .--jtoc-h3 CSS class, and so on until H6 depth.

From there, and because of the way Joli Table of Contents works, we need to create a specific CSS rule to target specific heading depth. We cannot just use the .--jtoc-h2 class by itself or it will give an unwanted result.

Here is the rule that you need to follow: .--jtoc-h2>.wpj-jtoc--item-content a

This rule targets all headings of type H2, and all links contained within .wpj-jtoc--item-content, directly after the .--jtoc-h2 element.

In the following example, we are going to style every heading of type H2, and make the font weight to be bold.

The custom CSS needs to be pasted in the Custom CSS section of the settings.

.wpj-jtoc .--jtoc-h2>.wpj-jtoc--item-content a {

font-weight: bold;

}

    The page I need help with: [log in to see the link]

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

    (@wpjoli)

    Hey there !

    In the settings, under the STYLES tab, scroll all the way down to the CUSTOM CSS section. This is where you need to place the code !

    Cheers !

    Thread Starter kvncrll

    (@kvncrll)

    Hello, and Thanks for the quick solution – it works! Probably unrelated, did this change possibly affect the “Spacing” between my author name and the content? You can see a sample here.

    Perhaps this is unrelated, and if so, is there a way to decrease that spacing for the table of contents box, from double to single, sitewide?

    Thanks again, Kevin

    Plugin Author WPJoli

    (@wpjoli)

    Hello,

    Sorry for the late reply, but the TOC wrapper has a default margin top and bottom of 2rem. You can override this value by changing the corresponding CSS variable value like so by adding to the Custom CSS section:

    .wpj-jtoc {
    --jtoc-toc-root-margin-top: 0;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Where to place Code for Bold H2?’ is closed to new replies.