<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.pir.mdtarget=blank>
<iclass="fas fa-code-branch"></i>
<spanid=top-github-link-text>Edit this page</span>
<p>Th' Relearrrn theme has been built t' be as configur'ble as poss'ble by defin'n multiple <ahref=https://gohugo.io/templates/partials/>partials</a></p>
<p>In <code>themes/hugo-theme-relearn/layouts/partials/</code>, ye will find all th' partials defined fer this theme. If ye need t' overwrite someth'n, don’t change th' code directly. Instead <ahref=https://gohugo.io/themes/customizing/>follow this plank</a>. You’d create a new partial 'n th' <code>layouts/partials</code> folder o' yer local project. This partial will have th' priority.</p>
<p>This theme defines th' follow'n partials :</p>
<ul>
<li><em>rambl'n</em>: th' rambl'n plank itself. This can be overridden if ye wan’t t' display page’s meta data above or below th' rambl'n.</li>
<li><em>header</em>: th' header o' th' rambl'n plank (contains th' breadcrumbs). <em>Not meant t' be overwritten</em></li>
<li><em>custom-header</em>: custom headers 'n plank. Meant t' be overwritten when add'n CSS imports. Don’t forget t' include <code>style</code> HTML tag directive 'n yer file</li>
<li><em>footer</em>: th' footer o' th' rambl'n plank (contains th' arrows). <em>Not meant t' be overwritten</em></li>
<li><em>custom-footer</em>: custom footer 'n plank. Meant t' be overwritten when add'n Javacript. Don’t forget t' include <code>javascript</code> HTML tag directive 'n yer file</li>
<li><em>favicon</em>: th' favicon</li>
<li><em>logo</em>: th' logo, on top left hand corner.</li>
<li><em>meta</em>: HTML meta tags, if ye want t' change default behavior</li>
<li><em>menu</em>: left menu. <em>Not meant t' be overwritten</em></li>
<li><em>menu-pre</em>: side-wide configurat'n t' prepend t' menu items. If ye override this, it be yer responsiblity t' take th' page’s <code>pre</code> sett'n into account.</li>
<li><em>menu-post</em>: side-wide configurat'n t' append t' menu items. If ye override this, it be yer responsiblity t' take th' page’s <code>post</code> sett'n into account.</li>
<li><em>menu-footer</em>: footer o' th' the left menu</li>
<li><em>search</em>: search box</li>
<li><em>toc</em>: t'ble o' contents</li>
</ul>
<h2id=change-the-logo>Change th' logo</h2>
<p>Create a new file 'n <code>layouts/partials/</code> named <code>logo.html</code>. Then write any HTML ye want.
Ye could use an <code>img</code> HTML tag an' reference an image created under th' <em>static</em> folder, or ye could paste a SVG definit'n!</p>
<divclass="notices note">
<divclass=label>Avast</div><p>Th' size o' th' logo will adapt automatically</p>
</div>
<h2id=change-the-favicon>Change th' favicon</h2>
<p>If yer favicon be a png, just drop off yer image 'n yer local <code>static/images/</code> folder an' name it <code>favicon.png</code></p>
<p>If ye need t' change this default behavior, create a new file 'n <code>layouts/partials/</code> named <code>favicon.html</code>. Then write someth'n like this:</p>
<p>First, create a new CSS file 'n yer local <code>static/css</code> folder prefixed by <code>theme</code> (e.g. wit' <em>mine</em> theme <code>static/css/theme-mine.css</code>). Copy th' follow'n rambl'n an' modify colors 'n CSS variables.</p>
<spanstyle=color:#ff5c57>--MAIN-TEXT-color</span>: <spanstyle=color:#ff9f43>#323232</span>; <spanstyle=color:#78787e>/* Color o' text by default */</span>
<spanstyle=color:#ff5c57>--MAIN-TITLES-TEXT-color</span>: <spanstyle=color:#ff9f43>#5e5e5e</span>; <spanstyle=color:#78787e>/* Color o' titles h2-h3-h4-h5-h6 */</span>
<spanstyle=color:#ff5c57>--MAIN-LINK-color</span>: <spanstyle=color:#ff9f43>#1C90F3</span>; <spanstyle=color:#78787e>/* Color o' links */</span>
<spanstyle=color:#ff5c57>--MAIN-LINK-HOVER-color</span>: <spanstyle=color:#ff9f43>#167ad0</span>; <spanstyle=color:#78787e>/* Color o' hovered links */</span>
<spanstyle=color:#ff5c57>--MAIN-ANCHOR-color</span>: <spanstyle=color:#ff9f43>#1C90F3</span>; <spanstyle=color:#78787e>/* color o' anchors on titles */</span>
<spanstyle=color:#ff5c57>--MAIN-CODE-color</span>: <spanstyle=color:#ff9f43>#e2e4e5</span>; <spanstyle=color:#78787e>/* fallback color fer code background */</span>
<spanstyle=color:#ff5c57>--MAIN-CODE-BG-color</span>: <spanstyle=color:#ff9f43>#282a36</span>; <spanstyle=color:#78787e>/* fallback color fer code text */</span>
<spanstyle=color:#ff5c57>--MENU-HOME-LINK-color</span>: <spanstyle=color:#ff9f43>#323232</span>; <spanstyle=color:#78787e>/* Color o' th' home button text */</span>
<spanstyle=color:#ff5c57>--MENU-HOME-LINK-HOVER-color</span>: <spanstyle=color:#ff9f43>#5e5e5e</span>; <spanstyle=color:#78787e>/* Color o' th' hovered home button text */</span>
<spanstyle=color:#ff5c57>--MENU-HEADER-BG-color</span>: <spanstyle=color:#ff9f43>#1C90F3</span>; <spanstyle=color:#78787e>/* Background color o' menu header */</span>
<spanstyle=color:#ff5c57>--MENU-HEADER-BORDER-color</span>: <spanstyle=color:#ff9f43>#33a1ff</span>; <spanstyle=color:#78787e>/*Color o' 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 ay'cons color */</span>
<spanstyle=color:#ff5c57>--MENU-SECTIONS-ACTIVE-BG-color</span>: <spanstyle=color:#ff9f43>#20272b</span>; <spanstyle=color:#78787e>/* Background color o' th' active section an' its children */</span>
<spanstyle=color:#ff5c57>--MENU-SECTIONS-BG-color</span>: <spanstyle=color:#ff9f43>#252c31</span>; <spanstyle=color:#78787e>/* Background color o' other sections */</span>
<spanstyle=color:#ff5c57>--MENU-SECTIONS-LINK-color</span>: <spanstyle=color:#ff9f43>#ccc</span>; <spanstyle=color:#78787e>/* Color o' links 'n menu */</span>
<spanstyle=color:#ff5c57>--MENU-SECTIONS-LINK-HOVER-color</span>: <spanstyle=color:#ff9f43>#e6e6e6</span>; <spanstyle=color:#78787e>/* Color o' links 'n menu, when hovered */</span>
<spanstyle=color:#ff5c57>--MENU-SECTION-ACTIVE-CATEGORY-color</span>: <spanstyle=color:#ff9f43>#777</span>; <spanstyle=color:#78787e>/* Color o' active category text */</span>
<spanstyle=color:#ff5c57>--MENU-SECTION-ACTIVE-CATEGORY-BG-color</span>: <spanstyle=color:#ff9f43>#fff</span>; <spanstyle=color:#78787e>/* Color o' background fer th' active category (only) */</span>
<spanstyle=color:#ff5c57>--MENU-VISITED-color</span>: <spanstyle=color:#ff9f43>#33a1ff</span>; <spanstyle=color:#78787e>/* Color o' 'page visited' ay'cons 'n menu */</span>
<spanstyle=color:#ff5c57>--MENU-SECTION-HR-color</span>: <spanstyle=color:#ff9f43>#20272b</span>; <spanstyle=color:#78787e>/* Color o' <hr> separator 'n menu */</span>
}
</code></pre></div><p>Then, set th' <code>themeVariant</code> value wit' th' name o' yer custom theme file. That’s it!</p>
