Table of Contents block looks weird (WP Premium/Dara theme)

• 

  lianamscott · Member · Jun 22, 2023 at 5:19 pm

  • Copy link
  • Add topic to favorites

  Hi there. I have WP premium and am using the Dara theme.

  I’m trying to use the TOC block (not a special widget) and it looks weird in preview. Why is this happening? Any CSS that might improve the look?

  Any suggestions?

  

  The blog I need help with is: (visible only to logged in users)

• 

  saadahsan · Member · Jun 23, 2023 at 8:57 am

  • Copy link

  Hi, there.

  I think you should ask on official theme forum. Because every theme has different css and has different approach to build their themes.

  Hope it helps.

• 

  aleone89 · Staff · Jun 23, 2023 at 10:50 am

  • Copy link

  Hey there,

  @saadahsan As the site is hosted with WordPress.com, and using one of our themes, we can certainly help via these forums.

  It looks like this could be a bug that we need to run up the flag pole.

  At the moment, it looks like a workaround is to turn this into a regular list, or to remove the decimal numbers using CSS.

  As this is a table of contents, I’m wondering if turning this into a list could be of interest? If yes, I’d recommend doing this once, the page is built perhaps.

  I hope this is useful information thus far.

• 

  saadahsan · Member · Jun 23, 2023 at 2:48 pm

  • Copy link

  Sorry, @aleone89, my bad. I didn’t know that Dara Theme was made by Automattic. I will try to research first and be more careful before answering. Hopefully the problem is resolved now.

• 

  lianamscott · Member · Jun 23, 2023 at 4:24 pm

  • Copy link

  @saadahsan I very much appreciate your input.

  @aleone89 Thank you for letting me know it’s likely a bug. I did notice that I could change it into a list, which I will do. I don’t like the numbers though. Could you provide me with the CSS to remove the decimals, please? And, can I use the CSS at the website level, rather than within each blog?

• 

  staff-zinnia · Staff · Jun 23, 2023 at 9:11 pm

  • Copy link

  Let’s see what’s possible with CSS. When I go to https://lianamscott.com/ is this change live on the site somewhere that I can see it? Or is this only saved in a draft? I clicked around briefly but didn’t see the list or numbers. The page below should be helpful to practice and get a better understanding of how CSS works.

  

  CSS Basics

  in WordPress.com Support

  4 min read

  This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans. If your site has one of our legacy plans, it is available on the Pro plan. CSS, or Cascading Style Sheets, is a way to apply style rules to HTML content. This page will cover a few basics about CSS such as selectors and ordering. You can add custom CSS by going to Appearance → Additional CSS in
• 

  lianamscott · Member · Jun 24, 2023 at 4:44 pm

  • Copy link

  @staff-zinnia It’s a draft page.

• 

  staff-doublebassd · Staff · Jun 24, 2023 at 7:22 pm

  • Copy link

  Hi there,
  
  Here is a snippet to remove the decimals:

  ol {
list-style: none;
}

  Let me know if that works for you.
  
  Thanks!

• 

  lianamscott · Member · Jun 25, 2023 at 4:43 pm

  • Copy link

  @staff-doublebassd That worked! And I didn’t have to turn it into a static list!

  Thank you!