As I posted before, I switched my theme over to harbor which I quite like. However, I wanted to make some changes to the look and feel of the page. There is a way of overriding the CSS in a Hugo theme but it wasn’t part of harbor. So, I created an issue on github to see if had just missed the feature.

Much to my delight, the author of the theme picked it up and did a change to the theme this weekend so I could do a simple override and change up a few font colors. I’m not a whiz with CSS, but putting customCSS=["/css/custom.css"] into my config.toml and adding my CSS to static/css/custom.css did the trick. The only thing I had to figure out was how to get my rules in the front so they would be rendered. I used the !important modifier and it works as I’d hoped.

  h1 {
    font-family: 'Roboto', Helvetica, sans-serif;
    font-weight: 800;
    color: #c1694f !important;
  }

 .nav-links li a i {
     color: #c1694f !important;
 }

I’m pretty happy with this and will probably do some additional tweaks to make harbor work just a little better for me. Thanks matuyoshi30!

hugo  css