Modify colors and fonts?

[johnmmcgee]

How would one modify the background colors and fonts of this theme? I am new to Hugo and still learning how to modify such things.

Thank you

[johnmmcgee]

A good example. When i set customcss and try to utilize the css file i create, this is the output i receive from

hugo server

> hugo server -D -F
Start building sites …
hugo v0.98.0+extended linux/amd64 BuildDate=unknown
ERROR 2022/12/01 21:05:18 render of "page" failed: execute of template failed: template: _default/single.html:12:6: executing "_default/single.html" at <partial "head.html" .>: error calling partial: "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/lxndrblz/[email protected]/layouts/partials/head.html:72:31": execute of template failed: template: partials/head.html:72:31: executing "partials/head.html" at <resources>: wrong type for value; expected resources.ResourceTransformer; got resource.Resource
ERROR 2022/12/01 21:05:18 render of "taxonomy" failed: execute of template failed: template: _default/list.html:12:6: executing "_default/list.html" at <partial "head.html" .>: error calling partial: "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/lxndrblz/[email protected]/layouts/partials/head.html:72:31": execute of template failed: template: partials/head.html:72:31: executing "partials/head.html" at <resources>: wrong type for value; expected resources.ResourceTransformer; got resource.Resource
ERROR 2022/12/01 21:05:18 render of "home" failed: execute of template failed: template: index.html:12:6: executing "index.html" at <partial "head.html" .>: error calling partial: "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/lxndrblz/[email protected]/layouts/partials/head.html:72:31": execute of template failed: template: partials/head.html:72:31: executing "partials/head.html" at <resources>: wrong type for value; expected resources.ResourceTransformer; got resource.Resource
ERROR 2022/12/01 21:05:18 render of "taxonomy" failed: execute of template failed: template: _default/list.html:12:6: executing "_default/list.html" at <partial "head.html" .>: error calling partial: "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/lxndrblz/[email protected]/layouts/partials/head.html:72:31": execute of template failed: template: partials/head.html:72:31: executing "partials/head.html" at <resources>: wrong type for value; expected resources.ResourceTransformer; got resource.Resource
Error: Error building site: failed to render pages: render of "section" failed: execute of template failed: template: _default/list.html:12:6: executing "_default/list.html" at <partial "head.html" .>: error calling partial: "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/lxndrblz/[email protected]/layouts/partials/head.html:72:31": execute of template failed: template: partials/head.html:72:31: executing "partials/head.html" at <resources>: wrong type for value; expected resources.ResourceTransformer; got resource.Resource
Built in 70 ms

any help would be appreciated. Even a simple example of how to change the background of both dark and light mode.

Thank you.

[lxndrblz]

How did you try to setup the custom css?

[johnmmcgee]

I tried using fairly standard css structure. But i admit, i havent done any web programming in over 15 years.

[lxndrblz]

@johnmmcgee Can you please explain how you tried to add your custom css, i.e., in the config.toml.

[johnmmcgee]

customCss = ['css/johnmcgee.css']

The file is located in public/css

[lxndrblz]

You need to put those files under the assets folder. Please see the documentation for an example. 😊

[johnmmcgee]

I found it. :)

I created

./assets/css/johnmcgee.css

Is there a good list of what can be changed? again, it has been quite some time since i have tinkered with css.

[johnmmcgee]

The reason i ask is because the following only seems to change the bottom 50% of the screen, the rest stays the default Dark theme color:

html {
    background-color: #181a1b !important;
}

[lxndrblz]

@johnmmcgee You can basically override all the settings from these files:

https://github.com/lxndrblz/anatole/tree/master/assets/scss

[lxndrblz]

What is it that you are trying to achieve?

[johnmmcgee]

@lxndrblz mostly the background color of the dark theme. Possibly the fonts.

I am poking around the scss files and they do not look like standard css, so i think that is where some of the confusion is coming.