Customize RankMath Table Of Content Gutenberg Block

#514573
  • Resolved Jabran Ali
    Rank Math free

    Hi,

    I tried editing the Table of content but when I try to change the list style, it changes for all the headings. How can I make it like the one used on Rankmath?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Nigel
    Rank Math business

    Hello,

    Thank you for contacting Rank Math support, and sorry for any inconvenience that might have been caused due to that.

    To make the Table of Content look exactly like Rank Math, please follow the below article:
    https://rankmath.com/kb/table-of-contents-block/

    We hope that helps. We are here if you need us again.

    Thank you

    Hi,

    Thank you for replying.

    I have gone through this post many times, but there is nothing about making ordered and unordered lists in the same toc.

    We can either have Ordered list or unordered list.

    Please check this screenshot so that you can have better understanding of what I’m trying to say

    Screenshot: https://ibb.co/B2VRr4D

    Nigel
    Rank Math business

    Hello,

    Thank you for providing additional information and for your patience.

    To achieve something like the image shared, you need to add few lines of CSS codes. The CSS code is as follow:

    
    #rank-math-toc ul > li {
        list-style-type: decimal;
    }
    #rank-math-toc ul ul > li {
        list-style-type: disc;
    }
    

    We hope that helps. We are here if you need us again.

    Thank you.

    Hello,

    I have updated the sensitive data as requested. Can you please check further?

    Thank you.

    Your css doesn’t work, can you please check the senstive data

    Hello,

    Can you please try updating the CSS to this one to see if that works for you?

    .wp-block-rank-math-toc-block ol ol > li {
        list-style-type: disc !important;
    }

    Let us know how it goes. Looking forward to helping you.

    Thank You

    hi,

    I’m sorry for being too late for honestly forgot that I have asked the question here.

    The code perfectly worked.

    What if I want to make the first Heading like the disc and other nested numbers?

    Hello,

    Thank you for providing additional information.

    It’s great to see the CSS worked. To make the main heading disc, please add this:

    .wp-block-rank-math-toc-block ol li {
        list-style-type: disc !important;
    }

    To make the nested numbers, please add this CSS

    .wp-block-rank-math-toc-block ol ol li {
        list-style-type: decimal !important;
    }

    Hope this helps.

    Let us know how it goes. Looking forward to helping you.

    Thank you.

    WOW! that worked perfectly.

    Thanks a lot!

    Hello,

    Glad that helped.

    Please feel free to reach out to us again in case you need any other assistance.

    We are here to help.

    Thank you.

Viewing 11 replies - 1 through 11 (of 11 total)

The ticket ‘Customize RankMath Table Of Content Gutenberg Block’ is closed to new replies.