Override a single css property?

support
1

Is there any way to override only a single css property inside a theme? For example themes/terminal-cookbook/layouts/partials/head.html sets this css custom property (among others):

<style>
     :root {
         --global-font-size: 15px;
...
more properties...
...
</style>

If you wanted to override just this one line would you copy the entire file (a few hundreads of “sloc”) just to edit this one line? Or is there any way to create a new override.css file just with these four lines for hugo to pick it up instead?

<style>
     :root {
         --global-font-size: 30px;
</style>

Sorry, maybe I’m just new to web development and lack some basic CSS knowledge.

2

Yes. Make sure the override.css is after the theme’s default one.

1 Like
3

Thanks, that’s good news. Do you mean that it needs to be in the corresponding directory or have the same name? I’ve tried to do it from /static/override.css, but it seems to have no effect so far.

So if this property was written in /themes/terminal-cookbook/layouts/partials/head.html would you need to add it to layouts/partials/head.html in root? Or could it be /layouts/partials/override.css?

4

The placement of the override.css is fine (thought I would use something like /static/css/override.css instead). You need to copy /themes/terminal-cookbook/layouts/partials/head.html to /layouts/partials/head.html, and modify the last to add the style to it after the main theme style. That’s assuming the style for the theme is defined in head.html.

5

Oh I see, thank you. So you need to add override.css as a new stylesheet in html? Hmm, I was hoping that hugo may just override the value in the existing stylesheet at “build time”.

That’s probably not a good practice when working in a team, but for a personal project I would prefer then to just edit values in the theme directly (in-place). For small changes this seems easier and maybe save you an extra http request as well?

6

That will make it a bit more difficult to upgrade, should you decide to keep the theme up-to-date.

7

Thanks for the heads up, but I think it’s a reasonable compromise… I’m a noob in web development, while I wouldn’t recommend it to anyone else, it may make the blog more readable (for me).

8

Do you think that this would be a bad idea to add such a “dynamic rewrite” feature to hugo? Would it make things more complicated for experienced users? Maybe it would lower the barrier of entry to the new users?

9

Personally? I don’t, but I am just a really bad Hugo user. I believe the developers try to keep things simple (though simple is a relative term), and what you are asking is simply a chore for a theme creator/modifier, and not Hugo.

1 Like
10

Makes sense, I’ve had a very similar discussion last week regarding ability to commit local changes to emacs packages managed by a framework.

“Immutability” is the key word I think. Seems to be very popular these days.

Fortunately, hugo websites are easy to understand so “breaking” upstream theme doesn’t seem like a high cost to pay for maintainability (especially when you are new to web development).

1 Like