Where should I add supplementary CSS that supersedes module theme?

#1

What is the simplest way to add small bits of supplementary CSS that will supersede the CSS in the theme, if the main theme is loaded as a module in my config file?

What I’ve tried

If I add CSS as themes/static/css/extra-css.css, it has no effect.

If I put the CSS file in a GitHub repository at

https://github.com/my-username/my-shortcodes/tree/main/static/extra-css.css

and then try to load this as a module in my config.toml after the main theme, with

theme = ["github.com/yihui/hugo-xmin", "github.com/my-username/my-shortcodes" ]

that also has no effect.

#2

Adding a supplementary stylesheet as a module has no effect because it is not referenced in the theme’s source.

Some theme authors allow for users to add a supplementary stylesheet, however whenever there is no such provision, one needs to replicate the path of the template that needs to be overridden by replicating its path under the project root /layouts/ folder.

For example if the theme’s CSS is called from a partial under:
/themes/theme/partials/head.html then you would need to replicate it under:
/<project-root>/layouts/partials/head.html.

1 Like