How can I change the color of links in the sidebar TOC to black while keeping them blue in the CMS Rich text?

Published on
September 22, 2023

To change the color of links in the sidebar Table of Contents (TOC) to black while keeping them blue in the CMS Rich text, you can follow these steps:

  1. Identify the class or selector of the TOC links: First, you need to determine the class or selector name that controls the appearance of the TOC links. You can inspect the TOC links using your browser's developer tools to find this information. Look for a class or selector that is specific to the TOC links.

  2. Apply the CSS code: Once you've identified the class or selector, you can create a custom CSS code to change the color of the TOC links to black. Add this CSS code to your project:

/* Change color of TOC links to black */.YOUR-TOC-LINK-CLASS {  color: black;}

Note: Replace "YOUR-TOC-LINK-CLASS" with the actual class or selector name you identified in the previous step.

  1. Add the custom code to the project: In Webflow, you have different options to add custom CSS code. You can either add the code to the page settings using the Custom Code section or to the site-wide settings by going to the Project Settings > Custom Code tab. Choose the method that suits your project better.

  2. Override the color in the CMS Rich text: By default, the TOC links in the CMS Rich text will inherit the color of the parent container. To keep them blue in the Rich text, you need to override their color separately. Simply select the Rich text element in the CMS editor and use the text color options to set it to blue.

By following these steps, you will be able to change the color of the links in the sidebar TOC to black while keeping them blue in the CMS Rich text.

Additional Questions:

  1. How do I change the font size of the TOC links in Webflow?
  2. Can I customize the styling of individual CMS Rich text elements in Webflow?
  3. What other customization options are available for the TOC in Webflow?