Hello,
Thank you for contacting Rank Math for help with customizing the Rank Math Table of contents (TOC) block.
1. Can we add a āborderā to the block? With properties for thickness, colour and rounded corners?
To add styling customizations beyond the defaults available in the block settings, You will have to add a CSS class to the block and enable your border with custom CSS.
2. Why is it that in the Dimensions section I can only set the Padding? There are no choices for Margin (as in your video).
This may be due to a conflict with your theme. You can check this by temporarily switching to a default theme like Twentytwentytwo, then checking the dimension settings again. If switching theme fixes the issue, please contact your theme author to add support for the margin dimension.
3. In your sample you had a horizontal line above the bullet list (but below the title). How did you do this?
I am not sure which horizontal line you are referring to. Do you mind sharing a screenshot? You can use a tool like imgbb.com for screenshots or a tool like loom.com for screencasts and share the generated links here. If you are referring to the main heading underline for the TOC, you can do that with custom CSS.
4. In my links I use some shortcode to show font awesone icons. It is not possible for the block to strip the shortcode from the auto generated anchors?
I tested shortcodes on my setup and they display the shortcode output in the TOC block. Please may you clarify what you are trying to achieve with shortcodes. You can use a tool like imgbb.com for screenshots or a tool like loom.com for screencasts and share the generated links here.
Hope that helps. Please let us know if you have questions.
Hi
Thanks for your responses.
To add styling customizations beyond the defaults available in the block settings, You will have to add a CSS class to the block and enable your border with custom CSS.
I’ll look into it.
This may be due to a conflict with your theme. You can check this by temporarily switching to a default theme like Twentytwentytwo, then checking the dimension settings again. If switching theme fixes the issue, please contact your theme author to add support for the margin dimension.
I have just tried with the 2023 theme on my staging sight and the margin property does display. So I have reached out to the theme provider.
I tested shortcodes on my setup and they display the shortcode output in the TOC block. Please may you clarify what you are trying to achieve with shortcodes.
I was not referring to the display of shortcodes. I was referring to the auto generated anchors.
See:
https://ibb.co/2SFTQvG
We can’t edit the anchor text. At-least, when I try it won’t let me. IMHO the shortcode should be stripped from the anchor.
Hello,
Upon checking from our end, it seems we are able to edit the anchor text. Please refer to this video screencast: https://i.rankmath.com/v/I2uX3m
If it’s not working on your end, could you please try to enable troubleshooting mode and see if the issue persists: https://rankmath.com/kb/check-plugin-conflicts/
Let us know how it goes.
Don’t hesitate to get in touch if you have any other questions.
I still think you are getting confused. Your video has nothing to do with “anchors”. You are just editing the text of the hyperlink text – that is something else. The ANCHOR is the link #xyz value.
As for the MARGIN not showing, my theme developer says it is because the theme is a PHP based theme and not a ‘Full Site Editor’ theme (like 2023).
1/ Why does the video tutorial say to use #rank-match-toc?
https://ibb.co/4FpnPqM
I ask this, because when I inspect my TOC, it is using a class wp-block-rank-math-toc-block. I do not see the ID constant you have referred to. I think it would be useful to have some CSS styling examples for us.
Also, I think it would be useful if the block worked fully with PHP themes (like mine). This is why options like MARGIN and LINE HEIGHT are missing.
2/ Horizontal line
It was this one in the sample video:
https://ibb.co/3MD1j2T
Hello,
I still think you are getting confused. Your video has nothing to do with āanchorsā
Sorry for the confusion on the anchor tags. I checked again and the shortcode text is indeed being added to the anchor text. I have asked a developer to check whether this can be fixed.
As for the MARGIN not showing, my theme developer says it is because the theme is a PHP based theme and not a āFull Site Editorā theme (like 2023).
You will have to manually edit the margin with CSS as the support for this is a full site editing feature.
1/ Why does the video tutorial say to use #rank-match-toc?
The “#rank-math-toc” id should work. You can test it in your browser dev tools to preview the changes.
You can target the TOC title by trying the example below;
#rank-math-toc h2 {
background-color: red;
}
2/ Horizontal line
The line was taken from Rank Math website default styles. You can use CSS. To add the horizontal line you can target the title and add a bottom border like below;
#rank-math-toc h2 {
border-bottom: 2px solid #037df7;
padding-bottom: 0.825rem;
}
Hello,
We have taken note of the mentioned anchor issue, thank you for bringing it to our attention. We will look into this, and possibly adjust the code so that the shortcodes are removed from the automatically generated anchors, or perhaps we will make the anchors editable, so you can remove the shortcodes manually.
When we release an update that includes a fix for this, we will leave a reply here to inform you about it.
Hope that helps.
Thank you. I look forward to the update.
Hello,
We really appreciate your patience. We will inform you once we have an update.
Don’t hesitate to get in touch in case you need our assistance with anything else in the meantime.
Thanks.
Hello,
Since we did not hear back from you for 15 days, we are assuming that you found the solution. We are closing this support ticket.
If you still need assistance or any other help, please feel free to open a new support ticket, and we will be more than happy to assist.
Thank you.
