• Where custom CSS goes
• Register your CSS
• Static files and external stylesheets
• Asset pipeline limitations
• Troubleshooting checklist

You can add your own CSS on top of the theme’s styles without editing the theme. This page covers the common path; for the full stylesheet pipeline (build order, social hover colours, source maps) see Styles.

Where custom CSS goes #

Put your CSS files in your project’s assets/ananke/css/ directory:

• How Hugo lookup order works
• The safe override pattern
• A full example
• Keep overrides small
• Update risks

Ananke is built from many small template files called partials. You can change any of them without editing the theme, by placing a file with the same path in your own project.

How Hugo lookup order works #

When Hugo needs a partial, it looks in your project first and the theme second. If a file exists at the same path in both places, your copy wins. This is what makes safe customisation possible: you never touch the theme, you just shadow the file you want to change.

• How the theme uses classes
• Background colour
• Body and font classes
• Content text colour
• Post content typeface
• Header and hero classes
• Accessibility and contrast

Ananke styles colours and typography with Tachyons utility classes. You choose a class name (for example bg-blue or near-black) and the theme applies it. This page lists the class-based settings.

How the theme uses classes #

Each setting below takes a Tachyons class as its value. Background colours use the bg- prefix (for example bg-navy); text colours use the colour name directly (for example near-white). Browse the available values in the Tachyons skins reference.

• Disqus
• Commento.io
• Disabling comments
• Privacy

Ananke currently supports two commenting systems: Disqus and Commento. Both render below the content on single pages.

Disqus #

Using Disqus as a comment system for your website is an internal feature of Hugo. For more information see the official Hugo documentation.

[services.disqus]
shortname = 'YOURSHORTNAME'

Note that the setup for Disqus is NOT done inside of the params section, but with in the services section of your config file. To turn off Disqus, remove, or comment out the preceding lines.

• Change the hero background
• Use the images front matter array
• Featured image as Page Resources
• Other hero settings
• Set a background color behind transparent hero images

Change the hero background #

For any page or post you can add a featured image by including the local path in front matter (see content in the exampleSite/content/en/_readme file for examples): featured_image = '/images/gohugo-default-sample-hero-image.jpg'

Use the images front matter array #

If featured_image is not set, Ananke will use the first value from the page’s images front matter array as the featured image.

• Update font or body classes
• Stylesheet Generation
  • Custom CSS
  • SASS/SCSS and other pre-processors
  • Built-in CSS order
  • Social hover colours
  • Output

Update font or body classes #

The theme is set, by default, to use a near-white background color and the “Avenir” or serif typeface. You can change these in your config file with the body_classes parameter, like this:

[params]
  body_classes = "avenir bg-near-white"

which will give you a body class like this: