The Problem
This project is built with Hugo and uses the Minimal Hugo theme.
This post is part of an ongoing effort to tailor the theme over time.
In this post, after resolving the problem of Changing the Size of Font Awesome Icons in Hugo, we now want to increase the spacing between the arrow icons used for page navigation icons on list pages.
The Process
From the previous investigation mentioned above we know that the arrow icons are defined in the fa-arrow-left and fa-arrow-right elements of the paginator.html file in our layouts/partials folder.
Figuring out what to change
However, if we right-click on one of those elements and select Inspect to bring up Chrome Developer Tools we’ll see that element has no margin or padding defined.
If we look at it’s parent anchor (a) element, however, we’ll see padding is defined.
Since padding is already defined there and because we’d like a large clickable area to ease navigation, we’ll want to use this anchor element to make the change.
Examining that element reveals that its padding is set by the .page-icon class in the main.css file. To test a potential change, we can alter element.style to include padding: 0px 100px;, which results in the spacing we desire. (NOTE: If you’re not familiar with working with Chrome Developer Tools or altering element.style, review this quick and helpful guide to get up to speed on that very useful suite of tools.)
Figuring out how to make the change
Because of the layered nature of Hugo’s site building we’ll have to figure out how to alter the padding definition.
This is further complicated by the fact that each Hugo theme can, to some degree, handle site architecture differently.
But a web search for how to override CSS properties in Hugo revealed the basic approach with posts such as these:
The Solution
Create custom CSS file
First, we need to create a custom.css file in our static/css directory.
We’ll add the CSS that we already tested and confirmed in Chrome Web Developer Tools:
.pages-icon {
padding: 0px 100px;
}
Update css.html
Finally, we need to add a link to the custom CSS file in our css.html file in the layouts/partials directory.
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
Conclusion
Now the navigation arrows have a little more spacing.