"Once Upon a Time" Theme

How do I use this theme?

Put this line at the top of your page.

[[include :wanderers-library:component:once-upon-a-time]]

+I like this theme but want to change the colors. How do I do that?

First you'll change the header and logo colors. I have added the PSD files for both in the file section of this page. Just download them and change the color of each layer that I labeled "HERE". Alternatively, you can make your own new ones by copying the same structure.

Once you're done, save and upload the new images to your page, paste the text below at the top of your page, copy the static link to each image, and replace the word "HERE" next to "--gradient-header" with the link to the header image and the one next to "--logo-image" with the link to the logo image.

After that, find the RGB color of each of the colors you picked and paste them into the R, G, and B of the colors you would like to replace.

Make sure to leave the semicolons!

[[module CSS]]
:root {
/*Header*/
--gradient-header: url("HERE");
--logo-image: url("HERE");

/* Theme colors*/
—white-monochrome: R, G, B;
/*dark brown page color*/

—gray-monochrome: R, G, B;
/* red */

—dark-gray-monochrome: R, G, B;
/* orange */

—light-gray-monochrome: R, G, B;
/* yellow */

—bright-accent: R, G, B;
/* gold */

—shadow-accent: R, G, B, A;
/*Self-explanatory. For this one, make sure the A is somewhere between 1-0 depending on desired opacity*/
}
[[/module]]

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.

---

I have edited the texture of the default fancyhr to match this theme. It is available as usual with "-----" enclosed in a "fancyhr" class div, like so:

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

Resulting in this:

---

I also altered the texture of the fancyborder. That can be created like this.

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

Titles can be created by putting between 1-6 plus "+" at the start of the line

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

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

---

That's a horizontal rule
These

Are

Nested

Blockquotes¹

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

The body and title font is Quintessential.
The code block and editor button font is Merienda.
The Editor font is Raleway.

+ Click to see code

/* Once Upon A Time WL Theme by IronShears
*    Built on Dust Jacket by Woedenaz which was built on Black Highlighter by Woedenaz and Croquembouche 
* Paper texture by Brent Leimenstoll and edited by IronShears, released under CC-BY-SA 2.0: https://www.flickr.com/photos/48046976@N08/8416357035
* Header image, gold foil texture, and logo by IronShears, released under CC-BY-SA 3.0 
* Fonts used are  */
 
/*dust jacket import*/
@import url("https://wanderers-library.wikidot.com/component:theme/code/1");
 
/*font-imports*/
@import url('https://fonts.googleapis.com/css2?family=Quintessential&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600');
 
:root {
/*Header*/
    --gradient-header: url("https://wanderers-library.wdfiles.com/local--files/component%3Aonce-upon-a-time/OUATGenericHeader");
    --logo-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Aonce-upon-a-time/OnceUponATimeLogo");
   --paper-texture: url("https://wanderers-library.wdfiles.com/local--files/component%3Aonce-upon-a-time/papertexture.png");
   --gold-foil: url("https://wanderers-library.wdfiles.com/local--files/component%3Aonce-upon-a-time/OnceUponATimeFoil.jpg");
--fancy-border: url("https://wanderers-library.wdfiles.com/local--files/component%3Aonce-upon-a-time/OnceUponATime-hr");
--fancy-hr: url("https://wanderers-library.wdfiles.com/local--files/component%3Aonce-upon-a-time/fancyborder");
 
/* Theme colors*/
    --white-monochrome: 44, 33, 25;
/*dark brown page color*/
 
    --light-pale-gray-monochrome: 190, 166, 147;
    /* off-white paper edge color */
 
    --gray-monochrome: 133, 63, 66;
    /* red */
 
    --dark-gray-monochrome: 177, 104, 71;
    /* orange */
 
    --light-gray-monochrome: 204, 134, 80;
    /* yellow */
 
    --bright-accent: 241, 194, 85;
    /* gold */
 
    --dark-accent: 29, 28, 31;
    /* black for Editor text/code/smallest nested blockquotes */
 
--shadow-accent: 32, 1, 0, .4;
 
    --alt-accent:  var(--bright-accent);
    --very-light-gray-monochrome: var(--white-monochrome);
    --medium-accent: var(--bright-accent);
--swatch-menubg-color: var(--light-gray-monochrome);
--swatch-text-tertiary-color: var(--dark-accent);
--swatch-secondary-color: var(--alt-accent);
    --black-monochrome: var(--bright-accent);
 
/* Fonts */
--body-font: 'Quintessential', cursive;
--title-font: 'Quintessential', cursive;
}
 
/*Header*/
 
div#extra-div-1 {
    background: var(--gradient-header);
    background-repeat: repeat;
    background-position: center;
    background-size: auto 100%;
}
 
#login-status #account-options{
background-image: var(--paper-texture);
  background-repeat: repeat;
  background-position: center;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-left: none !important;
border-bottom: none !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
}
 
#header h1 a::before{
text-shadow: 3px 3px 3px rgba(var(--shadow-accent));
}
 
#header h1 a,
#header h1 a::before,
#header h1 a::after {
    color: rgb(var(--bright-accent));
}
 
#header h1 a::after {
  background-repeat: repeat;
  background-position: center;
background-size: initial;
    background-image: var(--gold-foil) !important;
}
 
#page-title::before,
.meta-title::before,
#page-title::after,
.meta-title::after {
    background-image: var(--gold-foil) !important;
}
 
.fancyborder {
border-image: var(--fancy-hr) 600 round;
    border-image-width: 6;
}
 
#main-content .fancyhr>hr {
background-image: none !important;
border-image-source: var(--fancy-border);
}
 
#main-content hr {
    background: var(--gold-foil) !important;
height: .125rem;
    border: 0;
    border-top: 0.0625rem solid transparent;
background-color: rgba(var(--bright-accent));
    background-size: cover;
}
 
#header::before {
opacity: 1;
}
 
#top-bar{
--dropdown-bg-color: var(--dark-gray-monochrome);
}
 
#header div[class*=top-bar]>ul>li ul>li{
background-image: var(--paper-texture) !important;
margin-top: 5px !important;
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
box-shadow: 3px 3px 3px  rgba(var(--shadow-accent));
}
 
#header div[class*=top-bar]>ul>li ul>li.sfhover{
background-image: var(--paper-texture) !important;
background-image: none !important;
margin-top: 5px !important;
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
box-shadow: 3px 3px 3px  rgba(var(--shadow-accent));
}
 
#top-bar > div.top-bar > ul > li.newpage > ul:first-of-type > li:first-of-type:hover{
 
background-image: var(--paper-texture) !important;}
 
#top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button{
background-color: rgb(var(--light-gray-monochrome)) !important;
}
 
/*blockquotes*/
blockquote{
  background-repeat: repeat;
  background-position: center;
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
box-shadow: inset 5px 5px 5px  rgba(var(--shadow-accent)) !important;
padding:15px;
margin-top: 15px;
margin-left: 3.44%;
margin-right: 3.44%;
background-color: rgb(var(--gray-monochrome)) !important;
background-image: var(--paper-texture);
}
 
blockquote>blockquote {
  background-repeat: repeat;
  background-position: center;
background-color: rgb(var(--dark-gray-monochrome)) !important;
padding:15px;
margin: .7vw !important;
background-image: var(--paper-texture);
}
 
blockquote>blockquote>blockquote {
  background-repeat: repeat;
  background-position: center;
background-color: rgb(var(--light-gray-monochrome)) !important;
padding:15px;
background-image: var(--paper-texture);
}
 
blockquote>blockquote>blockquote>blockquote {
  background-repeat: repeat;
  background-position: center;
background-color: rgb(var(--light-pale-gray-monochrome)) !important;
color: rgb(var(--dark-accent)) !important;
padding:15px;
background-image: var(--paper-texture);
font-family: 'Merienda', cursive !important;
}
 
/* Side Bar*/
 
.close-menu::after {
background-color: rgb(var(--gray-monochrome)) !important;
}
 
#side-bar .heading, #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded{
box-shadow: none;
border-image: var(--gold-foil) 6 round;
border-bottom: solid rgb(var(--black-monochrome)) !important
}
 
.side-block div:nth-of-type(1) input.button, .side-block div:nth-of-type(1) input.text{
margin: 5px !important;
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
}
#side-bar {
box-shadow: 3px 3px 3px  rgba(var(--shadow-accent)) !important;
    background: rgb(var(--white-monochrome)) var(--paper-texture) repeat scroll top center !important;
--sidebar-bg-color: var(--gray-monochrome);
}
 
.side-block{
padding: 1vw;
    background-color: rgb(var(--gray-monochrome)) !important;
    background-image: var(--paper-texture) !important;
border-left: none !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-bottom: none !important;
box-shadow: 3px 3px 3px  rgba(var(--shadow-accent));
 
}
 
#side-bar div.menu-item{
margin-top: 5px !important;
margin-bottom: 5px !important;
}
 
#side-bar div.menu-item .text, #side-bar div.menu-item a, #side-bar div.menu-item a:visited{
background-color: rgb(var(--dark-gray-monochrome)) !important;
    background-image: var(--paper-texture) !important;
  background-repeat: repeat;
  background-position: center;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-left: none !important;
border-bottom: none !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
margin-top: 5px !important;
}
 
#side-bar div.menu-item input.text{
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent));
}
 
/*Page*/
 
.page-source{
font-family: 'Raleway', sans-serif;
}
 
/*table*/
 
table, th, td, tr {
background-image: var(--paper-texture);
background-color: rgb(var(--white-monochrome)) !important;
border-collapse: separate !important;
border-image: var(--gold-foil) 6 round !important;
border-width: 2px !important;
}
 
#page-content div.b-tables table.wiki-content-table td, #page-content table.wiki-content-table td{
background-image: var(--paper-texture) !important;
border-image: var(--gold-foil) 6 round !important;
}
 
#page-content div.b-tables table.wiki-content-table th, #page-content table.wiki-content-table th{
background-image: var(--paper-texture) !important;
border-image: var(--gold-foil) 6 round !important;
border-width: 2px !important;
}
 
/*tabs*/
 
yui-navset yui-navset-top{
border: none !important;
background-image: var(--paper-texture);
background-color: rgb(var(--gray-monochrome)) !important;
}
.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content{
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-bottom: none !important;
box-shadow: 5px 5px 5px rgba(var(--shadow-accent)) !important;
background-image: var(--paper-texture);
background-color: rgb(var(--gray-monochrome)) !important;
}
 
.yui-navset .yui-nav li, .yui-navset .yui-nav li a, .yui-navset .yui-nav li a::before{
border-radius: 0;
}
 
.yui-navset .yui-nav a:before{
 
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
box-shadow: 0px 5px 5px rgba(var(--shadow-accent));
background-image: var(--paper-texture);
background-color: rgb(var(--gray-monochrome)) !important;
}
 
@-webkit-keyframes tab-active {
    0% {
        margin-top: 0;
        margin-right: 0;
        padding-top: 0;
    }
 
    100% {
        margin-top: 0em;
        margin-right: 0;
        padding-top: 0em;
    }
}
@keyframes tab-active {
    0% {
        margin-top: 0;
        margin-right: 0;
        padding-top: 0;
    }
 
    100% {
        margin-top: 0em;
        margin-right: 0;
        padding-top: 0em;
    }
}
 
.code {
  background-repeat: repeat;
  background-position: center;
background-color: rgb(var(--light-pale-gray-monochrome)) !important;
color: rgb(var(--dark-accent)) !important;
padding:15px;
background-image: var(--paper-texture);
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
box-shadow: inset 5px 5px 5px rgba(var(--shadow-accent)) !important;
}
 
.code * {
font-family: 'Merienda', cursive !important;
}
 
.hl-var{
color: var(--gray-monochrome);
}
 
.hl-special, .hl-string{
color: var(--dark-gray-monochrome);
}
 
.hl-number{
color: var(--light-gray-monochrome);
}
.hl-reserved{
color: var(--light-gray-monochrome);
}
 
div.page-watch-options a, div.page-watch-options a:visited{
--hover-link-color: var(--dark-accent);
}
 
#content-wrap {
background-color: rgb(var(--white-monochrome)) !important;
background-image: var(--paper-texture) !important;
}
 
.content.modal-body{
color: rgb(var(--black-monochrome));
}
 
body {
background-color: rgb(var(--white-monochrome)) !important;
background-image: var(--paper-texture) !important;
}
#page-content{
font-size: 18px;
}
 
/*Editor*/
#main-content{
--editor-icon-color: var(--dark-accent);
}
 
.page-rate-widget-box {
    background-image: var(--paper-texture) !important;
    background-color:  rgb(var(--gray-monochrome)) !important;
  background-repeat: repeat;
  background-position: center;
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent));
}
 
.wd-editor-toolbar-panel{
padding: 10px !important;
}
 
form#edit-page-form .wd-editor-toolbar-panel{
border: none !important;
}
 
form#edit-page-form .wd-editor-toolbar-panel div>ul>li>ul a{
    background-image: var(--paper-texture) !important;
  background-repeat: repeat;
background-color: rgb(var(--gray-monochrome)) !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
border-left: none !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-bottom: none !important;
font-family: 'Raleway', sans-serif;
}
 
form#edit-page-form .wd-editor-toolbar-panel a{
    background-image: var(--paper-texture) !important;
  background-repeat: repeat;
background-color: rgb(var(--dark-gray-monochrome)) !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-bottom: none !important;
font-family: 'Raleway', sans-serif;
}
 
form#edit-page-form, form#edit-page-form :not(#edit-page-textarea)>tbody>tr{
border: none !important;
font-family: 'Raleway', sans-serif;
}
 
form#edit-page-form #edit-page-textarea{
 
font-family: 'Raleway', sans-serif!important;
}
 
textarea#edit-page-comments{
color: rgb(var(--dark-accent)) !important;
font-family: 'Raleway', sans-serif;
}
textarea:not(:placeholder-shown){
font-family: 'Raleway', sans-serif;
    background-image: var(--paper-texture) !important;
  background-repeat: repeat;
background-color: rgb(var(--light-pale-gray-monochrome));
color: rgb(var(--dark-accent));
box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent)) !important;
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-radius: 0px;
font-family: 'Merienda', cursive;
}
 
:not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a, :not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form) > input.button, :not(.page-rate-widget-box):not(#search-top-box-form) > button, :not(.page-rate-widget-box):not(#search-top-box-form) > .button, :not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form) > input.button, :not(.page-rate-widget-box):not(#search-top-box-form) > button, :not(.page-rate-widget-box):not(#search-top-box-form) > .btn{
border-radius: 0px;
    background-image: var(--paper-texture) !important;
  background-repeat: repeat;
background-color: rgb(var(--dark-gray-monochrome)) !important;
color: rgb(var(--dark-accent));
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
font-family: 'Merienda', cursive;
border-right: none !important;
border-bottom: none !important;
}
 
.wd-editor-toolbar-panel{
border-top: 0px;
border-left: 0px;
border-bottom: 0px;
box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent)) !important;
    background-image: var(--paper-texture) !important;
    background-color: rgb(var(--swatch-menubg-color)) !important;
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
}
form#edit-page-form table.form:first-of-type td:last-of-type input:not(:placeholder-shown) {
background-color: rgb(var(--dark-gray-monochrome));
background-image: var(--paper-texture) !important;
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
border-radius: 0px;
font-family: 'Raleway', sans-serif;
}
 
form#edit-page-form:not(.data-form){
 
background-color: rgb(var(--gray-monochrome));
background-image: var(--paper-texture) !important;
}
 
form#edit-page-form .wd-editor-toolbar-panel a{
color: rgb(var(--dark-accent));
}
 
form#edit-page-form{
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent));
}
 
form#edit-page-form .edit-page-bottomtable tr>td:first-of-type>div:first-of-type textarea:not(:placeholder-shown) {
    background-color: rgba(var(--dark-gray-monochrome));
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent));
}
 
/*Footer*/
 
.footnotes-footer{
background-image: var(--paper-texture);
    background-color: rgba(var(--gray-monochrome));
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-bottom: none !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
 
}
.footnotes-footer a[href*=javascript]:before{
color: rgb(var(--dark-accent));
}
 
#footer{
    --footer-link-hover-color: var(--dark-accent);
}
 
#license-area {
--license-link-hover-color: var(--dark-accent);
}
 
div#footer{
background-image: var(--paper-texture);
background-color: rgb(var(--gray-monochrome));
box-shadow: inset 0px 3px 3px rgba(var(--shadow-accent));
}
 
#license-area {
background-image: var(--paper-texture);
box-shadow: inset 0px 3px 3px rgba(var(--shadow-accent));
 
}
 
/*Listpages more by author*/
.authorname{
color: rgb(var(--black-monochrome)) !important;
}
 
.collection .collapsible-block-unfolded-link {
    border: none;
background-color: rgb(var(--white-monochrome));
    background-image: var(--paper-texture);
}
.collection>.collapsible-block {
    background-image: var(--gold-foil);
    border: none;
    background-color: rgb(var(--black-monochrome));
    text-align: center
}
 
.collection .collapsible-block-unfolded-link a, .collection .collapsible-block-folded a {
    color: rgb(var(--black-monochrome));
}
 
.collection .collapsible-block-folded {
    border: none;
    background-color: rgb(var(--white-monochrome));
    background-image: var(--paper-texture);
}

Footnotes

1. This is a footnote!