Minimo CSS Customization


#1

Hello,

I’ve chosen the Minimo theme which is great but there are yellow lines separating some of the content. The CSS in question is [here] (https://github.com/MunifTanjim/minimo/blob/master/src/stylesheets/extras/_variables.scss#L4).

I’ve been staring at the docs and some posts on here, but the information I’ve found doesn’t seem applicable to my layout/directory structure, maybe I’m being stupid. This theme is also using Sass, so I don’t know if that makes a difference. On the “Customizing Themes” section, it says:

Hugo permits you to supplement or override any theme template or static file, with files in your working directory.

I just used the element inspector in chrome to find the hex value for the yellow that’s affecting the border in question, it was #FFCD00, so I grepped for it and it’s in the link I provided for the CSS above, which doesn’t come under any path named ‘static’ . If I change this CSS value and restart the server with hugo server --theme=minimo --buildDrafts and then hard refresh my browser, all that happens is the yellow is now in RGB format instead of hex?!

No idea what’s going on here to be honest, not an expert web developer, please advise, I’m sure I’m just overlooking something very obvious, oh well.


#2

Oh, I found a solution to my problem. I looked at the Sass docs.

In the themes/minimo directory I ran:
sass src/stylesheets/style.scss static/css/main.cc66fabc.css

I wonder if there is a nicer solution?


#3

It’s always better to ask theme developers directly on Github, by opening an issue in the theme’s repo.


#4

I’ve just added an easier way of customizing css for Minimo. Here are the steps:

  • Use the latest version of Minimo (reinstall it if you have installed it already).

  • In your site’s config.toml file, add this option:

[params]
  customCSS = [ "custom.css" ]
  • In your site’s /static/ folder. Create a file named custom.css.
  • Now place whatever css you want in the /static/custom.css file. It will override the theme’s default css. For example, if you want to change color of those yellow seperators, you may want to use this:
.comments-container #disqus_thread:before,
.entry-header:after,
.entry-nav-links:before,
.footer:before,
.prev-entry~.next-entry:before,
.site-header:after {
  border-bottom-color: violet;
}

For better understanding, you can take a look inside the exampleSite folder of Minimo.


#5

That’s great, I’ll do that!

I wonder how possible it would be to also be able to override the scss variables, this way it would reduce on all this duplicate CSS, not a big deal though, heh. Thanks for responding and acting so quickly on this anyway!


#6

It’s not possible to override SCSS variables. SCSS is not directly used in the browser. First it has to be compiled to CSS. So, if you want to change the value of SCSS variables, you will have to change it in the theme’s src/stylesheets directory and compile it to the static directory.

You can do it manually as you have mentioned in your comment. But there is a neat way for doing that too:

  • You will need to have NodeJS installed on your system. If you use Ubuntu (or its derivatives), you can install it by:

    sudo apt update
    sudo apt install nodejs npm
    
  • cd into the Minimo’s root directory. Run: npm install

  • Make changes in the src/stylesheets directory.

  • Run: npm build

That’s all. It will generate a fresh CSS file in static directory from the modified SCSS. Build your hugo site using the hugo command as usual.

Downside: The downside of this approach is that, if you decide to update the theme later, you will lose your changes. Adding customCSS is free from this problem.