Skip to content

Customization Styles

Jump to bottom
Patrick Kollitsch edited this page Apr 12, 2025 · 1 revision

Note

Work in progress. The information on this page is a copy paste result from old notes and documentation. Needs rewrite.

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:

<body class="avenir bg-near-white">

note: The body_classes parameter will not change the font used in post content. To do this, you must use the post_content_classes parameter.

You can find a list of available typefaces here.

And a list of background colors here.

CSS

Ananke stylesheet is built with Hugo Pipes's Asset Bundling alone to maximize compatibility. The theme simply bundles its several files into one minified and fingerprinted (in production) CSS file.

Ananke uses Tachyons.io utility class library.

Custom CSS

WARNING: Pending resolution of this discussion, Custom CSS only works with Hugo Extended

In order to complement the default CSS with your own, you can add custom css files to the project.

  1. Just add a assets/ananke/css directory to your project and add the file(s) in it.
  2. Register the files using the custom_css key in your site's parameter. The path referenced in the parameter should be relative to the assets/ananke/css folder.

The css files will be added in their registered order to final main.css file.

For example, if your css files are assets/ananke/css/custom.css and assets/ananke/special.css then add the following to the config file:

[params]
custom_css = ["custom.css","special.css"]

IMPORTANT: Files registered through the custom_css array, while unlimited in number, must be of the same type (Ex: all scss or all css)

Note on retrocompatibiliy for custom css: If the files registered through the custom_css setting are not found in assets/ananke/css the theme will expect them to live at the given path relative to the static directory and load them as <link> requests.

Tip

We offer two sample repositories for Ananke's use. Feel free to clone them and play around to test out features described here:

Clone this wiki locally