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
--dull-accent
99, 138, 117
--vibrant-green
68, 150, 96
--light-grey
130, 150, 130
To use this theme, type the following:
[[include :backrooms-pantheon: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
Footnote
Bold
Italic
Underline
Strikethrough
Super
script
Sub
script
Teletype
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 |
Wooo this is what a tab looks like!
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.
@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-pantheon.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-pantheon.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);
}
[[iftags +component]]
This component is from the SCP Wiki, and was uploaded there by
CityToast. It is licensed under CC-BY-SA 3.0. It has been modified for this wiki by scutoid studios.
The license box is an easy way for people to know how to credit you as well as an easy way to properly source images. License boxes are a requirement for all pages on the wiki.
Component Base:
[[include component:license-box]]
=====
> **Name:**
> **Author:**
> **License:**
> **Source Link:**
> **Derivative of:** (If applicable)
> **Additional Notes:** (Optional)
=====
[[include component:license-box-end]]
How to Use the License Box
Step 1:
At the bottom of the page, below the wikiwalk footer, put this piece of code:
[[include component:license-box]]
=====
=====
[[include component:license-box-end]]
If you have footnotes, add [[footnoteblock]] above the licensebox code like so:
[[footnoteblock]]
[[include component:license-box]]
=====
=====
[[include component:license-box-end]]
Step 1.5 (optional):
If you have images or other forms of media, put this block of code between the equal signs:
> **Name:**
> **Author:**
> **License:**
> **Source Link:**
> **Derivative of:** (If applicable)
> **Additional Notes:** (Optional)
If you have more than one piece of media, you'll do this multiple times.
These are required in the license box.
- "Name" is the title of the media.
- "Author" is whoever created it. If you made it, put your wikidot username.
- "License" is the license it's under. Put it exactly as it says. If it says CC BY SA 2.0, then put CC BY SA 2.0.
- "Source Link" is where you found it. If you created it, put the URL of the page it's on.
These are optional in the license box.
- "Derivative of" If you Photoshopped a variety of images to create a new image or did something similar, you would list them all here.
- Additional Notes" If you cropped an image or edited it somehow, you would list those changes here.
You can also use this handy box-ify-er to make the process simpler:
Notes:
- Once put all together, it should look like the component base.
- You cannot use some modules, including CSS, HTML, and listpages, inside the license section. You also cannot use collapsibles or tables.
- If your footnotes are appearing after the license section, remember to add [[footnoteblock]] above the license template.
- Do not copy or move the ===== elements. Only have one pair, and place that pair below and above the includes.
Step 2
Add the _licensebox tag to the page.
Step 3 (optional):
You can change the name of the author in the pre-generated attribution by specifying the author variable |author=. This is particularly useful for co-authored works, works in which you wish to be credited under another alias, or works which are attributed via metadata. Add the variable like this:
[[include component:license-box
|author=YourAliasHere]]
This is the actual component, ignore it:
[[/iftags]]