right sidebar font, weight, color etc., of table of contents widget

Hi Hitesh,

It would be best to reach out the support of this TOC plugin for assistance with regards to its settings as this is out of our scope.

If you wish to use custom CSS, here is something you may wish to try:

.sidebar ul.ez-toc-list > li > a {
    color: rgb(255, 0, 0);
    font-weight: 200;
    font-size: 30px;
}

Adding this through Appearance > Customize > Additional CSS should work. However, as mentioned, it would be best to reach out to the support of this plugin.

Hope this helps. :)

Hey Fernando,

thanks for the prompt reply.

As for asking the TOC plugin guys, this wasn't an issue when the plugin is used with the main content. They have all the controls for the size, color, etc., in their dashboard.

It's just when I used the TOC in the sidebar, the plugin settings seem to lose control over the elements. So, I thought it must be the theme overriding the default plugin settings.

As for the solution, it worked, just it wasn't showing the active heading as we scroll down the post.

Any chance we could fix that?

Thanks

Hi there,

do you meant the H2 heading is behind the sticky nav?
If so check in the Plugins Advanced settings i believe there is an Offset Smooth Scroll value.
You just need to increase that.

Hey David,

Actually, this will help if you'll see these videos of before and after CSS application:

Before CSS: https://drive.google.com/file/d/1han3CsRM9Wzlbf6HCclm3-B2I89iFAgW/view?usp=sharing

After CSS: https://drive.google.com/file/d/1zEn4aTBEES68Q3Arv_sxsgF-K1V8p0q-/view?usp=sharing

You see the heading we are on in the actual post gets highlighted in the table of contents as we scroll down. After css refers to the condition where the TOC remains as it is without any effect of scrolling.

Not a big thing though, will just add to the user experience.

Thanks

Thank you for providing a screen recording.

Try adding this CSS:

.sidebar ul.ez-toc-list > li.active > a {
    font-weight: 900;
    font-size: 20px;
}

Kindly modify the values to your preference.

With regards to its settings not functioning as expected when placed in the sidebar, you’ll need to reach out to them regarding this. They might need to tweak their CSS selectors for it to work as expected in any location the TOC is placed.

Hope this clarifies. :)

I have combined your given two CSS.

.sidebar ul.ez-toc-list > li.active > a {
font-weight: 900;
color: #bb2601;
font-size: 16px;

}

.sidebar ul.ez-toc-list > li > a {
font-weight: 500;
font-size: 16px;
}

Now it just works perfectly, even better than before.

This is so empowering to have you guys by our side.

Thanks people.

You’re welcome Hitesh! We’re glad to be by your side, assisting! Feel free to reach out anytime you’ll need assistance with anything else. :)