Custom Table of Contents (TOC) Headers
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 条评论