Styling dv.header output to match normal headers

I use dataviewjs to create a footer for all my journals, and as part of the output I use the dv.header command (eg. dv.header(2,"Incoming Links")).
I thought these level two headers would match the styling of the level two headers in the main body of the journal (eg. ## Events), but they don’t. The output from dataviewjs is in the form (note I usually work in Preview mode, but I see the same issue in Reading view, also note I’m using the Minimal theme):

<div class="cm-preview-code-block cm-embed-block markdown-rendered" tabindex="-1" contenteditable="false">
   <div class="block-language-dataviewjs node-insert-event">
      <h2>
         <span data-tag-name="p" class="el-p">Incoming Links</span>
      </h2>
   <div>
<div>

Note that the Incoming Links header text is wrapped with a span of class “el-p”, and el-p has css assigned to make the “color” = “black”. I’ve tried redefining the color of el-p, but then all kinds of other elements change color as well. I thought using .el-p h2 {color: var(--h2-color)} would limit it to just stuff that is el-p and h2, but it doesn’t work. How can I style my dataviewjs level two headers to look like the headers in the rest of my note?

I found a solution to change the color: h2 .el-p, but also wanted to add an underline, which would only go under the text. Ended up with two CSS settings to do what I need. Haven’t seen any side-effects yet:

h2 .el-p {
    color: var(--h2-color);
}
h2{
	border-bottom:1px solid var(--h2l);
	padding-bottom: 0.4em;
	width:100%;
}

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.