# Customizat'n :: Cap'n Hugo Relearrrn Theme
Documentation for Hugo Relearn Theme
Author: Sören Weber

# Customizat'n

Arrr! Pirrrates

Fello' pirrates, be awarrre some stuff may not work fer us in this trrranslat'n. Like table of rrramblings, see'ng Merrrmaids, do'ng math or chemistrrry and stuff.

Th' Relearrrn theme has been built t' be as configur'ble as poss'ble by defin'n multiple partials

In `themes/hugo-theme-relearn/layouts/partials/`, ye will find all th' partials defined fer this theme. If ye need t' overwrite someth'n, don’t change th' code directly. Instead follow this plank. You’d create a new partial 'n th' `layouts/partials` folder o' yer local project. This partial will have th' priority.

This theme defines th' follow'n partials :

- `header.html`: th' header o' th' plank. See output-formats
- `footer.html`: th' footer o' th' plank. See output-formats
- `body.html`: th' body o' th' plank. Th' body may contain o' one or many articles. See output-formats
- `article.html`: th' output fer a single article, can contain elements around yer rrrambl'n. See output-formats
- `menu.html`: left menu. Not meant t' be overwritten
- `search.html`: search box. Not meant t' be overwritten
- `custom-header.html`: custom headers 'n plank. Meant t' be overwritten when add'n CSS imports. Don’t forget t' include `style` HTML tag directive 'n yer file.
- `custom-footer.html`: custom footer 'n plank. Meant t' be overwritten when add'n JavaScript. Don’t forget t' include `javascript` HTML tag directive 'n yer file.
- `favicon.html`: th' favicon
- `heading-pre.html`: side-wide configurat'n t' prepend t' planks title head'ns. If ye override this, it be yer responsibility t' take th' page’s `headingPre` sett'n into account.
- `heading-post.html`: side-wide configurat'n t' append t' planks title head'ns. If ye override this, it be yer responsibility t' take th' page’s `headingPost` sett'n into account.
- `logo.html`: th' logo, on top left hand corner
- `meta.html`: HTML meta tags, if ye want t' change default behavior
- `menu-pre.html`: side-wide configurat'n t' prepend t' menu items. If ye override this, it be yer responsibility t' take th' page’s `menuPre` sett'n into account.
- `menu-post.html`: side-wide configurat'n t' append t' menu items. If ye override this, it be yer responsibility t' take th' page’s `menuPost` sett'n into account.
- `menu-footer.html`: footer o' th' the left menu
- `toc.html`: t'ble o' contents
- `rrrambl'n.html`: th' rrrambl'n plank itself. This can be overridden if ye want t' display page’s meta data above or below th' rrrambl'n.
- `content-footer`: footer below th' rrrambl'n, has a default implementat'n but ye can overwrite it if ye don’t like it.

## Change th' logo

Create a new file 'n `layouts/partials/` named `logo.html`. Then write any HTML ye want. Ye could use an `img` HTML tag an' reference an image created under th' static folder, or ye could paste a SVG definit'n!

Avast

Th' size o' th' logo will adapt automatically

## Change th' favicon

If yer favicon be a SVG, PNG or ICO, just drop off yer image 'n yer local `static/images/` folder an' name it `favicon.svg`, `favicon.png` or `favicon.ico` respectively.

If no favicon file be found, th' theme will lookup th' alternative filename `logo` 'n th' same locat'n an' will repeat th' search fer th' list o' supported file types.

If ye need t' change this default behavior, create a new file 'n `layouts/partials/` named `favicon.html`. Then write someth'n like this:

    <link rel="icon" href="/images/favicon.bmp" type="image/bmp">

## Change th' colors

Th' Relearrrn theme lets ye choose between some predefined color variants 'n light or dark mode, but feel free t' add one yourself!

Ye can preview th' shipped variants by chang'n them 'n th' variant selector at th' bottom o' th' menu.

### Single variant

Set th' `themeVariant` value wit' th' name o' yer theme file. That’s it!

    [params]
      themeVariant = "relearn-light"

In th' above example yer theme file has t' be named `theme-relearn-light.css`

### Multiple variants

Ye can also set multiple variants. In this case, th' first variant be th' default chosen on first view an' a variant switch will be shown 'n th' menu footer.

    [params]
      # Change default color scheme wit' a variant one.
      themeVariant = [ "relearn-light", "relearn-dark" ]

Smarrrt Arrrse

If ye want t' switch th' rules highlight'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n accord'n t' Hugo’s documentat'n, an' `@import` this stylesheet 'n yer color variant stylesheet. For an example, take a look into `theme-relearn-light.css` an' `config.toml` o' th' exampleSite.

### Adjust t' OS Sett'ns

Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' `themeVariant` t' `auto`. That’s it.

If you’ve set multiple variants, ye can drop `auto` at any posit'n, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.

    [params]
      themeVariant = [ "auto", "red" ]

If ye don’t configure anyth'n else, th' theme will use `relearn-light` fer light mode an' `relearn-dark` fer dark mode.

If ye don’t like that, ye can set `themeVariantAuto`. Th' first element be th' variant fer light mode, th' second fer dark mode

    [params]
      themeVariantAuto = [ "learn", "neon" ]

Avast

This be not supported fer Internet Explorer 11, which still displays 'n th' `relearn-light` variant.

### Roll yer own

If ye be not happy wit' th' shipped variants ye can either copy an' rename one o' th' shipped files from `themes/hugo-theme-relearn/static/css` t' `static/css`, edit them afterwards t' yer lik'n 'n a text editor an' configure th' `themeVariant` parameter 'n yer `config.toml` or just use th' interactive variant generator.

### Output formats

Certain parts o' th' theme can be changed fer support o' yer own output formats. Eg. if ye define a new output format `PLAINTEXT` 'n yer `config.toml`, ye can add a file `layouts/partials/header.plaintext.html` t' change th' way, th' plank header should look like fer that output format.