How to include

To put this theme on your page, slap this somewhere in your page:

[[include :wanderers-library:component:understory-theme]]

Theme Components

The body font is Libre Baskerville.
The Header font is MedievalSharp
The Title font is Jim Nightshade

Here's some links for you:

Examples

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

Titles can be created by putting between one and six plus "+" at the start of the line

+ Titles

This is a tab view.

This is a blockquote, created by putting "> " at the start of each line.
More text

That's a horizontal rule

Nested blockquotes

And another¹

An alternative horizontal rule is available as well if the "-----" is enclosed in a "fancyhr" class div, like so:

[[div_ class="fancyhr"]]
-----
[[/div]]

Resulting in this:

There is also a special border that can be enabled by adding the "fancyborder" class to any element. For instance, this is the code to this block:

[[div_ class="fancyborder"]]
content goes here
[[/div]]

This is a	table
You should know	how to make these
already

+ Show theme code

- Hide theme code

/* Understory Theme*/
/* 2025 Wikidot Theme */
/* By UncertaintyCrossing */
 
/* Fonts */
 
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jim+Nightshade&display=swap');
 
:root {
    --loam-body-bg: url(https://wanderers-sandbox-2.wdfiles.com/local--files/collab%3Arabbits/dirt_bg.jpg);
    --loam-header-layer-0: url(https://wanderers-sandbox-2.wdfiles.com/local--files/collab%3Arabbits/loam_sky_bg.jpg);
    --loam-header-layer-1: url(https://wanderers-sandbox-2.wdfiles.com/local--files/collab%3Arabbits/loam_sky_fg.png);
 
    --under-loam-black: 0, 0, 0;
    --rock-brown: 50, 41, 7;
    --sand-yellow: 230, 228, 209;
    --forest-pine: 135, 138, 96;
    --forest-shadows: 46, 49, 34;
    --sand-orange: 188, 143, 66;
    --river-teal: 73, 102, 87;
    --shrub-green: 29, 54, 3;
 
    --body-font: 'Libre Baskerville', serif; 
    --header-font: 'MedievalSharp', cursive;
    --title-font: 'Jim Nightshade', cursive;
    --UI-font: var(--title-font);
    --header-title: "Over Root and Under Loam";
    --logo-image: url( );
 
    --white-monochrome: var(--sand-yellow);
    --light-gray-monochrome: var(--shrub-green);
    --light-pale-gray-monochrome: var(--forest-pine);
    --gray-monochrome: var(--forest-shadows);
    --pale-gray-monochrome: var(--forest-pine);
    --dark-gray-monochrome: var(--rock-brown);
    --black-monochrome: var(--under-loam-black);
    --bright-accent: var(--sand-orange);
    --medium-accent: var(--river-teal);
    --dark-accent: var(--rock-brown);
 
    --swatch-primary-darker: var(--forest-shadows);
    --swatch-secondary-color: var(--dark-gray-monochrome);
    --swatch-menutxt-light-color: var(--bright-accent);
    --swatch-menubg-light-color: var(--white-monochrome);
    --swatch-menutxt-general-color: var(--swatch-menubg-black-color);
    --swatch-text-tertiary-color: var(--river-teal);
    --swatch-tertiary-color: var(--rock-brown);
 
    --sidebar-links-bg-color: var(--rock-brown);
    --sideblock-heading-text-color: var(--bright-accent);
 
    --ui-button-txt: var(--bright-accent);
    --ui-button-bg: var(--dark-accent);
    --modal-body-text: var(--swatch-text-general);
    --modal-body-header-txt: var(--swatch-primary-darker);
    --modal-header-stripe: var(--white-monochrome);
    --hoverblock-header-bg: var(--swatch-text-secondary-color);
    --hoverblock-txt: var(--black-monochrome);
    --hoverblock-bg: var(--light-pale-gray-monochrome),0.8;
    --hoverblock-footer-txt: var(--forest-shadows);
    --hover-link-color: var(--swatch-primary-darker);
    --visited-link-color: var(--sand-orange);
    --rating-module-bottom-border-color: var(--under-loam-black);
    --rating-module-text-hover-color: var(--pale-gray-monochrome);
    --scrollbar-color: rgb(255, 168, 58)rgb(0, 131, 181);
 
}
 
body {
    background-color: rgb(var(--swatch-background));
    background-image: var(--loam-body-bg);
    background-size: calc(50rem + 20%);
    background-attachment: fixed;
    background-repeat: repeat;
    color: rgb(var(--under-loam-black));
}
 
html,
body {
    scrollbar-color: rgb(var(--sand-orange)) rgb(var(--forest-shadows));
}
 
::-webkit-scrollbar,
#side-bar:hover::-webkit-scrollbar {
    background-color: rgb(var(--forest-shadows));
}
 
::-webkit-scrollbar-thumb,
#side-bar:hover::-webkit-scrollbar-thumb {
    background-color: rgb(var(--sand-orange));
}
 
#main-content {
    --tabs-bg: var(--white-monochrome);
    --tabs-bottom-border-color: var(--light-gray-monochrome);
    --tabs-hover-bg: var(--tabs-bottom-border-color);
    --tabs-txt: var(--swatch-text-secondary-color);
    --tabs-content-bg-color: var(--swatch-secondary-color), 0.375;
    --tables-border: var(--forest-shadows);
    --footnotes-footer-bg-color: var(--sand-yellow);
 
    margin: 0 auto;
}
 
tt, pre { font-size: 0.9125em; }
 
div.rate-box-with-credit-button, div.page-rate-widget-box {
    background:
        linear-gradient(to top,
            rgba(var(--river-teal), 1) 0,
            rgba(var(--under-loam-black), 1) 100%);
}
 
/*------ HEADER ------*/
 
:root {
    --header-height-on-mobile: calc(23.75rem + 14.75vw);
    --topbar-height-on-mobile: 2.75rem;
    --header-height-on-desktop: var(--header-height-on-mobile);
    --topbar-height-on-desktop: var(--topbar-height-on-mobile);
}
 
#header::before, #header h1 a::before { content: unset; }
#header h1 a {
    pointer-events: none;
    place-items: center;
}
#header h1 a::after {
    top: -1.5rem;
    --wght: 400;
    font-size: 20vh;
    background: unset;
    -webkit-background-clip: unset;
    background-clip: unset;
    background-size: unset;
    -webkit-text-fill-color: unset;
    content: var(--header-title);
    color: rgb(var(--sand-orange));
    text-shadow: 0 0 .375rem currentColor;
    position: relative;
    height: auto; width: auto;
    pointer-events: auto;
    padding: 0.75rem;
}
 
@media only screen and (max-width: 800px) {
    #header h1 a::after {    
        top: 0rem;
        font-size: 12vh;
 }
}
#header div#top-bar {
  font-size: 1vh;
}
 
div#extra-div-1 {
    background-image: var(--loam-header-layer-0);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
@media not all and (min-resolution:.001dpcm) { @media {
div#extra-div-1 {
  background-attachment: initial;
}
}}
 
#extra-div-1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(var(--medium-accent), .05);
}
#extra-div-1 > span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--loam-header-layer-1);
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
#extra-div-1::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    height: 48rem;
    width: 100%;
}
 
div#extrac-div-1 { z-index: initial; }
#extrac-div-1::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: calc(var(--header-height-on-desktop)*.5 - .5rem);
    background-image: var(--logo-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 82.5%;
    mix-blend-mode: overlay;
}
div#extrac-div-1 span { z-index: 2; }
 
/*----------------------------*/
 
#header #login-status a.btn:is(.login-status-create-account,.login-status-sign-in) {
    color: rgb(var(--swatch-text-secondary-color));
}
 
#search-top-box { box-shadow: none; }
 
#login-status #account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--bright-accent));
    background: rgba(var(--under-loam-black), 0.5);
    color: rgb(var(--swatch-text-light));
}
 
#top-bar {
    --dropdown-bg-color: var(--swatch-menubg-light-color), 0.875;
}
 
#header div[class*=top-bar]>ul>li>a {
        font-size: min(calc(.625em + .75vw), 1.125em);
}
 
/*------ SIDE BAR ------*/
 
#side-bar .close-menu::before,
#side-bar .close-menu::after {
    width: var(--topbar-height-on-mobile);
    height: var(--topbar-height-on-mobile);
    top: -.15rem; left: -.15rem;
    border-radius: 0 0 0.75rem 0;
    border: none;
}
 
#side-bar .heading, {
    color: rgb(var(--sand-yellow));
}
 
:is(#interwiki, #side-bar) .heading {
    color: rgb(var(--sand-yellow));
}
 
:is(#side-bar, #interwiki) .heading p {
rgb(var(--sand-yellow)); 
}
 
#side-bar {
  background: rgb(var(--river-teal));
}
 
/*------ MAIN ------*/
 
h1,h2,h3,h4,h5,h6 { color: rgb(var(--forest-pine)); }
 
#page-title, .meta-title {
    color: rgb(var(--swatch-primary));
}
#page-title::before,#page-title::after,
.meta-title::before, .meta-title::after {
    background-image: unset;
    background-color: currentColor;
}
 
.code, .page-source {
  border: none;
  background-color: rgb(var(--white-monochrome));
}
 
.fancyborder {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2vw solid rgba(0, 0, 0, 0.5);
    -webkit-border-image: url(https://wanderers-sandbox-2.wdfiles.com/local--files/collab%3Arabbits/loam_border.png) 600 round;
    -moz-border-image: url(https://wanderers-sandbox-2.wdfiles.com/local--files/collab%3Arabbits/loam_border.png) 600 round;
    -o-border-image: url(https://wanderers-sandbox-2.wdfiles.com/local--files/collab%3Arabbits/loam_border.png) 600 round;
    border-image: url(https://wanderers-sandbox-2.wdfiles.com/local--files/collab%3Arabbits/loam_border.png) 600 round;
    border-image-width: 6;
    padding: 2vw 3vw;
}
 
#main-content .fancyhr hr {
    box-sizing: border-box;
    height: 0;
    border-top: 2vw solid transparent;
    background: none;
    background-color: rgba(255, 219, 90, 0);
    background-color: rgba(var(--bright-accent), 0);
    border-image-source: url(https://wanderers-sandbox-2.wdfiles.com/local--files/collab%3Arabbits/loam_fancyhr.png);
    border-image-repeat: round round;
    border-image-slice: 80 500 80 500 fill;
    border-image-width: 10em 80em 10em 80em;
}
 
:is(blockquote, .blockquote, div.blockquote, [class*="blockquote"]) {
    color: rgba(var(--sand-yellow), 1);
    background-color: rgba(var(--under-loam-black), 0.5);
    border: .063em solid rgba(var(--bright-accent), 1);
}
 
.newblock {
    margin: 1.25rem;
    padding: .75rem;
    border: 0.25rem outset rgb(var(--medium-accent));
    background-color: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--bright-accent));
}
 
.newblock h1 h2 h3 h4 h5 h6 {
    color: rgb(var(--bright-accent));
}
 
/* Collection Box / More By This Author */
 
.authorname {
  color: rgb(var(--dark-accent));
  font-weight: bold;
  text-align: center;
}
 
.collection .collapsible-block-unfolded-link a, .collection .collapsible-block-folded a {
  color: rgb(var(--forest-shadows));
  font-weight: bold;
}
 
/*--- HR ---*/
 #main-content hr {
  background: url( );
  background-image: url(" ");
  background-color: rgba(var(--forest-pine));
}
 
hr::before, hr::after {
    content: " ";
    display: grid;
    grid-column: 1/2;
    grid-row: 1/2;
}
hr::before {
    height: 0.05rem;
    width: 100%;
 
hr::after {
    width: var(--hr-icon-size);
    height: var(--hr-icon-size);
}
 
/*--- Tabs ---*/
 
:is(.yui-navset,.yui-navset-top,.yui-navset-bottom) .yui-content {
    border: none;
}
 
/*--- Table ---*/
table.wiki-content-table th { box-shadow: none; }
 
/*--- Footnotes ---*/
 
.hovertip {
    -webkit-backdrop-filter: blur(0.125rem);
    backdrop-filter: blur(0.125rem);
}
.hovertip::before {
    box-shadow: none;
    border: solid 0.1rem rgb(var(--hoverblock-header-bg));
}
 
.footnote .f-content, .reference .r-content {
    font-family: var(--body-font);
}
 
.footnotes-footer, .bibitems {
    background-color: rgb(var(--forest-pine),0.6);
}
 
:is(.footnotes-footer,.bibitems) .bibitem::after, :is(.footnotes-footer,.bibitems) a[href*=javascript]::before {
    right: -30%;
    background-color: transparent;
}
 
/*--- Tags ---*/
#main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"])::after {
    background: currentColor;
    box-shadow: none;
}
 
/*------ BOTTOM ------*/
 
#footer {
    --footer-link-color: var(--swatch-primary);
    --footer-link-hover-color: var(--swatch-alternate-color);
    --footer-link-hover-bg-color: var(--swatch-primary-darker);
    position: relative;
    margin-top: calc(6.25rem + 10vw);
    background: transparent;
    isolation: isolate;
}
 
#license-area {
    --license-text-color: var(--swatch-text-secondary-color);
    --license-link-hover-color: var(--swatch-alternate-color);
    --license-link-hover-bg-color: var(--swatch-primary-darker);
}
 
#who-rated-page-area > div > span[style*="color"] {
  color: rgb(var(--sand-yellow)) !important;
 background-color: rgb(var(--sand-yellow)) !important;
}
 
#action-area:has(form[onsubmit*="setParent"], #who-rated-page-area, form[onsubmit*="PageTagsModule"], table.page-files, #edit-meta-addbutton, ul[style="list-style: none"], #page-block-checkbox, #rename-option-rename, #rename-option-delete) p:not(:has(a[id*="backlinks"], a[onclick*="showWho"], a.btn))   {
rgb(var(--swatch-secondary-color))
}
 
/*------ MODAL ------*/
#odialog-container div.owindow>div.modal-body>img[style*="padding: 2px 8px;"]:first-child { box-shadow: none; }
 
:root {
    --header-height-on-mobile: 7.5rem;
    --topbar-height-on-mobile: var(--topbar-height-on-desktop);
    --header-height-on-desktop: 10rem;
    --topbar-height-on-desktop: 1.625rem;
}
#header h1 a::after {
   top: 0.25rem;
    font-size: 10vh;
}
@media only screen and (max-width: 800px) {
    #header h1 a::after {    
        top: -0.5rem;
        font-size: 5vh;
 }
}
div#extra-div-1 {
    background-image: none;
    background-color: rgb(var(--under-loam-black));
}
#extra-div-1::before {
    background-color: rgb(var(--under-loam-black), .15);
}
#extra-div-1 > span {
    background-image: none;
}
body {
    background-color: rgb(var(--under-loam-black));
    background-image: none;
}

page revision: 20, last edited: 01 Jan 2026 18:59

Edit Rate (+9) Tags Discuss (2) History Files Print Site tools + Options

The Wanderers' Library

Fiction from another world.

How to include

Theme Components

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title