Custom CSS confusion #452

jpursey · 2021-12-12T01:54:50Z

jpursey
Dec 12, 2021

Thanks for the great theme!

I am super new to Hugo, and so I'm sure I'm missing something obvious, but following the documentation on adding custom_css, I can't seem to get it to pick up anything.

I created a "assets/ananke/css/custom.css" file, making a small change to the .cf style (text-align: justify), and added custom_css = ["custom.css"] under [params] in my site's config.toml.

However, it doesn't seem to pick up even when I restart the Hugo server... is there some other missing step?

Answered by p-b-west

Dec 18, 2021

To rebuild main.min.css, it seems that you must

delete the contents of resources/_gen/assets/css/ananke
run hugo (extended version) to rebuild.

I didn't have the extended version, and only discovered I needed it after deleting the _gen files above. When I then ran hugo the build failed telling me I needed the extended version.

View full answer

p-b-west · 2021-12-17T14:41:34Z

p-b-west
Dec 17, 2021

I have exactly the same question. In fact, I have more than once been at a los as to where to put things (images for example) because the description does not offer an example or spell out the full path to the expected location.

Given a project directory of 'news', I have news/themes/ananke for ananke. Under news/themes/ananke I have, supplied with ananke, assets/ananke/css, that is, news/themes/ananke/assets/ananke/css, and in that final css directory are _code.css, _hugo-internal-templates.css, _social-icons.css, _styles.css and _tachyons.css.

Putting custom.css in this directory and adding custom_css = ["custom.css"] does not include the contents in main.min.css.

Ok, let's try creating news/assets/ananke/css/custom.css. No dice.

Back to news/themes/ananke/assets/ananke/css. Change the name to _custom.css, and change the config to custom_css = ["_custom.css"]. Nothing doing.

Here's the code from layouts/partials/func/style/GetMainCSS.html


{{/* We look for any custom css files registered by the user under `site.params.custom_css and if found in the theme's 
css asset directory we add to aforementioned slice */}}
{{ with site.Params.custom_css }}
  {{ range . }}
    {{ with partialCached "func/style/GetResource" . . }}
      {{ $assets_to_concat = $assets_to_concat | append . }}
    {{ end }}
  {{ end }}
{{ end }}

I new to Hugo and go, but that looks sort of OK to me. But obviously it's not working for some reason. Could an expert tell me what's wrong?

1 reply

p-b-west Dec 18, 2021

If I do this:

package main

import (
	"fmt"
	"os"
	"text/template"
)

type Custom struct {
	Css	string
} 
 
func main() {
	custom := Custom{"[\"custom.css\"]"}
	fmt.Printf("%s\n", custom)
 
    ut, err := template.New("customcss").Parse(`{{$cust := .Css}}
	The custom css is {{ $cust }}
	{{ with $cust }}
		{{ range . }}
			{{ . }}
		{{ end }}
	{{ end }}`)
     
    if err != nil {
        panic(err)
    }
 
    err = ut.Execute(os.Stdout, custom)
 
    if err != nil {
        panic(err)
    }
}

I get panic: template: customcss:4:11: executing "customcss" at <.>: range can't iterate over ["custom.css"]

Is this relevant?

p-b-west · 2021-12-18T05:24:15Z

p-b-west
Dec 18, 2021

To rebuild main.min.css, it seems that you must

delete the contents of resources/_gen/assets/css/ananke
run hugo (extended version) to rebuild.

I didn't have the extended version, and only discovered I needed it after deleting the _gen files above. When I then ran hugo the build failed telling me I needed the extended version.

1 reply

jpursey Dec 21, 2021
Author

After some testing on my own it seems that step 2 (run the extended version of hugo) is all that is needed. There is no need to delete the contents of resources/_gen/assets/css/ananke. As soon as I started using it, it respected the overrides with no other changes.

jpursey · 2021-12-19T00:09:13Z

jpursey
Dec 19, 2021
Author

Good to know. That seems a bit less than ideal to me though. I am bringing in the theme as a submodule and I don't want to be deleting and regenerating parts of it. My solution ended up being just making a root copy of site-style.html and just manually linking in my CSS. It isn't like it was very big or doing a lot, so the minification is pretty unimportant to me.

0 replies

danielfdickinson · 2021-12-19T14:05:46Z

danielfdickinson
Dec 19, 2021

I'm a little confused as to why folks are having so much trouble with custom CSS. I import Ananke as a module (having made my site a Hugo module, per the docs):

In config.toml

theme = ["github.com/theNewDynamic/gohugo-theme-ananke"]

In the [params] section of my config.toml I have:

custom_css = [ "custom-dfd.css" ]

I have a file assets/ananka/css/custom-dfd.css

which contains:

.presentation-pdf div {
    overflow: auto;
    resize: both;
}


.presentation-pdf div object {
    border: 2px solid;
    display: block;
    height: 760px;
    margin-right: .8em;
    resize: both;
    width: 100%;
}

@media (max-height: 499px) {
    .presentation-pdf div object {
        height: 100vh;
    }
}

@media (max-height: 900px) {
    .presentation-pdf div object {
        height: 480px;
    }
}

.intro-card-pdf-gallery {
    display: inline-block;
    margin-left: .8em;
    margin-right: .8em;
    margin-top: .3em;
    text-align: center;
    vertical-align: baseline;
}

.intro-card-pdf-gallery div {
    height: 665px;
    overflow: auto;
    text-align: center;
    width: 700px;
}

.intro-card-pdf-gallery object {
    border: 2px solid;
    display: block;
    height: 100%;
    margin-right: .8em;
    width: 100%;
}

.nested-img img {
    height: auto;
}

and the CSS is properly included in minification and works for me.

I always use the extended version of Hugo so I can't comment on whether the non-extended Hugo would work. It is not necessary to delete anything beforehand though (at least with up-to-date Hugo).

Perhaps the issue the OP (@jpursey) is having is overriding a 'Tachyons` style. Mostly I've switched to Tachyon-izing my shortcodes and layouts so that I'm not modifying the CSS just adding (or removing) classes where appropriate.

One final note, to override a particular layout in a theme it is not necessary to modify the theme, one only needs to copy the layout into the same location in your site layouts directory and make the modifications. Site layouts take precedence over theme layouts.

For example I have a customized layouts/partials/site-footer.html in my site layouts, and I have not touched the theme.

HTH

If the OP is still having problems with the .cf override I'll try to make some time to play around with overriding a Tachyons CSS.

11 replies

danielfdickinson Dec 21, 2021

@p-b-west Let's start with the last question:

Do you have resources/_gen/assets/css/ananke? What happens if you change your custom css with the generated files in place? It seems to me that there must be two pathways through this. Why else would I not be told that I needed extended until I had deleted the previously generated files?

Answer: With the extended version if I add or change custom CSS the generated files are updated automatically. When using the basic version it used to throw an error if the resources were not 'up to date' (i.e. if they would need to be generated). In version 0.66.0 a new configuration option was added:

build:
useResourceCacheWhen
When to use the cached resources in /resources/_gen for PostCSS and ToCSS. Valid values are never, always and fallback. The last value means that the cache will be tried if PostCSS/extended version is not available.
— from https://gohugo.io/getting-started/configuration/#configure-build

and the default is fallback. This perhaps should be revisited or refined (I'd suggest a constructively written post on the Hugo forum would be the way to go to discuss that, which will probably lead to creating an issue on the Hugo GitHub repo in a useful manner).

I will advise you though that the reason the default is fallback is that there was a great deal of complaining when themes couldn't be used with the basic version because the resources were not a perfect match for the various things that generate the resources, so it's best to keep in mind this has some 'history'.

I honestly think the extended version of Hugo should be the default and promoted as such, with 'basic' being for those platforms / situations where extended cannot build or be used because of library dependencies (which is the reason there are two versions in the first place).

I will admit it has been some time since I've thought about these particular issues, and that's probably true of the Hugo developers as well.

jpursey Dec 21, 2021
Author

Personally, I think it would be sufficient to just call out the extended version requirement in https://github.com/theNewDynamic/gohugo-theme-ananke#custom-css, since it is a silent failure otherwise. Indeed, installing the extended version was all I needed to do and the feature works as advertised.

jpursey Dec 21, 2021
Author

Oh and to close the loop on the original question... changing the the tachyons styles directly does work in the custom CSS (although now that I understand what tachyons is doing, that seems like very bad practice). Adding this into my assets/ananke/css/custom.css with the extended hugo install works as expected:

.tj {
  text-align: left;
}

danielfdickinson Dec 21, 2021

@jpursey Personally, I think it would be sufficient to just call out the extended version requirement in https://github.com/theNewDynamic/gohugo-theme-ananke#custom-css, since it is a silent failure otherwise. Indeed, installing the extended version was all I needed to do and the feature works as advertised.

I think you are right. I'd suggest opening an 'issue' on this GitHub repo with that as a documentation enhancement request and pointing to this discussion.

jpursey Dec 21, 2021
Author

Yup... done! #460

regisphilibert · 2021-12-23T21:18:21Z

regisphilibert
Dec 23, 2021
Maintainer

It would make sense that we only use toCSS if sass is found. (This is really the only reason to use Hugo Extended as far as I know). Now in order to allow this I would need to test with the hugo.IsExtended method. But it has only been introduced in 0.83 and the theme currently has a minVersion 64, it's a big bump in minVersion.

We could take a quick poll...

Bump min version to .83 and support SASS while allowing Hugo Extended or non-Extended
Keep min version at .64 and stop supporting SASS while allowing Hugo Extended or non-Extended
Keep min version at .64 and keep supporting SASS while only allowing Hugo Extended

3 replies

danielfdickinson Dec 23, 2021

FYI extended is also needed to handle webp images.

danielfdickinson Jan 7, 2022

@regisphilibert

If you want to support Hugo 0.80.0 (because it is what is in Debian Bullseye and Ubuntu Focal, Hirsute, and Impish), something like the following might be helpful:

{{- $hugoVersion := split (replaceRE ".*v([0-9]+).([0-9]+).([0-9]+).*" "$1 $2 $3" site.Hugo.Version) " " -}}{{- /* We have to use the deprecated .Hugo.Version to support 0.80.0 */ -}}
{{- if and (eq (index $hugoVersion 0) 0) (ge (index $hugoVersion 1) 83) -}}
    {{- if hugo.IsExtended -}}
        {{ $processableFormats = $processableFormats | append "webp" -}}
    {{- end -}}
{{- end -}}

danielfdickinson Aug 14, 2022

@regisphilibert Here is the correctly working version of the above. Sorry, for forgetting about this.

{{- $hugoVersion := split (replaceRE ".*v?([0-9]+)\\.([0-9]+)\\.([0-9]+).*" "$1 $2 $3" site.Hugo.Version) " " -}}
{{- /* We have to use the deprecated .Hugo.Version to support 0.80.0 */ -}}
{{- if and (eq (int (index $hugoVersion 0)) 0) (ge (int (index $hugoVersion 1)) 83) -}}
    {{- if hugo.IsExtended -}}
        {{ $processableFormats = $processableFormats | append "webp" -}}
    {{- end -}}
{{- end -}}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom CSS confusion #452

{{title}}

Replies: 5 comments 16 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Custom CSS confusion #452

Replies: 5 comments · 16 replies

jpursey Dec 21, 2021 Author

jpursey Dec 19, 2021 Author

jpursey Dec 21, 2021 Author

jpursey Dec 21, 2021 Author

jpursey Dec 21, 2021 Author

regisphilibert Dec 23, 2021 Maintainer

Replies: 5 comments 16 replies

jpursey Dec 21, 2021
Author

jpursey
Dec 19, 2021
Author

jpursey Dec 21, 2021
Author

jpursey Dec 21, 2021
Author

jpursey Dec 21, 2021
Author

regisphilibert
Dec 23, 2021
Maintainer