<metaname="description"content="Documentation for Hugo Relearn Theme">
<metaname="author"content="Sören Weber">
<title>Customization :: Documentation for Hugo Relearn Theme</title>
<linkrel="alternate"type="application/rss+xml"href="/hugo-theme-relearn/basics/customization/index.xml"title="Documentation for Hugo Relearn Theme"/>
<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-button"href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip"data-icon="octicon-cloud-download"aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
<aclass="github-button"href="https://github.com/McShelby/hugo-theme-relearn"data-icon="octicon-star"data-show-count="true"aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<aclass="github-button"href="https://github.com/McShelby/hugo-theme-relearn/fork"data-icon="octicon-repo-forked"data-show-count="true"aria-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-link"title='Edit this page'href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/customization/_index.en.md"target="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>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>
<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>
<spanclass="c"># Change default color scheme with a variant one. Can be empty, "red", "blue", "green" or an array like [ "blue", "green" ].</span>
<spanclass="c"># Change default color scheme with a variant one. Can be empty, "red", "blue", "green" or an array like [ "blue", "green" ].</span>
<spanclass="c"># Change default color scheme with a variant one. Can be empty, "red", "blue", "green" or an array like [ "blue", "green" ].</span>
<spanclass="c"># Change default color scheme with a variant one. Can be empty, "red", "blue", "green" or an array like [ "blue", "green" ].</span>
<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>
<spanclass="nv">--MAIN-TEXT-color</span><spanclass="p">:</span><spanclass="mh">#101010</span><spanclass="p">;</span><spanclass="c">/* Color of text by default */</span>
<spanclass="nv">--MAIN-TITLES-TEXT-color</span><spanclass="p">:</span><spanclass="mh">#444753</span><spanclass="p">;</span><spanclass="c">/* Color of titles h2-h3-h4-h5-h6 */</span>
<spanclass="nv">--MAIN-LINK-color</span><spanclass="p">:</span><spanclass="mh">#486ac9</span><spanclass="p">;</span><spanclass="c">/* Color of links */</span>
<spanclass="nv">--MAIN-LINK-HOVER-color</span><spanclass="p">:</span><spanclass="mh">#134fbf</span><spanclass="p">;</span><spanclass="c">/* Color of hovered links */</span>
<spanclass="nv">--MAIN-ANCHOR-color</span><spanclass="p">:</span><spanclass="mh">#486ac9</span><spanclass="p">;</span><spanclass="c">/* color of anchors on titles */</span>
<spanclass="nv">--MAIN-BG-color</span><spanclass="p">:</span><spanclass="mh">#ffffff</span><spanclass="p">;</span><spanclass="c">/* color of text by default */</span>
<spanclass="c">/* adjusted to relearn-light chroma style */</span>
<spanclass="nv">--CODE-BLOCK-color</span><spanclass="p">:</span><spanclass="mh">#000000</span><spanclass="p">;</span><spanclass="c">/* fallback color for block code text */</span>
<spanclass="nv">--CODE-BLOCK-BG-color</span><spanclass="p">:</span><spanclass="mh">#f8f8f8</span><spanclass="p">;</span><spanclass="c">/* fallback color for block code background */</span>
<spanclass="nv">--CODE-BLOCK-BORDER-color</span><spanclass="p">:</span><spanclass="mh">#d8d8d8</span><spanclass="p">;</span><spanclass="c">/* color of block code border */</span>
<spanclass="nv">--CODE-INLINE-color</span><spanclass="p">:</span><spanclass="mh">#5e5e5e</span><spanclass="p">;</span><spanclass="c">/* color for inline code text */</span>
<spanclass="nv">--CODE-INLINE-BG-color</span><spanclass="p">:</span><spanclass="mh">#fffae9</span><spanclass="p">;</span><spanclass="c">/* color for inline code background */</span>
<spanclass="nv">--CODE-INLINE-BORDER-color</span><spanclass="p">:</span><spanclass="mh">#f8e8c8</span><spanclass="p">;</span><spanclass="c">/* color of inline code border */</span>
<spanclass="nv">--MENU-HOME-LINK-color</span><spanclass="p">:</span><spanclass="mh">#323232</span><spanclass="p">;</span><spanclass="c">/* Color of the home button text */</span>
<spanclass="nv">--MENU-HOME-LINK-HOVER-color</span><spanclass="p">:</span><spanclass="mh">#808080</span><spanclass="p">;</span><spanclass="c">/* Color of the hovered home button text */</span>
<spanclass="nv">--MENU-HEADER-BG-color</span><spanclass="p">:</span><spanclass="mh">#7dc903</span><spanclass="p">;</span><spanclass="c">/* Background color of menu header */</span>
<spanclass="nv">--MENU-HEADER-BORDER-color</span><spanclass="p">:</span><spanclass="mh">#7dc903</span><spanclass="p">;</span><spanclass="c">/*Color of menu header border */</span>
<spanclass="nv">--MENU-SEARCH-color</span><spanclass="p">:</span><spanclass="mh">#efefef</span><spanclass="p">;</span><spanclass="c">/* Color of search field text */</span>
<spanclass="nv">--MENU-SEARCH-BG-color</span><spanclass="p">:</span><spanclass="mh">#3d414d</span><spanclass="p">;</span><spanclass="c">/* Search field background color (by default borders + icons) */</span>
<spanclass="nv">--MENU-SEARCH-BOX-color</span><spanclass="p">:</span><spanclass="mh">#efefef</span><spanclass="p">;</span><spanclass="c">/* Override search field border color */</span>
<spanclass="nv">--MENU-SECTIONS-ACTIVE-BG-color</span><spanclass="p">:</span><spanclass="mh">#202028</span><spanclass="p">;</span><spanclass="c">/* Background color of the active section and its children */</span>
<spanclass="nv">--MENU-SECTIONS-BG-color</span><spanclass="p">:</span><spanclass="mh">#282830</span><spanclass="p">;</span><spanclass="c">/* Background color of other sections */</span>
<spanclass="nv">--MENU-SECTIONS-LINK-color</span><spanclass="p">:</span><spanclass="mh">#bababa</span><spanclass="p">;</span><spanclass="c">/* Color of links in menu */</span>
<spanclass="nv">--MENU-SECTIONS-LINK-HOVER-color</span><spanclass="p">:</span><spanclass="mh">#ffffff</span><spanclass="p">;</span><spanclass="c">/* Color of links in menu, when hovered */</span>
<spanclass="nv">--MENU-SECTION-ACTIVE-CATEGORY-color</span><spanclass="p">:</span><spanclass="mh">#444444</span><spanclass="p">;</span><spanclass="c">/* Color of active category text */</span>
<spanclass="nv">--MENU-SECTION-ACTIVE-CATEGORY-BG-color</span><spanclass="p">:</span><spanclass="mh">#ffffff</span><spanclass="p">;</span><spanclass="c">/* Color of background for the active category (only) */</span>
<spanclass="nv">--MENU-VISITED-color</span><spanclass="p">:</span><spanclass="mh">#506397</span><spanclass="p">;</span><spanclass="c">/* Color of 'page visited' icons in menu */</span>
<spanclass="nv">--MENU-SECTION-HR-color</span><spanclass="p">:</span><spanclass="mh">#282830</span><spanclass="p">;</span><spanclass="c">/* Color of <hr> separator in menu */</span>
<spanclass="c"># Change default color scheme with a variant one. Can be "red", "blue", "green" or an array like [ "blue", "green" ].</span>
<p>You can also set multiple variants. In this case, the first variant is the default choosen on first view and a theme selector will be shown in the menu footer.</p>
<spanclass="c"># Change default color scheme with a variant one. Can be empty, "red", "blue", "green" or an array like [ "blue", "green" ].</span>
