Enchanted Forest

Info

This theme was made by ReyDay.

Credit to the themes Pomona(by ghostchibi) and To Wish Upon A Dream(by MC_Crafter_24_7), I used these themes to help with certain aspects of the code. Pomona I used for the divs and TWUAD I used for the SD classes.

also HUGE thanks to cakelord114514 for helping me figure out the code for the horizontal rule and a few other things, could not have done this without them.

This was techlit by MyrandFox

Close

--dull-accent
99, 138, 117

--dark-green
9, 35, 29

--vibrant-green
68, 150, 96

--bark-green
21, 60, 56

--link-green
48, 100, 76

--light-grey
130, 150, 130

---

To use this theme, type the following:

[[include :backrooms-wiki:theme:enchanted-forest]]

My cat, his name is Twix :DDD

Is it just me or is green + cyan combo just SO PRETTY?!?!?!?!?!?

The fonts used are as follows:

Lobster

Milonga
Fantasque Sans Mono

This is what a horizontal rule looks like! Wait…why is it different?

---

This is a special hr! type the following to put this in your article:

[[div class="vine-hr"]]
----
[[/div]]

Header

Header

Header

Header

Header

Header

Collapsible

:)))

Footnote¹
Bold
Italic
Underline
Strikethrough
Super^script
Sub_script
Teletype

• Bulleted list

Links that don’t exist
Links that do exist!

And this is what a normal hr looks like!

---

This is a blockquote! You can get this by typing “>” before your text.
These

are

nesting

blockquotes

[[div class="lightblock"]]

[[/div]]

[[div class="styled-quote"]]

[[/div]]

[[div class="darkblock"]]

[[/div]]

[[div class="dark-styled-quote"]]

[[/div]]

[[div class="vibe-box"]]

[[/div]]

[[div class="dark-box"]]

[[/div]]

[[div class="light-grey-frame"]]

[[/div]]

[[div class="dark-grey-frame"]]

[[/div]]

[[div class="dull-grey-frame"]]

[[/div]]

[[div class="vineblock"]]

[[/div]]

*Note: You may have to re-edit the code for this div based on the length of your text.

Code:
.vineblock {
border: 35px solid transparent;
padding: 0.01rem 1rem;
border-image: url(http://backrooms-sandbox-2.wikidot.com/local--files/theme-test-preview-cakelord/vineblock_mods.png);
border-image-slice: 900 900 900 900; /*you will have to edit this for the repeat lengths*/
border-image-width: 20% 20% 20% 20%; /*you will have to edit this for the border width*/
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round;
}

Feel free to code your own div as well with the color scheme! Here's the base code:

.div-name {
color: rgb(var(variable)); /* Replace "variable" with the variable you want */
background: rgba(var(variable), 0.5); /* Replace "variable" with the variable you want, and replace "0.5" with the opacity you want. */
padding: 0.01rem 1rem; /* Standard length/width stuff, you will most likely not change this. */
margin: 0.5rem 0; /* Standard length/width stuff, you will most likely not change this. */
box-shadow: var(variable); /* Replace "variable" with the variable you want. */
border: 4px rgb(var(variable)) solid; /* This is the border, replace "variable" with the variable you want, and you can replace "solid" with "ridge" to make it look like a frame! */
}

This is a table	And another section of the table
Look at how cool this looks!	Aren't I just amazing for coding this theme? :D

Tab 1

Wooo this is what a tab looks like!

Tab 2

This is another tab!

This tab is really long for no apparent reason!

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.

---

SURVIVAL DIFFICULTY:

Class 0

• {$one}
• {$two}
• {$three}

SURVIVAL DIFFICULTY:

Class 1

• {$one}
• {$two}
• {$three}

SURVIVAL DIFFICULTY:

Class 2

• {$one}
• {$two}
• {$three}

SURVIVAL DIFFICULTY:

Class 3

• {$one}
• {$two}
• {$three}

SURVIVAL DIFFICULTY:

Class 4

• {$one}
• {$two}
• {$three}

SURVIVAL DIFFICULTY:

Class 5

• {$one}
• {$two}
• {$three}

SURVIVAL DIFFICULTY:

Class unknown

• {$one}
• {$two}
• {$three}

SURVIVAL DIFFICULTY:

Class habitable

• {$one}
• {$two}
• {$three}

+ Theme Code

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Milonga&display=swap');
@import url("https://backrooms-wiki.wikidot.com/component:fantasque-sans-mono/code/1");

:root {
—wallpaper-mask: none;
—theme-id: "enchanted-forest";
—theme-name: "Enchanted Forest";

/* Header */
—logo-image: url("http://backrooms-wiki.wikidot.com/local--files/component:theme/logo.svg");
—header-title: "The Backrooms";
—header-subtitle: "An infinite expanse for infinite wonder";

/* Fonts */
—body-font: 'Milonga', serif;
—header-font: 'Lobster', sans-serif;
—title-font: 'Lobster', sans-serif;
—mono-font: 'Fantasque Sans Mono', monospace;

font-family: 'Milonga', serif;
font-family: 'Lobster', sans-serif;
font-family: ‘Fantasque Sans Mono’, monospace;

/* Colors */
--white-monochrome: var(--white-accent);
--pale-gray-monochrome: var(--light-green);
--light-gray-monochrome: var(--dull-accent);
--gray-monochrome: var(--dull-accent);
--black-monochrome: var(--dark-green);
--bright-accent: var(--dull-accent);
--medium-accent: var(--vibrant-green);
--dark-accent: var(--dark-green);
--pale-accent: var(--link-green);
--visited-link-color: var(--bark-green);
--alt-accent: var(--vibrant-green);
--hover-link-color: var(--dull-accent);

/* Variables */
--light-green: 136, 185, 143;
--dull-accent: 99, 138, 117;
--dark-green: 9, 35, 29;
--white-accent: 245, 255, 245;
--vibrant-green: 68, 150, 96;
--bark-green: 21, 60, 56;
--link-green: 48, 100, 76;
--light-grey: 130, 150, 130;

/* Swatches */
--swatch-background: var(--light-green);
--swatch-primary: var(--dark-green);
--swatch-secondary-color: var(--dull-accent);

--swatch-text-general: var(--dark-green);
--swatch-important-text: var(--link-green);

--swatch-menubg-color: var(--dull-accent);
--swatch-menutxt-dark-color: var(--white-accent);
--swatch-menutxt-general-color: var(--dark-green);
--swatch-border-color: var(--dull-accent);
--footnotes-footer-bg-color: var(--white-accent);

--swatch-headerh1-color: var(--white-accent);
--swatch-headerh2-color: var(--white-accent);
--swatch-topmenu-border-color: var(--light-green);
--swatch-topmenu-bg-color: var(--dark-green);

}

/* Tabview + Footnotes */
#main-content {
--tabs-hover-bg: var(--white-accent);
--tabs-selected-bg: var(--dark-green);
--tabs-selected-outline: var(--white-accent);
--tabs-bottom-border-color: var(--bark-green);
--footnotes-footer-colorbar-color: var(--bark-green);
--footnotes-footer-title-bg-color: var(--dark-green);
}
/* Scrollbar */
html, body {
color: rgb(var(—swatch-text-general));
font-variant-ligatures: none;
scrollbar-color: rgb(99, 138, 117) rgb(9, 35, 29);
margin: 0;
padding: 0;
}

/* Banner */
#skrollr-body {
height: 11rem;
width: 100vw;
background: url(http://backrooms-sandbox-2.wikidot.com/local--files/theme:reyday-enchanted-forest-theme/Forest1) top center repeat-x;
background-size: 100%;
}

#container {
background-size: 30rem 37rem;h
background-attachment: scroll;
}

@media only screen and (max-width:1366px){

#skrollr-body {
height: 11rem;
width: 100vw;
background: url(http://backrooms-sandbox-2.wikidot.com/local--files/theme:reyday-enchanted-forest-theme/Forest1) top center repeat-x;
background-size: 115%;

}

}

@media only screen and (max-width:1000px){

#skrollr-body {
height: 11rem;
width: 100vw;
background: url(http://backrooms-sandbox-2.wikidot.com/local--files/theme:reyday-enchanted-forest-theme/Forest1) top center repeat-x;
background-size: 310%;

}

}
/* Top Bar */
#top-bar {
--dropdown-bg-color: var(--light-green);
}
/* Divs */
.styled-quote {
border-left: solid 6px rgb(var(--bark-green));
}

.darkblock {
background: rgb(0, 0, 0);
}

.dark-styled-quote {
background: rgb(0, 0, 0);
border-left: solid 6px rgb(var(--bark-green));
}

/* Custom Divs */
.vibe-box {
color: rgb(var(--dark-green));
background: rgba(var(--vibrant-green), 0.5);
padding: 0.01rem 1rem;
margin: 0.5rem 0;
box-shadow: var(--dull-accent);
border: 4px rgb(var(--bark-green)) solid;
}

.dark-box {
color: rgb(var(--light-green));
background: rgba(var(--dark-green));
padding: 0.01rem 1rem;
margin: 0.5rem 0;
box-shadow: var(--dull-accent);
border: 4px rgb(var(--bark-green)) solid;
}

.light-grey-frame {
color: rgb(var(--dark-green));
background: rgba(var(--white-accent));
padding: 0.01rem 1rem;
margin: 0.5rem 0;
box-shadow: var(--dull-accent);
border: 0.8rem rgb(var(--light-grey)) ridge;
}

.dark-grey-frame {
color: rgb(var(--white-accent));
background: rgba(var(--dark-green));
padding: 0.01rem 1rem;
margin: 0.5rem 0;
box-shadow: var(--dull-accent);
border: 0.8rem rgb(var(--light-grey)) ridge;
}

.dull-grey-frame {
color: rgb(var(--dark-green));
background: rgba(var(--dull-accent));
padding: 0.01rem 1rem;
margin: 0.5rem 0;
box-shadow: var(--dull-accent);
border: 0.8rem rgb(var(--light-grey)) ridge;
}

.vineblock {
border: 35px solid transparent;
padding: 0.01rem 1rem;
border-image: url(http://backrooms-sandbox-2.wikidot.com/local--files/theme-test-preview-cakelord/vineblock_mods.png);
/* border-image-repeat: round; */
border-image-slice: 700 700 700 700;
border-image-width: 10% 10% 10% 10%;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round;
}
@media only screen and (max-width:1366px){
.vineblock {
border: 35px solid transparent;
padding: 0.01rem 1rem;
border-image: url(http://backrooms-sandbox-2.wikidot.com/local--files/theme-test-preview-cakelord/vineblock_mods.png);
border-image-slice: 900 900 900 900;
border-image-width: 20% 20% 20% 20%;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round;
}

}

@media only screen and (max-width:1000px){
.vineblock {
border: 35px solid transparent;
padding: 0.01rem 1rem;
border-image: url(http://backrooms-sandbox-2.wikidot.com/local--files/theme-test-preview-cakelord/vineblock_mods.png);
border-image-slice: 900 900 900 900;
border-image-width: 20% 20% 20% 20%;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round;
}

}
/* Horizontal Rule */
hr{
border-top: 4px double rgb(var(--dull-accent));
text-align: center;
background-color: rgba(var(—dull-accent));
}

.vine-hr{
margin: 0 0 50px 0;
}

.vine-hr hr {
height: 42px;
border: none !important;
}

.vine-hr hr::after {
content: " ";
display: block;
background: url(http://backrooms-sandbox-2.wikidot.com/local--files/theme-test-preview-cakelord/Untitled355_20240206160835-export.png) no-repeat top;
height: 42px;
background-size: 100%;
background-position: bottom;
}

/* SD Classes! */
.sd-container {
—sd-border:59,59,59;
}

.top-box {
border-color: rgb(59, 54, 59) !important;
}

.bottom-box ul li {
color: rgb(59, 54, 59) !important;
}

.bottom-box ul li:before {
background: rgb(59, 54, 59) !important;
}

.top-box .gradient-box {
background: linear-gradient(90deg, rgba(59, 54, 59, 1) 0%, rgba(59, 54, 59, 0) 36%) !important;
}

.header-diamond {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 300.9 284.5' style='enable-background:new 0 0 300.9 284.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%233b363b;%7D .st1%7Bfill:%233b363b;%7D%0A%3C/style%3E%3Cg%3E%3Cpolygon class='st1' points='73.4,32.6 0,105.4 13.6,105.4 86.4,32.6 '/%3E%3Cpolygon class='st1' points='26.5,105.4 40.1,105.4 112.9,32.6 99.3,32.6 '/%3E%3C/g%3E%3Cpolyline class='st1' points='287.3,105.4 214.5,32.6 227.5,32.6 287.3,91.9 '/%3E%3Cpolygon class='st1' points='274.4,105.4 260.8,105.4 188,32.6 201.6,32.6 '/%3E%3C/svg%3E") !important;
}

.top-box.class-unknown .header-diamond { filter: none !important; }
.top-box.class-unknown:before, .top-box.class-unknown .header-diamond .diamond-pattern{ opacity: 0.15 !important; }

.top-box .header-diamond .diamond-image {
filter: brightness(0%) invert(100%);
}

.top-box.class-0,
.header-diamond .diamond-color.class-0 {
background: rgb(184, 243, 208) !important;
}

.top-box.class-1,
.header-diamond .diamond-color.class-1 {
background: rgb(126, 206, 159) !important;
}

.top-box.class-2,
.header-diamond .diamond-color.class-2 {
background: rgb(61, 152, 99) !important;
}

.top-box.class-3,
.header-diamond .diamond-color.class-3 {
background: rgb(46, 127, 80) !important;
}

.top-box.class-4,
.header-diamond .diamond-color.class-4 {
background: rgb(35, 91, 58) !important;
}

.top-box.class-5,
.header-diamond .diamond-color.class-5 {
background: rgb(2, 48, 23) !important;
}

.top-box.class-unknown,
.header-diamond .diamond-color.class-unknown {
background: rgb(59, 64, 59) !important;
}

.top-box.class-habitable,
.header-diamond .diamond-color.class-habitable {
background: rgb(214, 255, 231) !important;
}

/* License Box Color */
#page-content .licensebox .collapsible-block-link {
color: var(—dark-green);
}

---

‡ Licensing / Citation

Cite this page as:

"Enchanted Forest" by ReyDay, from the Backrooms Wiki. Source: https://backrooms-wiki.wikidot.com/theme:enchanted-forest. Licensed under CC-BY-SA-3.0.

[[iftags +component]]

Colmod was originally created by Boyu12 and is licensed under CC BY-SA 3.0

The following pages make up the Colmod component

• Coltop
• Coltop Deep
• Colbottom
• Colbottom Deep
• Colstyle

[[/iftags]]

• • _
  + Embed citation as HTML- Embed citation as HTML

  "<a href="https://backrooms-wiki.wikidot.com/theme:enchanted-forest">Enchanted Forest</a>" by ReyDay, from the <a href="https://backrooms-wiki.wikidot.com">Backrooms Wiki</a>. Source: <a href="https://backrooms-wiki.wikidot.com/theme:enchanted-forest">https://backrooms-wiki.wikidot.com/theme:enchanted-forest</a>. Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA-3.0</a>.

  [[iftags +component]]

  Colmod was originally created by Boyu12 and is licensed under CC BY-SA 3.0
  The following pages make up the Colmod component

  • Coltop
  • Coltop Deep
  • Colbottom
  • Colbottom Deep
  • Colstyle

  [[/iftags]]

---

Name: Green Fantasy Forest (edited by ReyDay)
Author: N/A
License: Public Domain
Source: https://pngtree.com/freebackground/fantasy-forest-green-background_308886.html

Name: Picture of Twix
Author: ReyDay(me)
License: CC-BY-SA 3.0
Source: My phone camera

For more information about on-wiki content, visit the Licensing Master List.

Footnotes

1. weeeee