How do I customise an existing CSS inside custom.html (when using the template as Hugo module) ?

[andreagrandi]

Hello, I'm trying to customise the .article-content code styling.

I'm currently using hugo-them-stack as a Go module but before going through this path, I had simply cloned the whole theme and changed the scss in place and it was working as expected.

Now, using the module, I'm aware that (I'm following instructions here https://stack.jimmycai.com/config/header-footer ) I need to create a file named layouts/partials/head/custom.html and insert the CSS customisation there.

I inserted this:

<style>
    /* Overwrite CSS variable */
    .article-content code {
        border-radius: var(--tag-border-radius);
        font-family: var(--code-font-family);
        color: #c25;
        padding: 1px 3px;
        background-color: #f7f7f9;
        border: 1px solid #e1e1e8;
        border-radius: 3px;
    }
</style>

but the style is not applied.

Again, when I was not using the module, I manually changed the style here

hugo-theme-stack/assets/scss/partials/layout/article.scss

Line 263 in 03ee336

code {

and everything was working as expected.

I suspect that the "selector" (is it called in this way? I'm really new to this stuff) I'm using (.article-content code) may be wrong or have a wrong syntax.

Why am I unable to apply the custom CSS?

p.s: the file seems to be detected by Hugo:

Change detected, rebuilding site.
2024-02-22 09:21:06.174 +0100
Template added WRITE         "/Users/andrea/Projects/andreagrandi-hugo/layouts/partials/head/custom.html"

What am I missing? Thanks for your help 🙏🏻

[CaiJimmy]

I'm not sure what's wrong either. I'm not able to reproduce it.

I have created the same file with content, and the style has changed as expected:

Can you create a minimal reproducible example and upload it to GitHub (using the starter template)?

[andreagrandi]

Hi and thanks for your reply! I forgot to update this discussion. It looks like it was some cache issue. Hugo wasn't reloading the content properly and I kept seeing the old style. I rebuilt the pages and it worked, it's also live on my blog https://www.andreagrandi.it/posts/how-to-show-cover-image-pelican-blog-posts/