I’m using the Papermod theme, which has about 14 css files in the themes directory. Now I want to modify the look of some things on single pages under a section. How and where do I put/modify my custom css?
I see a blank.css file? Do I create a new file? Do I copy one of the existing theme css files into the static folder of my site?
These questions are better suited for the theme author.
Please try asking at the theme’s repository.
I doubt you will get an answer here, unless someone takes the time to look into the workings of Papermod theme.
Oh I didn’t realize it was that customized per theme. There’s not a generic way to override css? If I add a new css file to the static folder is it automatically bundled by the hugo build process?
I do not know where the CSS is located or how it is referenced in the Papermod theme and I am afraid that I do not have the time to look.
Typically an author includes a head partial template that calls the CSS in a Hugo project. Most likely that is the template that you need to override.
To do just that under the root of your project replicate the PATH and the contents of head.html under themes/papermod/ in a directory called /layouts/ then whatever addition you make to this template it will override the original template of the Papermod theme.
Thanks I see
{{- $common := (resources.Match “css/.css") | resources.Concat “assets/css/common.css” }}
{{- $extended := (resources.Match "css/extended/.css”) | resources.Concat “assets/css/extended.css” }}
{{- /* bundle all required css /}}
{{- / Add extended css after theme style */ -}}
{{- $stylesheet := (slice $common $extended) | resources.Concat “assets/css/stylesheet.css” | minify }}
I guess the css bundling happens with theme css but not css added to the site?
The theme provides an extend_head.html file that is blank except for comments so I guess I will copy this file to my site and then add the css file there.
Yes, that seems like the proper way to go. Especially since the theme author appears to have provided a way to add custom CSS, on top of what is included in the theme.
Thanks that worked. However now I have two css files in the final output instead of one.
Is {{- $common := (resources.Match “css/ *.css") | resources.Concat “assets/css/common.css” }} supposed to bundle all the css into one file? Does resources.Match aggregate files across the theme folder as well as the site folder?
Maybe I put the css file in the wrong place:
I’ve put it in hugosite/static/css/custom.css
Should I create an assets folder instead and put the css file there? Still trying to figure out how hugo works
Try to place the custom CSS under the replicated PATH of the theme CSS.
In this case under the root of your project in /assets/
/static/ by default does not accept Assets meant to be used as Resources.
By the way I have never had the need to override a theme’s CSS for a Hugo project, so I do not know whether you will manage to create a single CSS file like this, without messing about in the actual theme’s directory.
So if you manage do let us know.
Ok yes that worked. So I created an assets folder and made my file
hugosite/assets/css/custom.css
The css I created got bundled and minified along with all the other theme css into a single file so actually no need to modify the header with an additional <link> statement.
The css ended up in the middle of the file if I had to guess it looks like alphabetical by file name
And confirmed on the css ordering. Renaming the file to start with a “z” puts the content at the end of the bundled css file.
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.