hugo-theme-relearn/pir/basics/customization/index.html
2022-02-18 23:53:41 +00:00

440 lines
48 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="pir" class="js csstransforms3d">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Hugo 0.92.2" />
<meta name="generator" content="Relearn 2.9.6">
<meta name="description" content="Documentation for Hugo Relearn Theme">
<meta name="author" content="Sören Weber">
<title>Customizat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
<link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/customization/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
<link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645228418" type="image/svg+xml">
<link href="/hugo-theme-relearn/css/nucleus.css?1645228418" rel="stylesheet">
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645228418" rel="stylesheet">
<link href="/hugo-theme-relearn/css/featherlight.min.css?1645228418" rel="stylesheet">
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645228418" rel="stylesheet">
<link href="/hugo-theme-relearn/css/auto-complete.css?1645228418" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme.css?1645228418" rel="stylesheet">
<link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645228418" rel="stylesheet">
<link href="/hugo-theme-relearn/css/variant.css?1645228418" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645228418" rel="stylesheet" media="print">
<link href="/hugo-theme-relearn/css/print.css?1645228418" rel="stylesheet" media="print">
<style>
</style>
<script>
// we need to define this script in the head to avoid flickering
// on page load if the user has selected a non default variant
var theme = window.localStorage.getItem( 'theme' );
changeTheme( theme );
function parseTheme( s ){
if( !s || !s.match ){
return '';
}
var matches = s.match(/^.*\/theme-(.*?)\.css.*$/);
var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
return theme;
}
function getTheme(){
var link = document.querySelector( '#variant-style' );
if( !link ){
return;
}
var path = link.getAttribute( 'href' );
var theme = parseTheme( path );
return theme;
}
function markTheme( theme ){
var select = document.querySelector( '#select-theme' );
if( !select ){
return;
}
select.value = theme;
}
function changeTheme( theme ){
var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
if( themes.indexOf( theme ) < 0 ){
theme = themes.length ? themes[ 0 ] : null;
}
if( !theme ){
return;
}
var link = document.querySelector( '#variant-style' );
if( !link ){
return;
}
var old_path = link.getAttribute( 'href' );
var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
if( old_path != new_path ){
window.localStorage.setItem( 'theme', theme );
link.setAttribute( 'href', new_path );
markTheme( theme );
// remove selection, because if some uses an arrow navigation
// by pressing the left or right cursor key, we will automatically
// select a different style
if( document.activeElement ){
document.activeElement.blur();
}
}
}
</script>
<script src="/hugo-theme-relearn/js/jquery.min.js?1645228418"></script>
</head>
<body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/customization/">
<!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
<!-- https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72 -->
<script>
var index_url="/hugo-theme-relearn/pir/index.json";
var root_url="/";
var baseUri=root_url.replace(/\/$/, '');
</script>
<nav id="sidebar" class="default-animation showVisitedLinks">
<div id="header-wrapper" class="default-animation">
<div id="header" class="default-animation">
<a id="logo"
href="/hugo-theme-relearn/pir/"
style="
color: #383838;
font-family: 'Work Sans', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif;
font-size: 30px;
font-weight: 300;
margin-top: -2px;
text-transform: uppercase;
">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.044 64.044"
style="
height: 65px;
margin-bottom: -20px;
margin-top: -20px;
width: 65px;
">
<path d="M46.103 136.34c-.642-.394-1.222-2.242-1.98-2.358-.76-.117-1.353.506-1.618 1.519-.266 1.012-.446 4.188.173 5.538.213.435.482.787 1.03.845.547.057.967-.504 1.45-1.027.482-.523.437-.9 1.142-.612.705.289 1.051.4 1.586 1.229.535.828 1.085 4.043.868 5.598-.241 1.458-.531 2.8-.59 4.088.26.075.517.148.772.217 2.68.724 5.373 1.037 7.873.02.001-.028.01-.105.008-.11-.048-.165-.18-.41-.36-.698-.18-.29-.414-.645-.586-1.114a3.212 3.212 0 0 1-.125-1.735c.056-.21.153-.342.249-.475 1.237-1.193 2.932-1.373 4.244-1.384.557-.004 1.389.016 2.198.255.809.239 1.706.724 2.068 1.843.187.578.114 1.17-.043 1.623-.153.438-.369.783-.545 1.091-.178.31-.329.6-.401.821-.007.02-.003.071-.005.094 2.256 1.008 4.716.91 7.189.398.55-.114 1.11-.247 1.673-.377.344-1.085.678-2.145.852-3.208.124-.752.158-2.311-.078-3.538-.118-.613-.306-1.15-.52-1.489-.221-.349-.413-.501-.747-.538-.243-.027-.51.013-.796.098-.67.223-1.33.606-1.966.76l-.008.002-.109.032c-.556.152-1.233.158-1.797-.36-.556-.51-.89-1.367-1.117-2.596-.283-1.528-.075-3.279.89-4.518l.071-.09h.07c.65-.71 1.485-.802 2.16-.599.706.213 1.333.629 1.772.84.736.354 1.185.319 1.475.171.291-.148.5-.439.668-.955.332-1.017.301-2.819.022-4.106-.148-.684-.13-1.292-.13-1.883-1.558-.463-3.067-.982-4.574-1.208-1.128-.169-2.263-.173-3.298.164-.13.046-.256.095-.38.15-.373.164-.633.342-.805.52-.077.098-.081.105-.087.21-.004.068.031.289.13.571.1.282.256.634.467 1.03.279.524.448 1.063.431 1.618a2.12 2.12 0 0 1-.499 1.309 1.757 1.757 0 0 1-.62.51h-.002c-.515.291-1.107.404-1.723.464-.86.083-1.787.026-2.598-.097-.806-.123-1.47-.28-1.948-.555-.444-.256-.79-.547-1.037-.925a2.273 2.273 0 0 1-.356-1.301c.029-.837.403-1.437.625-1.897.111-.23.191-.433.236-.583.045-.15.044-.25.046-.24-.005-.029-.127-.355-1.015-.741-1.138-.495-2.322-.673-3.533-.668h-.015a9.711 9.711 0 0 0-.521.016h-.002c-1.163.057-2.35.308-3.541.569.383 1.531.79 2.753.818 4.502-.096 1.297.158 2.114-1.03 2.935-.85.588-1.508.729-2.15.335" style="fill:#383838;fill-opacity:1;stroke:none;stroke-width:1.03763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
<path d="M61.472 101.34v.002c-.3-.003-.603.01-.894.04-.544.055-1.39.165-1.778.306-1.238.364.13 2.344.41 2.913.28.569.285 2.03.14 2.134-.144.103-.375.261-.934.345-.56.084.03-.037-1.589.086-1.62.122-5.506.29-8.265.248-.022.26-.036.521-.097.808-.309 1.442-.63 3.163-.494 4.074.071.473.168.65.414.8.23.14.737.235 1.62-.004.834-.227 1.3-.442 1.887-.456.595-.016 1.555.472 1.965.717.411.245-.03-.008.002 0s.128.05.176.102c.049.053-.276-.523.104.199.379.721.72 3.256.002 4.68-.46.913-1.01 1.49-1.64 1.711-.63.22-1.229.067-1.734-.135-.881-.353-1.584-.7-2.205-.647-1.199 1.94-1.186 4.17-.6 6.602.097.397.212.814.327 1.23 2.68-.556 5.542-1.016 8.337.132 1.064.437 1.73 1.015 1.902 1.857.169.831-.193 1.508-.438 1.986-.122.238-.23.46-.307.642-.07.164-.096.28-.104.324.069.429.309.723.686.945.385.227.89.355 1.35.423.723.104 1.567.152 2.287.086.693-.064 1.032-.338 1.241-.544a2.447 2.447 0 0 0 .303-.437.175.175 0 0 0 .013-.035c-.004-.066-.037-.246-.195-.527-.46-.816-.87-1.595-.817-2.51.028-.476.218-.938.529-1.288.304-.343.698-.586 1.186-.79 1.442-.606 2.96-.609 4.372-.409 1.525.216 2.963.679 4.378 1.083.226-2.09.784-3.9.592-5.77-.058-.565-.287-1.333-.598-1.827-.32-.508-.59-.717-1.036-.642-.648.11-1.472.935-2.707 1.078-.791.092-1.494-.267-1.95-.86-.45-.583-.678-1.335-.78-2.101-.202-1.525.031-3.229.89-4.27.615-.747 1.45-.887 2.15-.74.687.145 1.307.492 1.857.745v-.002c.546.252 1.033.388 1.281.344a.547.547 0 0 0 .353-.188c.113-.124.242-.35.384-.75.604-1.712.206-3.68-.303-5.654-.667.145-1.336.293-2.018.413-1.341.236-2.73.392-4.136.273-.656-.055-1.695-.085-2.58-.476-.442-.195-.903-.514-1.157-1.093-.259-.591-.205-1.313.08-2.014.223-.64 1.082-2.178.692-2.585-.391-.407-1.651-.56-2.554-.571z" style="fill:#383838;fill-opacity:1;stroke:none;stroke-width:.992837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
<path d="M83.128 98.116c-.484 1.875-1.057 3.757-2.486 5.033-.638.57-1.13.666-1.483.548-.401-.134-.715-.506-1.058-.973-.338-.461-.655-.97-1.076-1.332-.192-.165-.404-.315-.683-.38-.279-.066-.599-.02-.9.102-.489.196-.89.58-1.28 1.047a6.1 6.1 0 0 0-.985 1.632c-.234.591-.356 1.174-.277 1.713.072.487.392.977.905 1.185.463.187.926.156 1.36.154.433 0 .843.01 1.242.147.55.189.79.736.822 1.368.034.66-.145 1.412-.393 1.988l-.008.021c-.74 1.705-1.946 2.893-3.004 4.349l-.664.915.979.099c.924.092 1.788.26 2.468.675.46.281 1.806 1.205 2.794 2.222.497.513.888 1.031 1.047 1.502.078.231.095.422.05.6a.93.93 0 0 1-.345.474c-.301.223-.606.395-.864.532l-.354.186c-.107.058-.189.087-.345.228a.637.637 0 0 1 .062-.045l-.064.041-.209.236-.103.343s.003.126.007.152c.003.017.003.007.004.015v.002c.016.195.061.307.133.476a4.1 4.1 0 0 0 .32.596 5.7 5.7 0 0 0 2.8 2.258c.284.108.908.321 1.548.36.33.02.59.015.912-.13h.002c.08-.037.228-.095.382-.281.153-.186.19-.355.212-.445l.019-.075.003-.078c.023-.585-.037-1.296.072-1.899.153-.657.435-.956 1.009-.909 2.771.239 4.74 1.955 6.693 3.83l.742.714.279-1.155c.55-2.29 1.093-4.464 2.928-5.977.692-.57 1.184-.642 1.527-.509.39.151.676.536.996.995.319.458.605.926 1.07 1.212.194.119.464.232.784.209.32-.024.638-.163.988-.384 1.022-.645 1.778-1.756 2.086-2.942.136-.522.102-.991-.046-1.301-.158-.334-.433-.553-.754-.707-.653-.314-1.468-.373-2.094-.486-.825-.15-1.22-.475-1.345-.878-.13-.417 0-.953.335-1.61.6-1.173 1.887-2.602 3.13-3.911l.498-.526-.449-.432c-1.545-1.49-3.163-3.01-5.252-3.715h-.002c-.473-.16-1.097-.413-1.73-.424h-.003c-.311-.004-.596.04-.883.24v.002c-.22.155-.483.537-.583.937l-.008.036-.006.038c-.116.773-.06 1.467-.217 1.995-.063.212-.198.418-.359.507-.202.111-.492.153-.976.072-.582-.097-1.978-.69-3.021-1.503-.523-.407-.934-.85-1.117-1.3a1.153 1.153 0 0 1-.083-.63c.03-.184.1-.477.308-.593.21-.116.941-.32 1.377-.642h.002c.192-.141.403-.367.518-.64.114-.275.127-.526.123-.774-.006-.142-.036-.192-.08-.3a8.417 8.417 0 0 0-3-3.027c-1.226-.725-2.585-1.135-3.927-1.539-.434-.12-.844-.111-1.02.466zm.912.947c1.186.364 2.357.718 3.345 1.303 1.035.612 1.864 1.488 2.507 2.528-.514.263-1.095.5-1.44.79-.345.29-.729.914-.815 1.434-.084.509 0 .968.155 1.347.301.74.85 1.276 1.44 1.735 1.18.92 2.554 1.545 3.47 1.698.604.1 1.186.088 1.739-.216.594-.327.935-.911 1.088-1.427.264-.884.193-1.664.262-2.17h.1c.3.006.926.206 1.417.371 1.646.554 3.044 1.773 4.431 3.089-1.102 1.174-2.222 2.423-2.888 3.73-.42.823-.73 1.789-.453 2.687.283.913 1.1 1.415 2.138 1.603.691.126 1.472.226 1.84.403.19.091.258.182.278.223.03.064.058.075-.023.387-.21.804-.761 1.598-1.413 2.01-.247.155-.365.183-.407.187-.042.003-.061.002-.172-.066-.144-.088-.455-.473-.772-.929-.317-.454-.714-1.07-1.452-1.356-.783-.304-1.776-.022-2.713.75-1.942 1.6-2.626 3.764-3.146 5.8-1.802-1.676-3.772-3.138-6.589-3.517h-.002c-.346-.095-1.013-.031-1.293.143-.735.501-1.005 1.132-1.168 2.007-.125.69-.082 1.216-.074 1.659-.055.006-.046.01-.104.006-.42-.026-1.035-.215-1.244-.295-.947-.361-1.774-1.006-2.314-1.857-.054-.085-.072-.132-.109-.2l.027-.016c.284-.15.656-.36 1.045-.648.44-.327.789-.798.93-1.35a2.4 2.4 0 0 0-.068-1.379c-.254-.751-.753-1.353-1.295-1.911-1.09-1.124-2.452-2.049-2.99-2.378-.609-.372-1.303-.44-1.981-.56.875-1.094 1.878-2.251 2.596-3.921.294-.823.543-1.907.513-2.658-.049-.97-.489-2.013-1.52-2.367-.579-.2-1.131-.204-1.58-.203-.45.002-.786-.006-.97-.08h-.002c-.264-.107-.236-.108-.268-.33-.025-.17.021-.553.183-.962a4.67 4.67 0 0 1 .725-1.192c.29-.348.617-.59.705-.626.142-.057.176-.05.22-.04.045.011.127.052.263.17.235.201.56.671.92 1.161.354.484.791 1.08 1.543 1.33.8.267 1.784-.052 2.671-.846 1.594-1.424 2.235-3.317 2.714-5.051zm11.705 7.023c-.02.014.042-.002.042 0l-.008.035c.05-.2-.028-.04-.034-.035zM79.472 122.45a.198.198 0 0 1 .005.023v.014c-.002-.01-.003-.03-.005-.037zm-.29.732-.006.01-.044.027c.016-.01.033-.024.05-.036z" style="color:#000;fill:#383838;stroke-width:1.02352;-inkscape-stroke:none" transform="translate(-40.698 -95.175)"/>
<path d="M76.694 128.845c-.85-.012-1.668.253-2.434.67-.01.592-.015 1.17.109 1.772.323 1.573.422 3.553-.07 5.147-.247.804-.684 1.535-1.347 1.891-.663.356-1.467.296-2.362-.159-.522-.266-1.059-.62-1.487-.757-.223-.072-.392-.096-.522-.069-.13.027-.232.094-.362.27-.53.719-.681 1.823-.497 2.876.177 1.012.418 1.438.543 1.56.143.137.26.154.604.055.548-.158 1.523-.857 2.573-.972l.02-.002.5.058c.686.081 1.247.562 1.622 1.19.372.62.591 1.37.73 2.136.279 1.532.25 3.16.083 4.232-.14.91-.394 1.72-.632 2.53 1.719-.385 3.485-.692 5.307-.36 1.174.214 2.749.574 3.762 1.977l.088.122.046.159c.162.551.16 1.114.024 1.578-.13.45-.348.772-.533 1.023-.181.246-.336.444-.437.606-.102.16-.141.275-.145.336-.01.17 0 .197.07.315.057.1.186.242.39.366.408.246 1.106.414 1.843.45a7.842 7.842 0 0 0 2.174-.21 4.28 4.28 0 0 0 .822-.296c.218-.106.385-.242.377-.233l.029-.031c.025-.035.05-.072.05-.068 0-.004 0-.017-.003-.05a2.733 2.733 0 0 0-.21-.579c-.26-.548-.839-1.333-.822-2.46.01-.657.27-1.21.598-1.576.32-.357.696-.575 1.074-.736.759-.323 1.57-.418 2.054-.458 1.653-.136 3.252.296 4.755.765.457.142.905.29 1.352.434.325-2.258.902-4.247.598-6.217-.071-.46-.25-1.169-.486-1.684-.238-.518-.495-.762-.675-.779-.351-.032-.716.14-1.174.418-.457.277-1.005.665-1.695.742-.745.082-1.406-.291-1.84-.908-.428-.608-.653-1.394-.754-2.196-.203-1.596.016-3.377.794-4.493.568-.813 1.358-.984 2.024-.835.65.146 1.243.51 1.769.779.524.267.99.413 1.237.365a.527.527 0 0 0 .346-.2c.11-.132.235-.373.37-.798.612-1.918.27-3.894-.246-6.054-2.815-.851-5.49-1.534-8.089-.267a.727.727 0 0 0-.223.148c-.024.028-.018.021-.026.056.001-.003-.01.178.07.44.162.522.611 1.29.911 1.978l.004.009.029.063.024.084V133c.162.635.016 1.297-.274 1.727-.272.404-.618.636-.952.81-.675.353-1.399.484-1.724.533a5.888 5.888 0 0 1-3.973-.795c-.512-.311-.876-.594-1.133-1.02-.282-.466-.318-1.084-.172-1.557.252-.814.715-1.266.971-1.89a.663.663 0 0 0 .047-.14c.001-.013 0-.006-.007-.037a.761.761 0 0 0-.184-.268c-.264-.267-.865-.595-1.54-.826-1.356-.462-3.07-.659-3.583-.686-.062-.002-.121-.006-.178-.006z" style="fill:#383838;fill-opacity:1;stroke:none;stroke-width:.991342;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
</svg>
Relearn
</a>
</div>
<div class="searchbox default-animation">
<label for="search-by"><i class="fas fa-search"></i></label>
<input data-search-input id="search-by" type="search" placeholder="Searrrch...">
<span data-search-clear=""><i class="fas fa-times"></i></span>
</div>
<script src="/hugo-theme-relearn/js/lunr.min.js?1645228418"></script>
<script src="/hugo-theme-relearn/js/auto-complete.js?1645228418"></script>
<script src="/hugo-theme-relearn/js/search.js?1645228418"></script>
</div>
<div id="content-wrapper" class="highlightable">
<ul class="topics">
<li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/installation/" title="Installat&#39;n" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/installation/">Installat&#39;n<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/migration/" title="Migrrrat&#39;n" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/migration/">Migrrrat&#39;n<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/configuration/" title="Configurrrat&#39;n" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/configuration/">Configurrrat&#39;n<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/customization/" title="Customizat&#39;n" class="dd-item active parent alwaysopen"><a href="/hugo-theme-relearn/pir/basics/customization/">Customizat&#39;n<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/basics/history/" title="Historrry" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/history/">Historrry<i class="fas fa-check read-icon"></i></a><ul></ul></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/" title="Rambl&#39;n" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/"><b>2.</b> Rambl&#39;n<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/pir/cont/pages/" title="Planks orrrganizat&#39;n" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/cont/pages/">Planks orrrganizat&#39;n<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/archetypes/" title="Arrrchetypes" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/archetypes/">Arrrchetypes<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/markdown/" title="Marrrkdown rules" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/markdown/">Marrrkdown rules<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/syntaxhighlight/" title="Code highlight&#39;n" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/syntaxhighlight/">Code highlight&#39;n<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/menushortcuts/" title="Menu extrrra shorrrtcuts" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/menushortcuts/">Menu extrrra shorrrtcuts<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/icons/" title="Ay&#39;cons an&#39; logos" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/icons/">Ay&#39;cons an&#39; logos<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/i18n/" title="Multilingual an&#39; i18n" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/cont/i18n/">Multilingual an&#39; i18n<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/cont/tags/" title="Tags" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/tags/">Tags<i class="fas fa-check read-icon"></i></a></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/" title="Shorrrtcodes" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/"><b>3.</b> Shorrrtcodes<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/attachments/" title="Attachments" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/attachments/">Attachments<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/button/" title="Button" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/button/">Button<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/" title="Children" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/">Children<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/test/" title="Plank X" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/test/">Plank X<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/" title="Plank 1" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/">Plank 1<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/" title="Plank 1-1" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/">Plank 1-1<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/" title="Plank 1-1-2" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/">Plank 1-1-2<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/" title="Plank 1-1-2-1" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/">Plank 1-1-2-1<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/" title="Plank 1-1-2-2" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/">Plank 1-1-2-2<i class="fas fa-check read-icon"></i></a><ul></ul></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/" title="Plank 1-1-3" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/">Plank 1-1-3<i class="fas fa-check read-icon"></i></a><ul></ul></li></ul></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-2/" title="Plank 2" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/">Plank 2<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-3/" title="Plank 3" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/">Plank 3<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/" title="Plank 3-1" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/">Plank 3-1<i class="fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/expand/" title="Expand" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/expand/">Expand<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/include/" title="Include" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/include/">Include<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/mermaid/" title="Merrrmaid" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/mermaid/">Merrrmaid<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/notice/" title="Notice" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/notice/">Notice<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/siteparam/" title="Ship param" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/siteparam/">Ship param<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/tabs/" title="Tabbed views" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/tabs/">Tabbed views<i class="fas fa-check read-icon"></i></a></li></ul></li>
</ul>
<div id="shortcuts">
<div class="nav-title">Morrre</div>
<ul>
<li><a class="padding" href="https://github.com/McShelby/hugo-theme-relearn"><i class='fab fa-fw fa-github'></i> GitHub repo</a></li>
<li><a class="padding" href="/hugo-theme-relearn/pir/more/showcase/"><i class='fas fa-fw fa-camera'></i> Showcases</a></li>
<li><a class="padding" href="https://gohugo.io/"><i class='fas fa-fw fa-bookmark'></i> Cap'n Hugo Documentat'n</a></li>
<li><a class="padding" href="/hugo-theme-relearn/pir/more/credits/"><i class='fas fa-fw fa-bullhorn'></i> Crrredits</a></li>
<li><a class="padding" href="/hugo-theme-relearn/pir/tags/"><i class='fas fa-fw fa-tags'></i> Arrr! Tags</a></li>
</ul>
</div>
<div class="footermargin"></div>
<hr class="default-animation"/>
<div id="prefooter">
<ul>
<li>
<a class="padding select-container">
<i class="fas fa-language fa-fw"></i>
<span>&nbsp;</span>
<div class="select-style">
<select id="select-language" onchange="location = baseUri + this.value;">
<option id="pir" value="/hugo-theme-relearn/pir/basics/customization/" selected>Arrr! Pirrrates</option>
<option id="en" value="/hugo-theme-relearn/basics/customization/">English</option>
</select>
</div>
<div class="select-clear"></div>
</a>
</li>
<li>
<a class="padding select-container">
<i class="fas fa-paint-brush fa-fw"></i>
<span>&nbsp;</span>
<div class="select-style">
<select id="select-theme" onchange="changeTheme( this.value );">
<option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
<option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
<option id="learn" value="learn">Learn</option>
<option id="neon" value="neon">Neon</option>
<option id="blue" value="blue">Blue</option>
<option id="green" value="green">Green</option>
<option id="red" value="red">Red</option>
</select>
</div>
<div class="select-clear"></div>
</a>
<script>markTheme( getTheme() );</script>
</li>
<li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
</ul>
</div>
<div id="footer">
<style>
#footer {
font-size: 13px;
height: 100px;
margin-left: auto;
margin-right: auto;
padding: 2rem 1rem;
text-align: center;
min-width: 230px;
max-width: 300px;
}
#footer p {
margin: 0;
}
</style>
<a class="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>
<a class="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>
<a class="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 <a href="https://github.com/McShelby/hugo-theme-relearn"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</div>
</div>
</nav>
<div id="body" class="default-animation">
<div id="overlay"></div>
<div class="padding highlightable">
<div id="top-bar"><div>
<div class="navigation">
<a class="nav nav-next" href="/hugo-theme-relearn/pir/basics/history/" title="Historrry"><i class="fas fa-chevron-right fa-fw"></i></a>
</div>
<div class="navigation">
<a class="nav nav-prev" href="/hugo-theme-relearn/pir/basics/configuration/" title="Configurrrat&#39;n"><i class="fas fa-chevron-left fa-fw"></i></a>
</div>
<div id="top-github-link">
<a class="github-link" title='Edit' href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/contentbasics/customization/_index.pir.md" target="blank">
<i class="fas fa-pencil fa-fw"></i>
</a>
</div>
<div id="breadcrumbs">
<span id="sidebar-toggle-span">
<a href="#" id="sidebar-toggle" title='Menu' data-sidebar-toggle="">
<i class="fas fa-bars fa-fw"></i>
</a>
</span>
<ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
<meta itemprop="itemListOrder" content="Descending" />
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><meta itemprop="position" content="3" /><a itemprop="item" href="/hugo-theme-relearn/pir/"><span itemprop="name">Relearrrn Theme fer Cap&#39;n Hugo</span></a> > </li>
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><meta itemprop="position" content="2" /><a itemprop="item" href="/hugo-theme-relearn/pir/basics/"><span itemprop="name">Basics</span></a> > </li>
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><meta itemprop="position" content="1" /><a itemprop="item" href="/hugo-theme-relearn/pir/basics/customization/" aria-disabled="true"><span itemprop="name">Customizat&#39;n</span></a></li>
</ol>
</div>
</div></div>
<main id="body-inner">
<div id="head-tags">
</div>
<h1>Customizat&#39;n</h1>
<div class="box notices warning">
<div class="box-label">Arrr</div>
<div class="box-content">
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings and stuff.</p>
</div>
</div>
<p>Th' Relearrrn theme has been built t' be as configur'ble as poss'ble by defin'n multiple <a href="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&rsquo;t change th' code directly. Instead <a href="https://gohugo.io/themes/customizing/">follow this plank</a>. You&rsquo;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><code>rrrambl'n.html</code>: th' rrrambl'n plank itself. This can be overridden if ye wan&rsquo;t t' display page&rsquo;s meta data above or below th' rrrambl'n.</li>
<li><code>header.html</code>: th' header o' th' rrrambl'n plank (contains th' breadcrumbs). <em>Not meant t' be overwritten</em></li>
<li><code>custom-header.html</code>: custom headers 'n plank. Meant t' be overwritten when add'n CSS imports. Don&rsquo;t forget t' include <code>style</code> HTML tag directive 'n yer file</li>
<li><code>footer.html</code>: th' footer o' th' rrrambl'n plank (contains th' arrows). <em>Not meant t' be overwritten</em></li>
<li><code>custom-footer.html</code>: custom footer 'n plank. Meant t' be overwritten when add'n Javacript. Don&rsquo;t forget t' include <code>javascript</code> HTML tag directive 'n yer file</li>
<li><code>favicon.html</code>: th' favicon</li>
<li><code>logo.html</code>: th' logo, on top left hand corner</li>
<li><code>meta.html</code>: HTML meta tags, if ye want t' change default behavior</li>
<li><code>menu.html</code>: left menu. <em>Not meant t' be overwritten</em></li>
<li><code>menu-pre.html</code>: side-wide configurat'n t' prepend t' menu items. If ye override this, it be yer responsiblity t' take th' page&rsquo;s <code>pre</code> sett'n into account.</li>
<li><code>menu-post.html</code>: side-wide configurat'n t' append t' menu items. If ye override this, it be yer responsiblity t' take th' page&rsquo;s <code>post</code> sett'n into account.</li>
<li><code>menu-footer.html</code>: footer o' th' the left menu</li>
<li><code>search.html</code>: search box. <em>Not meant t' be overwritten</em></li>
<li><code>toc.html</code>: t'ble o' contents</li>
</ul>
<h2 id="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>
<div class="box notices note">
<div class="box-label">Avast</div>
<div class="box-content">
<p>Th' size o' th' logo will adapt automatically</p>
</div>
</div>
<h2 id="change-the-favicon">Change th' favicon</h2>
<p>If yer favicon be a SVG, PNG or ICO, just drop off yer image 'n yer local <code>static/images/</code> folder an' name it <code>favicon.svg</code>, <code>favicon.png</code> or <code>favicon.ico</code> respectivly.</p>
<p>If no favicon file be found, th' theme will lookup th' alternative filename <code>logo</code> 'n th' same locat'n an' will repeat th' search fer th' list o' supported file types.</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>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;icon&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;/images/favicon.bmp&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;image/bmp&#34;</span> <span class="p">/&gt;</span>
</code></pre></div><h2 id="theme-variant">Change default colors</h2>
<p>Th' Relearrrn theme let ye choose between some predefined color scheme variants, but feel free t' add one yourself!</p>
<h3 id="standard-variant">Standard variant</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme wit' a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;&#34;</span> <span class="c"># or themeVariant = &#34;relearn&#34; or themeVariant = &#34;relearn-light&#34;</span>
</code></pre></div><p><img src="/hugo-theme-relearn/basics/customization/images/standard-variant.png?width=60pc" alt="Standard variant"></p>
<h3 id="standard-dark-variant">Standard dark variant</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme wit' a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>
</code></pre></div><p><img src="/hugo-theme-relearn/basics/customization/images/standard-dark-variant.png?width=60pc" alt="Dark variant"></p>
<h3 id="learn-variant">Learrrn variant</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme wit' a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>
</code></pre></div><p><img src="/hugo-theme-relearn/basics/customization/images/learn-variant.png?width=60pc" alt="Learn variant"></p>
<h3 id="red-variant">Red variant</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme wit' a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>
</code></pre></div><p><img src="/hugo-theme-relearn/basics/customization/images/red-variant.png?width=60pc" alt="Red variant"></p>
<h3 id="blue-variant">Blue variant</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme wit' a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>
</code></pre></div><p><img src="/hugo-theme-relearn/basics/customization/images/blue-variant.png?width=60pc" alt="Blue variant"></p>
<h3 id="green-variant">Green variant</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme wit' a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>
</code></pre></div><p><img src="/hugo-theme-relearn/basics/customization/images/green-variant.png?width=60pc" alt="Green variant"></p>
<h3 id="mine-variant">&lsquo;Mine variant</h3>
<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 rrrambl'n an' modify colors 'n CSS variables.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span>
<span class="nv">--MAIN-TEXT-color</span><span class="p">:</span> <span class="mh">#101010</span><span class="p">;</span> <span class="c">/* Color o' text by default */</span>
<span class="nv">--MAIN-TITLES-TEXT-color</span><span class="p">:</span> <span class="mh">#444753</span><span class="p">;</span> <span class="c">/* Color o' titles h2-h3-h4-h5-h6 */</span>
<span class="nv">--MAIN-LINK-color</span><span class="p">:</span> <span class="mh">#486ac9</span><span class="p">;</span> <span class="c">/* Color o' links */</span>
<span class="nv">--MAIN-LINK-HOVER-color</span><span class="p">:</span> <span class="mh">#134fbf</span><span class="p">;</span> <span class="c">/* Color o' hovered links */</span>
<span class="nv">--MAIN-ANCHOR-color</span><span class="p">:</span> <span class="mh">#486ac9</span><span class="p">;</span> <span class="c">/* color o' anchors on titles */</span>
<span class="nv">--MAIN-BG-color</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span> <span class="c">/* color o' text by default */</span>
<span class="c">/* adjusted t' relearn-light chroma style */</span>
<span class="nv">--CODE-BLOCK-color</span><span class="p">:</span> <span class="mh">#000000</span><span class="p">;</span> <span class="c">/* fallback color fer block code text */</span>
<span class="nv">--CODE-BLOCK-BG-color</span><span class="p">:</span> <span class="mh">#f8f8f8</span><span class="p">;</span> <span class="c">/* fallback color fer block code background */</span>
<span class="nv">--CODE-BLOCK-BORDER-color</span><span class="p">:</span> <span class="mh">#d8d8d8</span><span class="p">;</span> <span class="c">/* color o' block code border */</span>
<span class="nv">--CODE-INLINE-color</span><span class="p">:</span> <span class="mh">#5e5e5e</span><span class="p">;</span> <span class="c">/* color fer inline code text */</span>
<span class="nv">--CODE-INLINE-BG-color</span><span class="p">:</span> <span class="mh">#fffae9</span><span class="p">;</span> <span class="c">/* color fer inline code background */</span>
<span class="nv">--CODE-INLINE-BORDER-color</span><span class="p">:</span> <span class="mh">#f8e8c8</span><span class="p">;</span> <span class="c">/* color o' inline code border */</span>
<span class="nv">--MENU-HOME-LINK-color</span><span class="p">:</span> <span class="mh">#323232</span><span class="p">;</span> <span class="c">/* Color o' th' home button text */</span>
<span class="nv">--MENU-HOME-LINK-HOVER-color</span><span class="p">:</span> <span class="mh">#808080</span><span class="p">;</span> <span class="c">/* Color o' th' hovered home button text */</span>
<span class="nv">--MENU-HEADER-BG-color</span><span class="p">:</span> <span class="mh">#7dc903</span><span class="p">;</span> <span class="c">/* Background color o' menu header */</span>
<span class="nv">--MENU-HEADER-BORDER-color</span><span class="p">:</span> <span class="mh">#7dc903</span><span class="p">;</span> <span class="c">/*Color o' menu header border */</span>
<span class="nv">--MENU-SEARCH-color</span><span class="p">:</span> <span class="mh">#efefef</span><span class="p">;</span> <span class="c">/* Color o' search field text */</span>
<span class="nv">--MENU-SEARCH-BG-color</span><span class="p">:</span> <span class="mh">#3d414d</span><span class="p">;</span> <span class="c">/* Search field background color (by default borders + icons) */</span>
<span class="nv">--MENU-SEARCH-BOX-color</span><span class="p">:</span> <span class="mh">#efefef</span><span class="p">;</span> <span class="c">/* Override search field border color */</span>
<span class="nv">--MENU-SECTIONS-ACTIVE-BG-color</span><span class="p">:</span> <span class="mh">#202028</span><span class="p">;</span> <span class="c">/* Background color o' th' active section an' its children */</span>
<span class="nv">--MENU-SECTIONS-BG-color</span><span class="p">:</span> <span class="mh">#282830</span><span class="p">;</span> <span class="c">/* Background color o' other sections */</span>
<span class="nv">--MENU-SECTIONS-LINK-color</span><span class="p">:</span> <span class="mh">#bababa</span><span class="p">;</span> <span class="c">/* Color o' links 'n menu */</span>
<span class="nv">--MENU-SECTIONS-LINK-HOVER-color</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span> <span class="c">/* Color o' links 'n menu, when hovered */</span>
<span class="nv">--MENU-SECTION-ACTIVE-CATEGORY-color</span><span class="p">:</span> <span class="mh">#444444</span><span class="p">;</span> <span class="c">/* Color o' active category text */</span>
<span class="nv">--MENU-SECTION-ACTIVE-CATEGORY-BG-color</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span> <span class="c">/* Color o' background fer th' active category (only) */</span>
<span class="nv">--MENU-VISITED-color</span><span class="p">:</span> <span class="mh">#506397</span><span class="p">;</span> <span class="c">/* Color o' &#39;page visited&#39; ay'cons 'n menu */</span>
<span class="nv">--MENU-SECTION-HR-color</span><span class="p">:</span> <span class="mh">#606060</span><span class="p">;</span> <span class="c">/* Color o' &lt;hr&gt; separator 'n menu */</span>
<span class="c">/* base styl'n fer boxes */</span>
<span class="nv">--BOX-CAPTION-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">1</span> <span class="p">);</span> <span class="c">/* color o' th' title text */</span>
<span class="nv">--BOX-BG-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mf">.833</span> <span class="p">);</span> <span class="c">/* color o' th' rrrambl'n background */</span>
<span class="nv">--BOX-TEXT-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">1</span> <span class="p">);</span> <span class="c">/* fixed color o' th' rrrambl'n text */</span>
<span class="p">}</span>
</code></pre></div><p>Then, set th' <code>themeVariant</code> value wit' th' name o' yer custom theme file. That&rsquo;s it!</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme wit' a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;mine&#34;</span>
</code></pre></div><h3 id="multiple-variants">Multiple variants</h3>
<p>Ye can also set multiple variants. In this case, th' first variant be th' default choosen on first view an' a theme switch will be shown 'n th' menu footer.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme wit' a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;relearn-light&#34;</span><span class="p">,</span> <span class="s2">&#34;relearn-dark&#34;</span> <span class="p">]</span>
</code></pre></div>
<div class="box notices tip">
<div class="box-label">Smarrrt Arrrse</div>
<div class="box-content">
<p>If ye want t' switch th' rules highlightn'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n <a href="https://gohugo.io/content-management/syntax-highlighting/">accord'n t' Hugo&rsquo;s documentat'n</a>, an' <code>@import</code> this stylesheet 'n yer color variant stylesheet. For an example, take a look into <code>theme-relearn-light.css</code> an' <code>config.toml</code> o' th' exampleSite.</p>
</div>
</div>
<footer class=" footline">
</footer>
</main>
</div>
</div>
<div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
<div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
</div>
<script src="/hugo-theme-relearn/js/clipboard.min.js?1645228418"></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645228418"></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645228418"></script>
<script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645228418"></script>
<script src="/hugo-theme-relearn/js/featherlight.min.js?1645228418"></script>
<script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645228418"></script>
<script src="/hugo-theme-relearn/js/mermaid.min.js?1645228418"></script>
<script>
if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
}
</script>
<script>
window.T_Copy_to_clipboard = 'Copy t\u0027 clipboard';
window.T_Copied_to_clipboard = 'Copied t\u0027 clipboard!';
window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
</script>
<script src="/hugo-theme-relearn/js/relearn.js?1645228418"></script>
</body>
</html>