<lidata-nav-id=/hugo-theme-relearn/cont/menushortcuts/title="Menu extra shortcuts"class=dd-item><ahref=/hugo-theme-relearn/cont/menushortcuts/>Menu extra shortcuts<iclass="fas fa-check read-icon"></i></a></li>
<lidata-nav-id=/hugo-theme-relearn/cont/icons/title="Icons and logos"class=dd-item><ahref=/hugo-theme-relearn/cont/icons/>Icons and logos<iclass="fas fa-check read-icon"></i></a></li>
<lidata-nav-id=/hugo-theme-relearn/cont/i18n/title="Multilingual and i18n"class="dd-item alwaysopen"><ahref=/hugo-theme-relearn/cont/i18n/>Multilingual and i18n<iclass="fas fa-check read-icon"></i></a><ul></ul></li>
<aclass=github-buttonhref=https://github.com/McShelby/hugo-theme-relearn/archive/main.zipdata-icon=octicon-cloud-downloadaria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
<aclass=github-buttonhref=https://github.com/McShelby/hugo-theme-relearndata-icon=octicon-stardata-show-count=truearia-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<aclass=github-buttonhref=https://github.com/McShelby/hugo-theme-relearn/forkdata-icon=octicon-repo-forkeddata-show-count=truearia-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
<p>Built with <ahref=https://github.com/McShelby/hugo-theme-relearn><iclass="fas fa-heart"></i></a> by <ahref=https://gohugo.io/>Hugo</a></p>
<aclass=github-linktitle="Edit this page"href=https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/customization/_index.en.mdtarget=blank>
<iclass="fas fa-code-branch"></i>
<spanid=top-github-link-text>Edit this page</span>
<p>The Relearn theme has been built to be as configurable as possible by defining multiple <ahref=https://gohugo.io/templates/partials/>partials</a></p>
<p>In <code>themes/hugo-theme-relearn/layouts/partials/</code>, you will find all the partials defined for this theme. If you need to overwrite something, don’t change the code directly. Instead <ahref=https://gohugo.io/themes/customizing/>follow this page</a>. You’d create a new partial in the <code>layouts/partials</code> folder of your local project. This partial will have the priority.</p>
<p>This theme defines the following partials :</p>
<ul>
<li><em>content</em>: the content page itself. This can be overridden if you wan’t to display page’s meta data above or below the content.</li>
<li><em>header</em>: the header of the content page (contains the breadcrumbs). <em>Not meant to be overwritten</em></li>
<li><em>custom-header</em>: custom headers in page. Meant to be overwritten when adding CSS imports. Don’t forget to include <code>style</code> HTML tag directive in your file</li>
<li><em>footer</em>: the footer of the content page (contains the arrows). <em>Not meant to be overwritten</em></li>
<li><em>custom-footer</em>: custom footer in page. Meant to be overwritten when adding Javacript. Don’t forget to include <code>javascript</code> HTML tag directive in your file</li>
<li><em>favicon</em>: the favicon</li>
<li><em>logo</em>: the logo, on top left hand corner.</li>
<li><em>meta</em>: HTML meta tags, if you want to change default behavior</li>
<li><em>menu</em>: left menu. <em>Not meant to be overwritten</em></li>
<li><em>menu-pre</em>: side-wide configuration to prepend to menu items. If you override this, it is your responsiblity to take the page’s <code>pre</code> setting into account.</li>
<li><em>menu-post</em>: side-wide configuration to append to menu items. If you override this, it is your responsiblity to take the page’s <code>post</code> setting into account.</li>
<li><em>menu-footer</em>: footer of the the left menu</li>
<li><em>search</em>: search box</li>
<li><em>toc</em>: table of contents</li>
</ul>
<h2id=change-the-logo>Change the logo</h2>
<p>Create a new file in <code>layouts/partials/</code> named <code>logo.html</code>. Then write any HTML you want.
You could use an <code>img</code> HTML tag and reference an image created under the <em>static</em> folder, or you could paste a SVG definition!</p>
<divclass="notices note">
<divclass=label>Note</div><p>The size of the logo will adapt automatically</p>
<p>If your favicon is a SVG, PNG or ICO, just drop off your image in your local <code>static/images/</code> folder and name it <code>favicon.svg</code>, <code>favicon.png</code> or <code>favicon.ico</code> respectivly.</p>
<p>If no favicon file is found, the theme will lookup the alternative filename <code>logo</code> in the same location and will repeat the search for the list of supported file types.</p>
<p>If you need to change this default behavior, create a new file in <code>layouts/partials/</code> named <code>favicon.html</code>. Then write something like this:</p>
<p>First, create a new CSS file in your local <code>static/css</code> folder prefixed by <code>theme</code> (e.g. with <em>mine</em> theme <code>static/css/theme-mine.css</code>). Copy the following content and modify colors in CSS variables.</p>
<spanstyle=color:#ff5c57>--MAIN-TEXT-color</span>: <spanstyle=color:#ff9f43>#323232</span>; <spanstyle=color:#78787e>/* Color of text by default */</span>
<spanstyle=color:#ff5c57>--MAIN-TITLES-TEXT-color</span>: <spanstyle=color:#ff9f43>#5e5e5e</span>; <spanstyle=color:#78787e>/* Color of titles h2-h3-h4-h5-h6 */</span>
<spanstyle=color:#ff5c57>--MAIN-LINK-color</span>: <spanstyle=color:#ff9f43>#1C90F3</span>; <spanstyle=color:#78787e>/* Color of links */</span>
<spanstyle=color:#ff5c57>--MAIN-LINK-HOVER-color</span>: <spanstyle=color:#ff9f43>#167ad0</span>; <spanstyle=color:#78787e>/* Color of hovered links */</span>
<spanstyle=color:#ff5c57>--MAIN-ANCHOR-color</span>: <spanstyle=color:#ff9f43>#1C90F3</span>; <spanstyle=color:#78787e>/* color of anchors on titles */</span>
<spanstyle=color:#ff5c57>--MAIN-CODE-color</span>: <spanstyle=color:#ff9f43>#e2e4e5</span>; <spanstyle=color:#78787e>/* fallback color for code background */</span>
<spanstyle=color:#ff5c57>--MAIN-CODE-BG-color</span>: <spanstyle=color:#ff9f43>#282a36</span>; <spanstyle=color:#78787e>/* fallback color for code text */</span>
<spanstyle=color:#ff5c57>--MENU-HOME-LINK-color</span>: <spanstyle=color:#ff9f43>#323232</span>; <spanstyle=color:#78787e>/* Color of the home button text */</span>
<spanstyle=color:#ff5c57>--MENU-HOME-LINK-HOVER-color</span>: <spanstyle=color:#ff9f43>#5e5e5e</span>; <spanstyle=color:#78787e>/* Color of the hovered home button text */</span>
<spanstyle=color:#ff5c57>--MENU-HEADER-BG-color</span>: <spanstyle=color:#ff9f43>#1C90F3</span>; <spanstyle=color:#78787e>/* Background color of menu header */</span>
<spanstyle=color:#ff5c57>--MENU-HEADER-BORDER-color</span>: <spanstyle=color:#ff9f43>#33a1ff</span>; <spanstyle=color:#78787e>/*Color of menu header border */</span>
<spanstyle=color:#ff5c57>--MENU-SEARCH-BG-color</span>: <spanstyle=color:#ff9f43>#167ad0</span>; <spanstyle=color:#78787e>/* Search field background color (by default borders + icons) */</span>
<spanstyle=color:#ff5c57>--MENU-SEARCH-BOX-color</span>: <spanstyle=color:#ff9f43>#33a1ff</span>; <spanstyle=color:#78787e>/* Override search field border color */</span>
<spanstyle=color:#ff5c57>--MENU-SEARCH-BOX-ICONS-color</span>: <spanstyle=color:#ff9f43>#a1d2fd</span>; <spanstyle=color:#78787e>/* Override search field icons color */</span>
<spanstyle=color:#ff5c57>--MENU-SECTIONS-ACTIVE-BG-color</span>: <spanstyle=color:#ff9f43>#20272b</span>; <spanstyle=color:#78787e>/* Background color of the active section and its children */</span>
<spanstyle=color:#ff5c57>--MENU-SECTIONS-BG-color</span>: <spanstyle=color:#ff9f43>#252c31</span>; <spanstyle=color:#78787e>/* Background color of other sections */</span>
<spanstyle=color:#ff5c57>--MENU-SECTIONS-LINK-color</span>: <spanstyle=color:#ff9f43>#ccc</span>; <spanstyle=color:#78787e>/* Color of links in menu */</span>
<spanstyle=color:#ff5c57>--MENU-SECTIONS-LINK-HOVER-color</span>: <spanstyle=color:#ff9f43>#e6e6e6</span>; <spanstyle=color:#78787e>/* Color of links in menu, when hovered */</span>
<spanstyle=color:#ff5c57>--MENU-SECTION-ACTIVE-CATEGORY-color</span>: <spanstyle=color:#ff9f43>#777</span>; <spanstyle=color:#78787e>/* Color of active category text */</span>
<spanstyle=color:#ff5c57>--MENU-SECTION-ACTIVE-CATEGORY-BG-color</span>: <spanstyle=color:#ff9f43>#fff</span>; <spanstyle=color:#78787e>/* Color of background for the active category (only) */</span>
<spanstyle=color:#ff5c57>--MENU-VISITED-color</span>: <spanstyle=color:#ff9f43>#33a1ff</span>; <spanstyle=color:#78787e>/* Color of 'page visited' icons in menu */</span>
<spanstyle=color:#ff5c57>--MENU-SECTION-HR-color</span>: <spanstyle=color:#ff9f43>#20272b</span>; <spanstyle=color:#78787e>/* Color of <hr> separator in menu */</span>
}
</code></pre></div><p>Then, set the <code>themeVariant</code> value with the name of your custom theme file. That’s it!</p>
