Using Custom.css with Relearn

Hi, I’m trying to alter the font size of headings (h2 and h3) in Relearn but without success.

I have a custom.css file in assets/css which contains:

h3 {
font-size: .5em;
}

Where am I going wrong?

Assuming I get this right soon, are the changes in CSS reflected immediately on localhost or do I need to restart the server?

Cheers.

Without knowing Relearn, and assuming that you, if in doubt, restart the server, one common issue is that there are CSS rules like for instance .title h3 which are more “specific” (that’s what the cascading is about) and would override your h3. You can test if that is the case by adding a !important between the .5em and the ;.

h3 {
font-size: .5em !important;
}

If that works — bad news, it’s bad style and further down the road you will run into more issues. So let’s fix it: Open the browser console (for instance in Google Chrome), then right click the headline you want to format. Go to the “Computed” tab in the console and check, which rule applied the font-size for that headline. Then change that one in your overriding CSS.

By the way, without any of this, you can use the “computed” tab in the console to see, what exactly is applying the styles. Might be a stylesheet that comes at the end of it all. Might be something completely else.

Anyway, you don’t give much information :slight_smile: A sample repo would be good in cases like this.

I skimmed the documentation of the theme but didn’t see that file mentioned. Where did you get that from?

I found this

and this

https://www.johann-oberdorfer.eu/blog/2023/10/15/23-11-10-hugo-relearn-theme/#theme-customizations

related to custom CSS. Maybe that helps. Otherwise, you might get speedier help asking the theme’s author.

Nope, it didn’t work. Is that good news!! :grimacing:

Its not a part of the delivered theme but, as far as I can work out, to modify a style you can add a css file of your own. In the case of the relearn theme it goes in assets/css and supposedly is automatically picked up by the theme as Hugo does its stuff! So far I’ve not been able to achieve this!

Check out the theme’s source. There’s nothing in there that suggests custom.css will be picked up from assets. That’s why I quoted the two links in my previous post. Did you follow their lead?

Personally, I’d not use a theme where I’d have to “work out” where a custom CSS file has to go and how to make the theme pick it up. YMMV, of course.

I’ve just added support for custom.css to the theme. See Adding Scripts :: Hugo Relearn Theme

1 Like

Thank you most sincerely! Do I need to reinstall/refresh my theme?

Yes, you need the latest release from the main branch.

Upgraded to Relearn 7.3.2. and I have a very simple custom.css sitting in assets/css to define h3 font size, but still no joy. Do I need to link the custom.css somewhere?

Check what your browser’s developer tools tell you about the styles. That’s the fastest and most appropriate way to solve CSS issues.

There you’ll also see if the CSS is loaded as intended.

In any case, this is not a Hugo but either a theme or a CSS issue.

Did you install as a Hugo module or as a Git submodule?

It will be available in the upcoming Relearn 7.4.0 once it’s released. Alternativley you can use the latest version from the GitHub main branch were it is already fixed.

Upgrading depends on your initial installation method.

I’m pretty sure I installed it as a Hugo module.