Customize Hugo HTML and CSS

Hugo

Some functionality that is normal for a blog is not provided out of the box with Hugo. Things like a contact form or comments have to be added or tacked on from a third party. Fortunately, Hugo will allow us to insert custom HTML, CSS, and JavaScript into the site to allow for this. We can add this functionality at the page level or at the site level through modifying the templates.

Adding HTML to a Page

It is possible to add HTML to a page by simply including the HTML in the markdown itself. This markdown MUST NOT be inside of a markdown code block which are designated with the 3 backticks stgring. The HTML will then be included in the page verbatim.

For instance if we wanted to include a contact form and have it submit to a third party service such as http://formspree.io, then we could inlcude the following HTML on the contact.md page:

<!-- use third party site for the form submission -->
<form method="POST" action="http://formspree.io/myemailaddress@gmail.com">
  <div class="form-group">
    <input name="name" placeholder="Your Name" type="text"  class="form-control" required>
  </div>
  <div class="form-group">
    <input name="email" placeholder="Your Email" type="email"  class="form-control" required>
  </div>
  <div class="form-group">
    <textarea name="message" placeholder="Your message"  class="form-control" required></textarea>
  </div>
  <button type="submit" class="btn btn-default">Send</button>
</form>

This will then render on the static site. Of course, we will have to include some custom CSS in the site as well to render the controls properly.

Custom Hugo CSS file

Custom CSS can be added to the site by modifying the theme of the site. It is just a couple of steps.

In the folder themes/themName/static/css, add a new file for the custom CSS and add the custom CSS to it.

Here is an example that ties in with the contact form HTML section:

.form-control {
    display: block;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    margin: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.form-group {
    margin-bottom: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #ccc ;
    border-radius: 4px;
    margin-bottom: 15px;
}

In the file themes/themeName/layouts/partials/widgets/header.html, add a link to the new CSS file. The link is not static as it is generated by hugo based on the site base url, so it needs be in a format like:

<link rel="stylesheet" href="{{ .Site.BaseURL }}css/custom.css" type="text/css" media="all" />

Now the CSS will be included in the site.

Markdown strong delimiter ** fix

The ** markers do not show up in Hugo, so these can be added to the CSS file as well.

strong {
    font-weight: bold;
}

The list view for summaries does not contain “Read More” link for articles that have more info than displayed in summary. This can be added with the following code in the list.html file right after the div that prints the summary.

{{ if .Truncated }}
    <div class="read-more-link">
        <a href="{{ .RelPermalink }}">Read More…</a>
    </div>
{{ end }}

To enable the “Read More” functionality, all that has to be done is to add the following html to the post where the summary should end.

    <!–more–>

Since we have defined a read-more-link for the div, we can add this to the custom CSS file so that it displays in a better fashion.

.read-more-link {
    font-weight: bold;
    font-style: italic;
    margin-top: 5px;
}

Summary paragraphs have no spacing.

The default spacing for paragraphs in the summary seems to be zero. So, add the following rule to the custom CSS file to fix this.

.loop__excerpt p {
    margin-bottom: 10px;
}