zerostaticthemes / hugo-winston-theme

A minimal and bold blog theme for Hugo

Home Page:https://hugo-winston.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support custom CSS

ITAYC0HEN opened this issue · comments

Some theme users would be happy to custom their website and override some of the CSS of the theme.
This can be very helpful and quite easy to add support to it.

One way to support it, and it is my preferred one, is deciding that a certain directory will contain custom CSS, like in Hugo PaperMod: https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-faq/#bundling-custom-css-with-themes-assets

They use assets/css/extended/*.css.

Another option is something like this:
Inside the config file you can assign an array to a variable:

[params]
    custom_css = ["css/foo.css", "css/bar.css"]

You can reference as many stylesheets as you want. Their paths need to be relative to the static folder.

Inside the header partial you can include every custom stylesheet from above beside the original one:

{{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

@ITAYC0HEN Ive added the ability for custom css as you proposed. You can now place css files in assets/css/extended

https://github.com/zerostaticthemes/hugo-winston-theme/blob/master/layouts/_default/baseof.html#L19

sadly this implementation requires users to modify the theme by adding new files to it, and not outside of the themes/ folder. This can break version updates