How to make custom styles for layouts

support
1

New to Hugo here and if this question already has an answer, please point me to it :).

To begin with, I’m not using a theme. Making a custom website, so re-usability isn’t important, therefore I’m trying to use layouts.

I’m trying to figure out how I can really style these layouts. There doesn’t seem to be a way to add specific classes and ids to the html that is created by the layout from the markdown file and this is what I want to do.

How do you get into the nitty-gritty of customizing your css like this? Does Hugo only allow you to style just the basic html that the layout creates? What am I missing here — any help or links to the right spot in the docs would be amazing.

Hugo is great btw.

2

Have you read through the docs? Especially the template section and the shortcode section? Take a look at the single content section and look at the hierarchy for layouts. Depending on what you’re trying to make, you may need to have default templates and then templates that override them for other types of content. Or you might need to create shortcodes or inject HTML into the markdown file. It really depends on what you’re trying to do.

If the examples don’t make sense, then head over to the Hugo Themes repo on GitHub and study them to see how people are structuring their sites.

1 Like