# Customizat'n

Arrr

Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings 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 :

- `rrrambl'n.html`: th' rrrambl'n plank itself. This can be overridden if ye wan’t t' display page’s meta data above or below th' rrrambl'n.
- `header.html`: th' header o' th' rrrambl'n plank (contains th' breadcrumbs). 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
- `footer.html`: th' footer o' th' rrrambl'n plank (contains th' arrows). Not meant t' be overwritten
- `custom-footer.html`: custom footer 'n plank. Meant t' be overwritten when add'n Javacript. Don’t forget t' include `javascript` HTML tag directive 'n yer file
- `favicon.html`: th' favicon
- `logo.html`: th' logo, on top left hand corner
- `meta.html`: HTML meta tags, if ye want t' change default behavior
- `menu.html`: left menu. Not meant t' be overwritten
- `menu-pre.html`: side-wide configurat'n t' prepend t' menu items. If ye override this, it be yer responsiblity t' take th' page’s `pre` sett'n into account.
- `menu-post.html`: side-wide configurat'n t' append t' menu items. If ye override this, it be yer responsiblity t' take th' page’s `post` sett'n into account.
- `menu-footer.html`: footer o' th' the left menu
- `search.html`: search box. Not meant t' be overwritten
- `toc.html`: t'ble o' contents

## 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` respectivly.

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 default colors

Th' Relearrrn theme let ye choose between some predefined color scheme variants, but feel free t' add one yourself!

### Standard variant

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

### Standard dark variant

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

### Learrrn variant

    [params]
      # Change default color scheme wit' a variant one.
      themeVariant = "learn"

### Red variant

    [params]
      # Change default color scheme wit' a variant one.
      themeVariant = "red"

### Blue variant

    [params]
      # Change default color scheme wit' a variant one.
      themeVariant = "blue"

### Green variant

    [params]
      # Change default color scheme wit' a variant one.
      themeVariant = "green"

### ‘Mine‘ variant

First, create a new CSS file 'n yer local `static/css` folder prefixed by `theme` (e.g. wit' mine theme `static/css/theme-mine.css`). Copy th' follow'n rrrambl'n an' modify colors 'n CSS variables.

    :root {
        --MAIN-TEXT-color: #101010; /* Color o' text by default */
        --MAIN-TITLES-TEXT-color: #444753; /* Color o' titles h2-h3-h4-h5-h6 */
        --MAIN-LINK-color: #486ac9; /* Color o' links */
        --MAIN-LINK-HOVER-color: #134fbf; /* Color o' hovered links */
        --MAIN-ANCHOR-color: #486ac9; /* color o' anchors on titles */
        --MAIN-BG-color: #ffffff; /* color o' text by default */

        /* adjusted t' relearn-light chroma style */
        --CODE-BLOCK-color: #000000; /* fallback color fer block code text */
        --CODE-BLOCK-BG-color: #f8f8f8; /* fallback color fer block code background */
        --CODE-BLOCK-BORDER-color: #d8d8d8; /* color o' block code border */

        --CODE-INLINE-color: #5e5e5e; /* color fer inline code text */
        --CODE-INLINE-BG-color: #fffae9; /* color fer inline code background */
        --CODE-INLINE-BORDER-color: #f8e8c8; /* color o' inline code border */

        --MENU-HOME-LINK-color: #323232; /* Color o' th' home button text */
        --MENU-HOME-LINK-HOVER-color: #808080; /* Color o' th' hovered home button text */

        --MENU-HEADER-BG-color: #7dc903; /* Background color o' menu header */
        --MENU-HEADER-BORDER-color: #7dc903; /*Color o' menu header border */

        --MENU-SEARCH-color: #efefef; /* Color o' search field text */
        --MENU-SEARCH-BG-color: #3d414d; /* Search field background color (by default borders + icons) */
        --MENU-SEARCH-BOX-color: #efefef; /* Override search field border color */

        --MENU-SECTIONS-ACTIVE-BG-color: #202028; /* Background color o' th' active section an' its children */
        --MENU-SECTIONS-BG-color: #282830; /* Background color o' other sections */
        --MENU-SECTIONS-LINK-color: #bababa; /* Color o' links 'n menu */
        --MENU-SECTIONS-LINK-HOVER-color: #ffffff;  /* Color o' links 'n menu, when hovered */
        --MENU-SECTION-ACTIVE-CATEGORY-color: #444444; /* Color o' active category text */
        --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color o' background fer th' active category (only) */

        --MENU-VISITED-color: #506397; /* Color o' 'page visited' ay'cons 'n menu */
        --MENU-SECTION-HR-color: #606060; /* Color o' <hr> separator 'n menu */

        /* base styl'n fer boxes */
        --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color o' th' title text */
        --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color o' th' rrrambl'n background */
        --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color o' th' rrrambl'n text */
    }

Then, set th' `themeVariant` value wit' th' name o' yer custom theme file. That’s it!

    [params]
      # Change default color scheme wit' a variant one.
      themeVariant = "mine"

### Multiple variants

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.

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

Smarrrt Arrrse

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 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.