☰
Navigation :

Customize website look and feel

You can change the style and behavior of the theme without touching it.

Add custom CSS and JS or HTML into the <head> part of each page :

Create a custom header partial layouts/partials/custom-head.html

  • content/
  • layouts/
    • partials/
      • custom-head.html

write your own content like (an example from @nzbart):

<link rel="stylesheet" href="/css/custom.css">
<script src="/js/custom.js"></script>

Then overrode the style your want to change in static/css/custom.css (in this case, to avoid altering the casing of titles):

h2 {
    text-transform: none;
}

And executed some additional JavaScript from static/js/custom.js (note that jQuery is already loaded by the theme):

function tweakPage() {
    // make some changes here
}

$(tweakPage)

now feel free to add the JS, CSS, HTML code you want :)

Add custom HTML at the end of the body part of each page :

Create a custom-footer.html into a layouts/partials folder next to the content folder

  • content/
  • layouts/
    • partials/
      • custom-footer.html

now feel free to add the JS, CSS, HTML code you want :)

Overide existing CSS or JS

Create the matching file in your static folder, hugo will use yours instead of the theme’s one. Example :

create a theme.css and place it into static/css/ to fully overide docdock’s theme.css