How to make changes to the header and how to change the footers style?

[jn123l]

I want to customize the header and footer of my site. However, the changes don't display on the actual site.
How can I do this correctly?

[h-enk]

If you want to change the layouts, copy

• node_modules/@thulite/doks-core/layouts/_partials/header/header.html to layouts/_partials/header/header.html, and
• node_modules/@thulite/doks-core/layouts/_partials/footer/footer.html to layouts/_partials/footer/footer.html

Then make your changes in the latter files. To make Hugo's server live reload work properly, exlcude the original files in config/_default/module.toml:

## layouts
[[mounts]]
  source = "layouts"
  target = "layouts"

[[mounts]]
  # Exclude 'home.html' to avoid conflicts with custom home page layouts defined in the local 'layouts' directory.
  excludeFiles = ["home.html", "_partials/header/header.html", "_partials/footer/footer.html"]
  source = "node_modules/@thulite/doks-core/layouts"
  target = "layouts"

If you want to change the styling, do that in:

• assets/scss/common/_custom.scss, and
• assets/scss/common/_variables-custom.scss.

Check the original styling by in your browser selecting the part you'd like to change, right mouse click, select Inspect and/or the files in node_modules/@thulite/doks-core/assets/scss/ , so you know what and how to override properly. You may need to use !important flag

[jn123l]

This works. Thank you!