[to change the font color and size]

[svcuong]

I started to use the hugo-bootstrap theme to create personal website and I like it so much. However, I am quite confused how I could change the font color and size. I know this question will sound stupid but just failed in getting solutions after a couple of hours' searching. Thanks in advance if you could give some ideas.

[Xzya]

Hello,

There are several ways to do this:

• You can include your own custom CSS, and manually change what you need

  • Include your custom CSS inside the static folder
  • Add a partial layout named head-custom.html and include the link to your custom CSS

For example:

static/css/custom-styles.css

.blog-post > a {
    color: green;
    font-size: 1.25rem;
}

layouts/partials/head-custom.html

<link href="{{ .Site.BaseURL }}css/custom-styles.css" rel="stylesheet">

The above would increase the font of the "Read More →" link and make it green.

Keep in mind that some elements might be harder to target if they don't have custom classes set to them, but you can always override any of the theme's layout files and include your own classes to make it easier.

• If you want to override many of bootstrap's defaults, you could also include the bootstrap project in your code, and override the SCSS variables you need. I don't know the full steps to do this, but I can give you some links

  • https://gohugo.io/hugo-pipes/scss-sass/
  • https://getbootstrap.com/docs/4.1/getting-started/theming/
  • https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L271

Let me know if this works for you, Thanks!