How to change the header color in docfx standard template

user_10184369 0
Viewed 17

Have been struggling with the header color in the css for some while. I was able to change the footer, but not sure how to access the header element and change the color. Please reference the screenshot for context enter image description here

docfx
1 Answers

Add a directory structure like this to root:

templates/
  my-template/
    styles/
      main.css

In docfx.json, add "templates/my-template" in the template object inside the build object:

    "template": [
      "default",
      "templates/my-template"
    ]

In templates/my-template/styles/main.css, add something like:

.navbar {
    background-color: green;
}

.subnav {
    background-color: blue;
}

As reference, you can see the classes that construct the navbar this way:

  • Run docfx template export.
  • Find _exported_templates/default/partials/navbar.tmpl.partial.

To modify the partial directly, copy navbar.tmpl.partial here and modify:

templates/
  my-template/
    partials/
      navbar.tmpl.partial
user_78483500
Related