# Custom CSS on FreeBSD

**URL:** <https://discourse.gohugo.io/t/custom-css-on-freebsd/50525>\
**Category:** Using Themes\
**Created:** [July 2, 2024, 6:17pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525 "2024-07-02T18:17:12Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![HugoBoss](https://avatars.discourse-cdn.com/v4/letter/h/5fc32e/32.png) [@HugoBoss](https://discourse.gohugo.io/u/HugoBoss)\
**Post date:** [July 2, 2024, 6:17pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/1 "2024-07-02T18:17:12Z")

</div>

On FreeBSD 13.3, I ran `doas pkg install gohugo`. Then I created a site. I added the ananke theme as a Hugo module (not as a git submodule). The site is accessible over the Internet (via Apache) and shows the default Hugo home page. How do I customize the background color?

Output of `hugo env`:

```auto
hugo v0.123.8+extended freebsd/amd64 BuildDate=2024-03-07T23:57:02Z+0000 VendorInfo=freebsd
GOOS="freebsd"
GOARCH="amd64"
GOVERSION="go1.21.11"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.3.2"

```

Contents of hugo.toml:

```auto
baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = ["github.com/theNewDynamic/gohugo-theme-ananke"]

[params]
customCSS = ["static/css/custom.css"]

```

Contents of static/css/custom.css:

```auto
body {
  background-color: #f0f0f0;
# background-image: url('/images/your-background.jpg');
}

header {
  background-color: DodgerBlue;
# background-image: url('/images/your-header-image.jpg');
}

body, h1, h2, h3, h4, h5, h6 {
  font-family: "Courier New", monospace;
}

```

I have repeatedly run the `hugo` command after several changes and the builds have been successful, but none of the custom CSS seems to be applying.

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [July 2, 2024, 6:30pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/2 "2024-07-02T18:30:31Z")

</div>

Your config does not match your statement

> [@HugoBoss](#):
>
> I added the ananke theme as a Hugo module

See: [Use Hugo Modules | Hugo](https://gohugo.io/hugo-modules/use-modules/#use-a-module-for-a-theme)

Either import it or use theme: setting.

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [July 2, 2024, 6:45pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/3 "2024-07-02T18:45:04Z")

</div>

But the main problem seems to be the custom\_css setting

> [@HugoBoss](#):
>
> ```auto
> [params]
> customCSS = ["static/css/custom.css"]
> 
> ```

Check the Readme here: [GitHub - theNewDynamic/gohugo-theme-ananke: Ananke: A theme for Hugo Sites](https://github.com/theNewDynamic/gohugo-theme-ananke)

And search for “custom\_css”

---

<div class="post-metadata">

**Author:** ![HugoBoss](https://avatars.discourse-cdn.com/v4/letter/h/5fc32e/32.png) [@HugoBoss](https://discourse.gohugo.io/u/HugoBoss)\
**Post date:** [July 2, 2024, 6:49pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/4 "2024-07-02T18:49:03Z")

</div>

Thanks. Contents of go.mod:

```auto
module github.com/[redacted]/[redacted]

go 1.21.11

require github.com/theNewDynamic/gohugo-theme-ananke v0.0.0-20240503174335-33fbda0e9d3e // indirect

```

Contents of hugo.toml:

```auto
baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
#theme = ["github.com/theNewDynamic/gohugo-theme-ananke"]

[module]
  [[module.imports]]
    path = 'github.com/theNewDynamic/gohugo-theme-ananke'

[params]
customCSS = ["static/css/custom.css"]

```

Does that look any better? I’m still reviewing what you said about custom\_css in your other comment.

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [July 2, 2024, 6:59pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/5 "2024-07-02T18:59:12Z")

</div>

not sure if square brackets in your module name are a good idea

---

<div class="post-metadata">

**Author:** ![HugoBoss](https://avatars.discourse-cdn.com/v4/letter/h/5fc32e/32.png) [@HugoBoss](https://discourse.gohugo.io/u/HugoBoss)\
**Post date:** [July 2, 2024, 7:03pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/6 "2024-07-02T19:03:52Z")

</div>

Are you talking about `github.com/[redacted]/[redacted]`? I put the brackets there just because of redactions. The brackets aren’t actually there in my go.mod file. I guess it would have been clearer if I had put `github.com/redacted/redacted` in my comment.

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [July 3, 2024, 7:42am UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/7 "2024-07-03T07:42:29Z")

</div>

Your baseUrl is broken. Check out which files the browser tries to load by using its developer tools.

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [July 3, 2024, 1:12pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/8 "2024-07-03T13:12:04Z")

</div>

I wouldn’t state that.

According to the theme doc they use param `custom_css` and rely on files in subfolder of `/assets`

And filenames like /static/… are mostly a bad idea

---

<div class="post-metadata">

**Author:** ![HugoBoss](https://avatars.discourse-cdn.com/v4/letter/h/5fc32e/32.png) [@HugoBoss](https://discourse.gohugo.io/u/HugoBoss)\
**Post date:** [July 3, 2024, 2:34pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/9 "2024-07-03T14:34:34Z")

</div>

I deleted everything and started over. New `hugo env`:

```auto
hugo v0.129.0-DEV-82af94d1f56b36a99be4f6c55697d105cee9dd84+extended freebsd/amd64 BuildDate=2024-07-02T07:00:44Z
GOOS="freebsd"
GOARCH="amd64"
GOVERSION="go1.21.11"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.3.2"

```

Contents of go.mod:

```auto
module github.com/redacted/redacted

go 1.21.11

require github.com/theNewDynamic/gohugo-theme-ananke v0.0.0-20240503174335-33fbda0e9d3e // indirect

```

Contents of hugo.toml:

```auto
baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
[module]
  [[module.imports]]
    path = 'github.com/theNewDynamic/gohugo-theme-ananke'

[params]
custom_css = ["custom.css"]

```

Contents of assets/ananke/css/custom.css:

```auto
body {
  background-color: #f0f0f0;
/* background-image: url('/images/your-background.jpg');*/
}

header {
  background-color: coral;
/* background-image: url('/images/your-header-image.jpg');*/
}

body, h1, h2, h3, h4, h5, h6 {
  font-family: "Courier New", monospace;
}

```

I’m not sure if head.html and baseof.html are necessary, but I’ve tried it with and without them. Contents of layouts/partials/head.html:

```auto
<!-- Include default Ananke CSS -->
<link rel="stylesheet" href="{{ "css/main.min.css" | absURL }}">

<!-- Include custom CSS -->
{{ if .Site.Params.customCSS }}
  {{ range .Site.Params.customCSS }}
    <link rel="stylesheet" href="{{ . | absURL }}">
  {{ end }}
{{ end }}

```

Contents of layouts/\_default/baseof.html:

```auto
<!DOCTYPE html>
<html lang="en">
<head>
  {{ partial "head.html" . }}
</head>
<body>
  {{ block "main" . }}
  {{ end }}
</body>
</html>

```

With head.html and baseof.html, my site uses seemingly no CSS at all. Without them, my site uses only the default CSS. Either way, it ignores my custom CSS.

I can tell the `hugo` build is at least _parsing_ my custom.css because, when I intentionally put a syntax error in custom.css just for testing, the `hugo` build returned an error for the syntax in that file. But it doesn’t actually _apply_ the customization.

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [July 3, 2024, 2:57pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/10 "2024-07-03T14:57:40Z")

</div>

Your baseURL is still broken. And did you check what CSS your browser tries to load?  
In any case, tis pointless to post arbitrary chunks of code. Instead, post a link to your repository so people can reproduce what you’re (not) seeing.

---

<div class="post-metadata">

**Author:** ![HugoBoss](https://avatars.discourse-cdn.com/v4/letter/h/5fc32e/32.png) [@HugoBoss](https://discourse.gohugo.io/u/HugoBoss)\
**Post date:** [July 3, 2024, 3:54pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/11 "2024-07-03T15:54:53Z")

</div>

According to the network tab, the only CSS file it tries to load is main.min.css

I tried visiting my repository with the link (the one that’s verbatim from my server, not with “redacted”), but GitHub gave me a 404 page. I’m not sure there is a repository for mine. Was I supposed to log into GitHub and configure something directly on the GitHub website itself?

By the way, I changed the baseURL but I’m not sure it matters for this issue.

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [July 3, 2024, 3:59pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/12 "2024-07-03T15:59:34Z")

</div>

they way ananke does is it just appends your style to **after** all their styles. they use tachynos as css framework, so there’s a lot already set

with a bare setup

- hugo new
- add module ananke as theme

this hugo.toml

```toml
baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'Hugo Forum Topic-50525'
[module]
  [[module.imports]]
    path = 'github.com/theNewDynamic/gohugo-theme-ananke'

[params]
custom_css = ["custom.css"]

```

and a css `/assets/ananke/css/custom.css`

```css
a,h1{
   color: red!important;
}

```

check the rsulting stylesheet `public/ananke/css/main.min.css`, your styles should be in at the very end  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/4/2/42eedd8f72ad1d3e216f0736df0f701e2ce2bbfb.png)

you get:

![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/9/7/977882623db998c858ba4258db908297ef94d310.png)

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [July 3, 2024, 4:15pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/13 "2024-07-03T16:15:07Z")

</div>

we where not talking about deploying the site anywhere but analysing the local build problem using `hugo server`. The baseURL is not really relevant there.

Ofc when you try to publish the site later and generate it with `hugo` you will have to take care on that. So it’s always best to have your target websits baseURL set correctly. in the config (guess that`s what @chrillek stats with _broken_).

Your current style problem is all about ananke theme and their handling of (custom) CSS.

---

<div class="post-metadata">

**Author:** ![HugoBoss](https://avatars.discourse-cdn.com/v4/letter/h/5fc32e/32.png) [@HugoBoss](https://discourse.gohugo.io/u/HugoBoss)\
**Post date:** [July 3, 2024, 4:26pm UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/14 "2024-07-03T16:26:18Z")

</div>

Alright, I’ll try again soon with your latest suggestions.

In case it matters, just FYI, I’ve been using Apache this whole time. I haven’t used `hugo server`.

---

<div class="post-metadata">

**Author:** ![HugoBoss](https://avatars.discourse-cdn.com/v4/letter/h/5fc32e/32.png) [@HugoBoss](https://discourse.gohugo.io/u/HugoBoss)\
**Post date:** [July 4, 2024, 1:44am UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/15 "2024-07-04T01:44:35Z")

</div>

The red for `a` and `h1` is working for me! Nothing else in custom.css is applying, though. Here is my current custom.css:

```auto
a,h1{
   color: red !important;
}

body {
  background-color: green !important;
/* background-image: url('/images/your-background.jpg');*/
}

body {
  background-color: blue !important;
/* background-image: url('/images/your-header-image.jpg');*/
}

body, h1, h2, h3, h4, h5, h6 {
  font-family: "Courier New", monospace !important;
}

```

And here are the last few parts of `public/ananke/css/main/min.css`:

```auto
a,h1{color:red!important}body{background-color:green!important}body{background-color:blue!important}body,h1,h2,h3,h4,h5,h6{font-family:courier new,monospace!important}

```

What could I still be missing?

---

<div class="post-metadata">

**Author:** ![HugoBoss](https://avatars.discourse-cdn.com/v4/letter/h/5fc32e/32.png) [@HugoBoss](https://discourse.gohugo.io/u/HugoBoss)\
**Post date:** [July 4, 2024, 4:35am UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/16 "2024-07-04T04:35:52Z")

</div>

I just made some progress with a suggestion from Claude 3.5 Sonnet (an LLM/AI model). It said to copy Ananke’s baseof.html to layouts/\_default/baseof.html and add this just before the closing `</head>` tag:

```auto
{{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

```

Now the blue background color and the red text color are applying. As for the part of my custom.css that says “green,” I have tried changing it to affect the header (instead of being an accidental duplicate with the other `body` section). The header color still isn’t changing, though. What am I still missing?

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [July 4, 2024, 6:33am UTC](https://discourse.gohugo.io/t/custom-css-on-freebsd/50525/17 "2024-07-04T06:33:55Z")

</div>

As I said, that’s all about css and the way ananke uses and implements tachyons and customized styles. Adding a new stylesheet ref after the normal one is just the same - the browser loads that after the main one.

If the style is in (end it is with the method above) it’s about addressing the HTML (nested) elements, and classes or ids.

I’m neither a css expert nor one who knows how to customize the underlying \_tachyons`css framework.

So you _will_ have to learn about _CSS_

in fact not really a hugo topic now but CSS, theme and tachyons. So I’m out here

* * *

To get an impression check with your browser devtools which elements get styles from which part of the css and address the elements. CSS uses the most specific element attributes.

here’s my last working example (try yourself to see the orange footer 😉 )

```css
a,h1{
   color: red !important;
}

header div {
  background-color: green !important;
}
header div nav { /* NAVIGATION */
   background-color: yellow !important;
 }
 footer { background-color: orange!important}

body {
  background-color: blue !important;
/* background-image: url('/images/your-header-image.jpg');*/
}

body, h1, h2, h3, h4, h5, h6 {
  font-family: "Courier New", monospace !important;
}

```

and the result in devtools:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/c/f/cf017e4d6ca8ed4ebe25a70a7ea895afebac6230.png)

p.s. If I would have to customize that properly I would start with `github.com\theNewDynamic\gohugo-theme-ananke\layouts\partials\site-style.html` but that’s diggin in deep.