Custom CSS on FreeBSD

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:

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:

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:

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.

Your config does not match your statement

See: Use Hugo Modules | Hugo

Either import it or use theme: setting.

But the main problem seems to be the custom_css setting

Check the Readme here: GitHub - theNewDynamic/gohugo-theme-ananke: Ananke: A theme for Hugo Sites

And search for “custom_css”

Thanks. Contents of go.mod:

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:

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.

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

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.

1 Like

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

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

I deleted everything and started over. New hugo env:

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:

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:

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:

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:

<!-- 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:

<!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.

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.

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.

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

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

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

you get:

image

1 Like

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.

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.

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

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:

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?

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:

{{ 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?

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 :wink: )

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:

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.