How to modify a theme?

I want to edit the themefisher/kross theme. I have cloned the theme and began to edit the site in the exampleSite directory. Now I want to change some of the layouts. However, when I make a change, for example to change one of the names of the footer columns, it does not reflect in my site.

This would be done like so:

<!-- footer -->
<footer class="bg-dark footer-section">
+          <h5 class="text-light">My Column</h5> <!-- Not showing -->
-          <h5 class="text-light">Email</h5> <!-- Still showing this -->
          <p class="text-white paragraph-lg font-secondary"><a href="mailto:{{}}">{{}}</a></p>
        <div class="col-md-6">
+          <h5 class="text-light">My Column 2</h5> <!-- Not showing -->
-          <h5 class="text-light">Phone</h5> <!-- Still showing this -->
          <p class="text-white paragraph-lg font-secondary"><a href="tel:{{}}">{{}}</a></p>
  <div class="footer-bottom border-top text-center border-dark py-5">
    <p class="mb-0 text-light">{{ site.Params.copyright | markdownify }}</p>
<!-- /footer -->

I suspect that I need to change some config file in the exampleSite directory to reference that I am using my own theme instead of the default theme from

What is the issue here, and what is the recommended action to fix? Thanks!

Edit: I am running using the following command hugo server. I have also tried hugo server --themesDir ../.., which is recommended in the README (see github linked above, can’t post >2 links in a post in this forum)

Copy theme files you want to edit in the base layouts folder following the same path as in the theme. So, for example, if the theme path is themes/kross-theme/layouts/partials/footer.html then copy the same file to layouts/partials/footer.html in your Hugo directory.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.