Create a custom theme with custom CSS

support
1

How do I use my custom CSS file, style.css, inside the baseof.html file I created inside the themes/test/layouts/_default folder of my test personal theme? The base file is a skeleton for all my pages, and I want them to use the same CSS file.

2

You link to the stylesheet in the template.

That is a simple answer, because you haven’t asked any specific questions. Please read the theme creation doc, and try to explain the exact issue you are having. Also, share your code online and link to it so we can see what you are doing.

3

My project folder has this structure:

  • content
  • layout
  • static
  • themes
    • xxx
      • layout (with baseof.html inside of it)
      • static
        • css
        • js

I’m working on the base.html file, and I want it to be a skeleton for all my pages. In that static/css folder I guess I have to put my CSS files, but if I do this, inside the base file I have to use the ../ notation to refer to them, because they’re in another directory. Is this base.html file meant to work this way?

4

Anything that you have in the /static/ directory is copied over by Hugo as-is. (So without any modifications of sorts.)

For your situation, that means that the /static/css/ folder gets copied by Hugo as the /css/ folder at the root of your website (www.example.com/css/).

And so if a theme file should refer the CSS file you put in /themes/my-theme/static/css/, you can just use the href="/css/mystyle.css" notation to access it in a theme file.

(Other approaches would be to type the full address, use the .Site.BaseURL variable, or use the functions for generating relative and absolute URLs.

But that are all details and ideas for later. Regardless of which specific approach you want to use and prefer, the /themes/my-theme/static/css/mystyle.css file gets copied over by Hugo as /css/mystyle.css.)

Hope this helps.

1 Like
5

Thank you! Now I understand, thanks again!