zerostaticthemes / hugo-winston-theme

A minimal and bold blog theme for Hugo
https://hugo-winston.netlify.app/
MIT License
268 stars 110 forks source link

Support custom CSS #33

Closed ITAYC0HEN closed 1 year ago

ITAYC0HEN commented 1 year ago

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 }}
JugglerX commented 1 year ago

@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

ITAYC0HEN commented 1 year ago

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