ITADN

Custom Table of Contents (TOC) Headers

#2360OpenBiigBeaker 创建于 2025-06-19
B
BiigBeakercommented
I'm not much of a coder so forgive me if this is stupid but lately I've been creating a lot of documentation and I wanted to color code the headers and associated table of contents. I have no issue color coding the headers inside of the note using a .css but these changes don't seem to reflect the associated sections inside of the table of contents. I've attempted making a separate .css for the table of contents but I'm not getting anywhere. I've made many iterations to the code but I just can't get it to work correctly. I'll have the current code listed below called 'custom-toc' ### **Problem:** I am able to change header formatting with custom css in the notes itself but these changes do not also apply to the table of contents. The current custom css that I am using is shown below. ### **custom-header.css** `/* Header styles for note content */ .custom-headers h2 { color: #4ce699 !important; font-weight: bold; } .custom-headers h3 { color: #e6994c !important; font-weight: bold; } .custom-headers h4 { color: #4c99e6 !important; font-weight: bold; } .custom-headers h5 { color: #e64c4c !important; font-weight: bold; }` The parent folder that contains the notes that I am attempting to modify has the following attribute: #cssClass(inheritable)=custom-headers ### **custom-toc.css** `/* TOC styles for corresponding header levels */ .toc-widget .toc > ol > li > span { color: #4ce699 !important; font-weight: bold; } .toc-widget .toc > ol > li > ol > li > span { color: #e6994c !important; font-weight: bold; } .toc-widget .toc > ol > li > ol > li > ol > li > span { color: #4c99e6 !important; font-weight: bold; } .toc-widget .toc > ol > li > ol > li > ol > li > ol > li > span { color: #e64c4c !important; font-weight: bold; }` As for the attribute section for the parent folder, I've attempted multiple different values for attribute labels with the name of cssClass. Values I have tried are toc-widget, toc, and even toc-widget-toc. Nothing seems to work ### **My Goal:** I want to change header colors based on header type. For example, all h2 headers should be green, h3 headers orange, h4 headers blue. The document also contains a table of content (toc). Lets say the h2 named "Required Role Permissions" is orange, I would like the associated header in the toc also named "Required Role Permissions" to share them same color.
1 条评论