Hey there everyone, really enjoying Hugo but had a little question if I may. I notice that most themes place all their CSS in one large file and then reference this file in their layout template. I understand that you can override an entire file via the /static and /layout directories, but this is…

To override the CSS, just add your own CSS file with a link tag after all of those, linking to an appropriate file in /static. See this for more information if you want to replace them completely.

This is a common problem when users try to customize a theme. In some of my themes I include an option to easily insert custom stylesheets. Maybe you can do a pull request to add the following scheme to the theme: Inside the config file I assign an array to a variable: [params] custom_css = ["…

Thank you so so much for your reply. This is similar to what I had in mind, awesome implementation! It would be awesome if this were to become a standard practice that all theme developers used. Once I choose a theme, I’ll submit a pull request with this feature. Really appreciate your help and …

PS: I do the same with Javascript files, by using custom_js as variable name.

Thanks @digitalcraftsman for the solution, I have added this to my theme with thanks to @fgimian for pointing it out.

Just a note, looks a neat solution. Just working through my first attempt and the theme I’m modifying the author has taken a different approach. Basically created a style.html partial with the intention that is can be overridden ( and does the same with script.html partial for JS ) A different ap…

A perhaps more flexible solution for themes would be add an empty “extra-in-head.html” partial. This way, users can put anything into the head by overriding “extra-in-head.html”. It may for example be that for performance reasons, it is desired to include the css directly in the HTML, thereby elimi…

[params] custom_css = ["css/foo.css", "css/bar.css"] That would be very cool. Does the default Ananke theme has this parameter available? Is it called custom_css or something else? I can not find it in the example site or in their readme.

If not already in the theme, you can always customize the head partial by creating a duplicate in your project source that will override the theme source via Hugo’s lookup order.

How to override CSS classes with Hugo

support

fgimian April 1, 2016, 4:36am 3

Thanks so much for your reply. I guess this means that we probably have to override the header.html partial to specify the additional CSS link, is that correct?

Topic		Replies	Views
Override a single css property? support	9	1868	September 26, 2023
Trying to override my current theme support	1	133	August 31, 2024
Can't seem to override CSS with simple.css support	3	119	February 17, 2025
Papermod Theme: How to add custom CSS? Using Themes	10	13710	December 25, 2020
Framework for customizing themes feature	4	1987	July 13, 2017

How to override CSS classes with Hugo

Related topics