Is there a way to override part of the CSS in my own site?

[fgimian]

Hi there, thanks so much for your work on porting this theme over to Hugo :smile:

I noticed that all of the CSS for this theme is in a file called hugo-octopress.css. I hope to override a few lines of this CSS file to change a few colours and spacing.

Is there a way to do this without making a full copy of the original CSS file to my static directory?

Thanks Fotis

[parsiya]

I am not proficient in css but here's what you can do.

• Create the new css file. Let's call it octopress-override.css.
• Add your overrides to your css file.
• Put it in the static directory of the theme.
• Modify themes/Hugo-Octopress/layouts/partial/header.html and load your css after the original css file.
• Your css override should override the original.

Please make note that I have used the !important directive in a couple of places in the css because Hugo and Pygments render some elements with some hardcoded properties in the final HTML so I had to override them.

[fgimian]

Thanks so much. This does seem like the best way to go about it.

Perhaps it would be good if Hugo made some recommendations about standards that would allow such overrides using a param in the config file.

e.g.

  params:
    customCssFile: /static/custom.css

And then the theme would include it if defined.

This problem seems to be present on most Hugo themes so I'm not sure how most people deal with this situation :smile:

Anyway, thank you so so much for the quick reply! Fotis

[parsiya]

I am re-opening this. Going to add the suggestion from digitalcraftsman in the discussion you created on Hugo forums. https://discuss.gohugo.io/t/how-to-override-css-classes-with-hugo/3033/2

[fgimian]

Thanks a lot :smile:

[parsiya]

Np, thanks for pointing it out. Please let me know if it doesn't work or if there are any other issues.