hugo-theme-relearn/pir/basics/customization/index.html
2022-02-07 21:54:15 +00:00

370 lines
40 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.1" />
<meta name="generator" content="Relearn 2.9.5">
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
##
<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?1644270853" type="image/svg+xml">
<link href="/hugo-theme-relearn/css/nucleus.css?1644270853" rel="stylesheet">
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644270853" rel="stylesheet">
<link href="/hugo-theme-relearn/css/featherlight.min.css?1644270853" rel="stylesheet">
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644270853" rel="stylesheet">
<link href="/hugo-theme-relearn/css/auto-complete.css?1644270853" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme.css?1644270853" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme-relearn.css?1644270853" rel="stylesheet">
<link href="/hugo-theme-relearn/css/variant.css?1644270853" rel="stylesheet">
<link href="/hugo-theme-relearn/css/print.css?1644270853" rel="stylesheet" media="print">
<style>
:root #header + #content > #left > #rlblock_left{
display:none !important;
}
</style>
<script src="/hugo-theme-relearn/js/jquery.min.js?1644270853"></script>
</head>
<body class="" 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="showVisitedLinks">
<div id="header-wrapper">
<div id="header">
<a id="logo"
href="/hugo-theme-relearn/pir/"
style="
color: #3d414d;
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:#3d414d;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:#3d414d;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:#3d414d;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:#3d414d;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">
<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?1644270853"></script>
<script src="/hugo-theme-relearn/js/auto-complete.js?1644270853"></script>
<script src="/hugo-theme-relearn/js/search.js?1644270853"></script>
</div>
<div 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/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/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 id="prefooter">
<hr/>
<ul>
<li>
<a class="padding">
<i class="fas fa-language fa-fw"></i>
<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>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="255px" height="255px" viewBox="0 0 255 255" style="enable-background:new 0 0 255 255;" xml:space="preserve">
<g>
<g id="arrow-drop-down">
<polygon points="0,63.75 127.5,191.25 255,63.75" />
</g>
</g>
</svg>
</div>
</a>
</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">
<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">
<div id="overlay"></div>
<div class="padding highlightable">
<div id="top-bar">
<div id="top-github-link">
<a class="github-link" title='Edit this plank' href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/customization/_index.pir.md" target="blank">
<i class="fas fa-code-branch"></i>
<span id="top-github-link-text">Edit this plank</span>
</a>
</div>
<div id="breadcrumbs">
<span id="sidebar-toggle-span">
<a href="#" id="sidebar-toggle" data-sidebar-toggle="">
<i class="fas fa-bars"></i>
</a>
</span>
<span id="toc-menu"><i class="fas fa-list-alt"></i></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 class="progress">
<div class="wrapper">
<nav id="TableOfContents"></nav>
</div>
</div>
</div>
<div id="head-tags">
</div>
<main id="body-inner">
<h1>Customizat&#39;n</h1>
<div class="notices warning">
<div class="label">Arrr</div>
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings and stuff.</p>
</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><em>rrrambl'n</em>: 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><em>header</em>: th' header o' th' rrrambl'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&rsquo;t forget t' include <code>style</code> HTML tag directive 'n yer file</li>
<li><em>footer</em>: th' footer o' th' rrrambl'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&rsquo;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&rsquo;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&rsquo;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>
<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="notices note">
<div class="label">Avast</div>
<p>Th' size o' th' logo will adapt automatically</p>
</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" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">&lt;<span style="color:#ff6ac1">link</span> <span style="color:#57c7ff">rel</span><span style="color:#ff6ac1">=</span><span style="color:#5af78e">&#34;icon&#34;</span> <span style="color:#57c7ff">href</span><span style="color:#ff6ac1">=</span><span style="color:#5af78e">&#34;/images/favicon.bmp&#34;</span> <span style="color:#57c7ff">type</span><span style="color:#ff6ac1">=</span><span style="color:#5af78e">&#34;image/bmp&#34;</span> /&gt;
</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" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">[params]
<span style="color:#78787e"># Change default color scheme wit' a variant one. Can be empty, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34;.</span>
themeVariant = <span style="color:#5af78e">&#34;&#34;</span>
</code></pre></div><p><img src="/hugo-theme-relearn/basics/customization/images/standard-variant.png?width=60pc" alt="Red variant"></p>
<h3 id="red-variant">Red variant</h3>
<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">[params]
<span style="color:#78787e"># Change default color scheme wit' a variant one. Can be empty, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34;.</span>
themeVariant = <span style="color:#5af78e">&#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" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">[params]
<span style="color:#78787e"># Change default color scheme wit' a variant one. Can be empty, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34;.</span>
themeVariant = <span style="color:#5af78e">&#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" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">[params]
<span style="color:#78787e"># Change default color scheme wit' a variant one. Can be empty, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34;.</span>
themeVariant = <span style="color:#5af78e">&#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" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-css" data-lang="css">:<span style="color:#ff9f43">root</span> {
<span style="color:#ff5c57">--MAIN-TEXT-color</span>: <span style="color:#ff9f43">#323232</span>; <span style="color:#78787e">/* Color o' text by default */</span>
<span style="color:#ff5c57">--MAIN-TITLES-TEXT-color</span>: <span style="color:#ff9f43">#5e5e5e</span>; <span style="color:#78787e">/* Color o' titles h2-h3-h4-h5-h6 */</span>
<span style="color:#ff5c57">--MAIN-LINK-color</span>: <span style="color:#ff9f43">#1C90F3</span>; <span style="color:#78787e">/* Color o' links */</span>
<span style="color:#ff5c57">--MAIN-LINK-HOVER-color</span>: <span style="color:#ff9f43">#167ad0</span>; <span style="color:#78787e">/* Color o' hovered links */</span>
<span style="color:#ff5c57">--MAIN-ANCHOR-color</span>: <span style="color:#ff9f43">#1C90F3</span>; <span style="color:#78787e">/* color o' anchors on titles */</span>
<span style="color:#ff5c57">--MAIN-CODE-color</span>: <span style="color:#ff9f43">#e2e4e5</span>; <span style="color:#78787e">/* fallback color fer code background */</span>
<span style="color:#ff5c57">--MAIN-CODE-BG-color</span>: <span style="color:#ff9f43">#282a36</span>; <span style="color:#78787e">/* fallback color fer code text */</span>
<span style="color:#ff5c57">--MENU-HOME-LINK-color</span>: <span style="color:#ff9f43">#323232</span>; <span style="color:#78787e">/* Color o' th' home button text */</span>
<span style="color:#ff5c57">--MENU-HOME-LINK-HOVER-color</span>: <span style="color:#ff9f43">#5e5e5e</span>; <span style="color:#78787e">/* Color o' th' hovered home button text */</span>
<span style="color:#ff5c57">--MENU-HEADER-BG-color</span>: <span style="color:#ff9f43">#1C90F3</span>; <span style="color:#78787e">/* Background color o' menu header */</span>
<span style="color:#ff5c57">--MENU-HEADER-BORDER-color</span>: <span style="color:#ff9f43">#33a1ff</span>; <span style="color:#78787e">/*Color o' menu header border */</span>
<span style="color:#ff5c57">--MENU-SEARCH-BG-color</span>: <span style="color:#ff9f43">#167ad0</span>; <span style="color:#78787e">/* Search field background color (by default borders + icons) */</span>
<span style="color:#ff5c57">--MENU-SEARCH-BOX-color</span>: <span style="color:#ff9f43">#33a1ff</span>; <span style="color:#78787e">/* Override search field border color */</span>
<span style="color:#ff5c57">--MENU-SEARCH-BOX-ICONS-color</span>: <span style="color:#ff9f43">#a1d2fd</span>; <span style="color:#78787e">/* Override search field ay'cons color */</span>
<span style="color:#ff5c57">--MENU-SECTIONS-ACTIVE-BG-color</span>: <span style="color:#ff9f43">#20272b</span>; <span style="color:#78787e">/* Background color o' th' active section an' its children */</span>
<span style="color:#ff5c57">--MENU-SECTIONS-BG-color</span>: <span style="color:#ff9f43">#252c31</span>; <span style="color:#78787e">/* Background color o' other sections */</span>
<span style="color:#ff5c57">--MENU-SECTIONS-LINK-color</span>: <span style="color:#ff9f43">#ccc</span>; <span style="color:#78787e">/* Color o' links 'n menu */</span>
<span style="color:#ff5c57">--MENU-SECTIONS-LINK-HOVER-color</span>: <span style="color:#ff9f43">#e6e6e6</span>; <span style="color:#78787e">/* Color o' links 'n menu, when hovered */</span>
<span style="color:#ff5c57">--MENU-SECTION-ACTIVE-CATEGORY-color</span>: <span style="color:#ff9f43">#777</span>; <span style="color:#78787e">/* Color o' active category text */</span>
<span style="color:#ff5c57">--MENU-SECTION-ACTIVE-CATEGORY-BG-color</span>: <span style="color:#ff9f43">#fff</span>; <span style="color:#78787e">/* Color o' background fer th' active category (only) */</span>
<span style="color:#ff5c57">--MENU-VISITED-color</span>: <span style="color:#ff9f43">#33a1ff</span>; <span style="color:#78787e">/* Color o' &#39;page visited&#39; ay'cons 'n menu */</span>
<span style="color:#ff5c57">--MENU-SECTION-HR-color</span>: <span style="color:#ff9f43">#20272b</span>; <span style="color:#78787e">/* Color o' &lt;hr&gt; separator 'n menu */</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" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">[params]
<span style="color:#78787e"># Change default color scheme wit' a variant one. Can be &#34;red&#34;, &#34;blue&#34;, &#34;green&#34;.</span>
themeVariant = <span style="color:#5af78e">&#34;mine&#34;</span>
</code></pre></div>
<footer class=" footline">
</footer>
</main>
</div>
<div id="navigation">
<a class="nav nav-prev" href="/hugo-theme-relearn/pir/basics/configuration/" title="Configurrrat&#39;n"><i class="fa fa-chevron-left"></i></a>
<a class="nav nav-next" href="/hugo-theme-relearn/pir/basics/history/" title="Historrry"><i class="fa fa-chevron-right"></i></a>
</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?1644270853"></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644270853"></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644270853"></script>
<script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644270853"></script>
<script src="/hugo-theme-relearn/js/featherlight.min.js?1644270853"></script>
<script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644270853"></script>
<script src="/hugo-theme-relearn/js/mermaid.min.js?1644270853"></script>
<script>
if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
}
</script>
<script src="/hugo-theme-relearn/js/relearn.js?1644270853"></script>
</body>
</html>