Hugo Docs Theme: cannot find page element in CSS templates

Using Themes
1

I’m looking at decreasing the space between Heading 1s (H1) and the paragraph before it in the Hugo Docs Theme. The idea is to take back the wasted screen real estate space (see pic).

image

I thought it must be a top-margin for H1 but tinkering with the H1s in _contents.css and app.css hasn’t helped.

I’ve looked at:

  • The _content.css file in the /assets folder has an h1 component, but there doesn’t seem to be any top:margin component in the file.
  • The app.css file in assets/output/css folder seems to have a margin-top: 0; h1 component but the value of that is also 0.
  • Searching for margin-bottom in the assets/output/css folder gives me 106 matches and tbh I have no idea which of these would control these margins.

If anyone could hint or share what margin-top or margin-bottom should I be looking for and in what CSS file, I would be grateful…!

2

Please do not post entire questions in a topic’s title it clutters the forum.

I have rephrased the topic title accordingly.

Thank you for your understanding.

1 Like
3

Oops @alexandros. Sorry but new here. Will keep that in mind next time.

1 Like
4

*BUMP*
Anyone? @bep? :slightly_smiling_face:

5

If you right click the header in your browser and select “Inspect element” the developer tools will open up. There you can see exactly what rules effects what part of the site. You can even change the css to experiment. No need to guess.

Looking at the Hugo documentation site it looks like the header you point out is a H2 header. The css rule is:

.documentation-copy h2 {
    margin-top: 3em;
}
1 Like
6

Thanks for the reply @frjo

Yes. I’m aware of Inspect Element and the css file to look for is _documentation-styles.css in /assets/css/_documentation-styles.css. On directly changing in the developer tools, the changes are reflected but making the changes in the _documentation-styles.css file itself doesn’t show it as reflected.

The said piece of code in _documentation-styles.css being:

/*documentation-copy headings exaggerate spacing and size to chunk content */
  .documentation-copy h2 {
    margin-top: 1em;
    &.minor {
      font-size: inherit;
      margin-top: inherit;
      border-bottom: none;
    }
  }

I mean, I cleared the browser cache, did a hard refresh crt+F5, tried the site in another browser etc but no luck.
So, QQ: I’m wondering if Hugo saves the CSS in a cache folder or something and I need to clear some hugo cache folder(s)? Or is there any specific hugo command I need to run here to clear any js or css cache files?

Here’s how my inspect element looks btw. It’s just like what you have said.

image
image.png1752×789 106 KB

7

I spoke too early @frjo. Looks like there’s another chunk of .documentation-copy h2 in another file \assets\output\css\app.css

.documentation-copy h2 {
    margin-top: 3em
  }

Changing the values here did the trick. Thanks everyone for the help! This thread can be closed :slight_smile:

8

The /assets/output/css/app.css should not be edited manually.

See the README at https://github.com/gohugoio/gohugoioTheme/tree/master/src to learn how to use npm/webpack to build /assets/output/css/app.css from all the css files in /assets/css/.

Hugo nowadays have built in support for sass and postcss and I prefer themes that use that instead of things like webspack/gulp/npm.

1 Like