Where do I edit a theme's CSS?

support
1

I am using call-me-sam.

I want to make a change to the way some thing is styled. I edited themes/sam/static/css/style.css (and reran hugo -D) but my changes are not incorporated into the generated style sheet in public/css/

Is there a separate step for editing a theme?

2

What you mentioned should just work. But you may want to delete your public folder before rerunning hugo

3

Hmmm…

I tried that.

In the public/css folder there are two files (after rm -f public ; hugo -D).
One style.css has my changes.
The other main.main.<hexadecimal string>.css is a minified version that does not.

I am wondering if I am editing the correct source file, since I am not missing out a theme building step.

I edited themes/sam/static/css/style.css. I had to “un-minify” it first…

4

The call me sam theme uses Hugo Pipes to process SASS. That means you don’t edit the CSS in the static folder, but the SASS in the assets folder.

Make sure that you’re using the extended build of hugo.

5

I have edited that assets/sass/style.sass. Deleted public, run hugo -D, the style.css file `ss/main.min…lots of hex…css has the border.

$ hugo version
Hugo Static Site Generator v0.52/extended linux/amd64 BuildDate: 2018-12-21T15:59:29Z

Ok?

6

tl;dr Found a work around

I wanted to remove the bottom border from the menu items, that are a tags.
I added a css file static/css/home.css which had:

a {
  border:none;
}

In the front mater of content/_index.md I said
File:css/home.css and in layouts/index.html head put

        {{ if .Params.File }}
        <link rel="stylesheet" href="{{ $.Params.File }}" />
        {{ end }}

There is probably a better way.
But I wonder why I cannot change the theme?

7

It looks like the theme allows you to insert your own custom CSS

So try inserting in config.toml you put something like customCSS = ["home.css"] and then put your custom css file in assets (rather than static/css).

2 Likes
8

Thank you. That is helpful.
I have a question though: What is the - in line 15 and 18?

9

Trims whitespace when the HTML is published: Templating | Hugo

1 Like