CSS easy to customize

[appieschot]

First off compliments on the template! I love it! However I would love to apply my own branding (colours) so it would be awesome to support CSS overrides. I am more than happy to submit a PR that implements a CSS override option if you are open to that!

I could imagine using the head.html to add an override.css in case the parameter is specified. We could even use the asset bundling option Hugo provides to combine CSS files. Feel free to assign to me and let me know if you want me to pick it up.

[janraasch]

Hi @appieschot, thank you for getting in touch & thank you for the kind words 😊.

However, I would love to apply my branding (colors), so it would be awesome to support CSS overrides.

This question comes up quite a lot, see #2 (comment) & #1 (comment). I have not documented the process on README.md, but will do so now 😇.

Here's what you can do to add your own CSS:

• Add a custom_head.html to your layouts/partials-directory. If you started from the exampleSite on this repo, you should already have such a file.

• In there you can add a <style>-tag to overwrite the colors or

• you can add a <link>-tag referencing your own override.css (in case you prefer to have a separate .css-file).

I hope that helps. Let me know if this is what you had in mind.

Kind regards 👋 ,
Jan

PS:

I updated the README with the instructions mentioned above. Check out https://github.com/janraasch/hugo-scroll#adding-your-branding--colors--css.

[appieschot]

Thanks for the clarification! Definitely got it working, however I only wanted to add CSS so I could apply asset bundling for optimal speed.

[janraasch]

Thanks for the clarification!

Sure 👍.

[...] optimal speed [...]

That sounds like something one should have 😛 😇 😊.

In that case, you would (for the time being 😊) have to overwrite layouts/partials/head.html with a local copy including your asset bundling solution.

That should fix the issue for you then 😊.

---

If you have some time, I would also like to see how we could integrate this into the theme.

In a dream world scenario, I would love to have the .css parsed by Hugo Pipes with a variables.css which has variables for the different colors. So it is basically plug-and-play to add custom branding. I should open an idea-issue for this.

Anyway, if your up for it, feel free to open a pr (for asset bundling and/or the dream world scenario 😉). Then we can carry on the conversation with some real source code to get a better feel for this feature.

[appieschot]

Sure, just created a fork where I added a _customvars.scss. Basics works, so I will go through the CSS file and properly construct the theme. It does require the extended version of Hugo but so far things look good ;-). Will use the weekend to update and create a PR 😎

[zjedi]

#98 goes towards this goal

[zjedi]

@appieschot We finally implemented CSS variables for overriding. It's the first version that may still evolve a bit throughout 2.0 release planned for this year