[[include :backrooms-wiki:theme:super-liminal]]
Info
Super Liminal is a Wikidot theme created by
Ambersight. While having a similar layout to Old Liminal Theme, the theme actually has a completely different structure, and is intended to serve as the base of more themes in future. Super Liminal provides multiple presettings, and a huge amount of CSS variables that can be easily changed. Read the following content to know about how to modefy the theme. Comparing to Nuliminal or Old Liminal, Super Liminal features:
- A simpler layout
- Optimized font size and image blocks on mobile devices
- No Pseudo-element animations
- More CSS variables
- A flatter design style
- Many other tiny fixes and moderations
Examples
⚠️ Content Warnings ⤴
This is a Rate-with-credit component. To add the component, use the following code:
[[include :backrooms-wiki:component:open]]
Your content
[[include :backrooms-wiki:component:close]]
Add |cw=1 to the component:open to add the "Content Warning" sign.
The first picture ever taken of Level 0.
Level 0 is a non-linear space, resembling the back rooms of a retail outlet. Similar to its previous form, all rooms in Level 0 appear uniform and share superficial features such as a yellowish wallpaper, damp carpet, and inconsistently placed fluorescent lighting. However, no two rooms within the level are identical.
Title #1
Title #2
Title #3
- Numberred List
- Number two
This is the second tab. To create a tabview, use:
[[tabview]]
[[tab The first tab]]
content
[[/tab]]
[[tab The second tab]]
content
[[/tab]]
[[/tabview]]
Thank you for using Super Liminal theme (or just spending time reading this XD)! It really took
Ambersight a long time to make it.
If you're interested with my other themes, take a look at my Author Page!
(Note: I'm not sure whether I have got an author page when you're reading this.)
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.
This is a |
table |
to make |
these |
ask a hacker for help |
> blockquote
[[div class="blockquote"]]
[[code]]
[[div class="code"]]
[[div class="lightblock"]]
[[div class="darkblock"]]
[[div class="styled-quote"]]
[[div class="dark-styled-quote"]]
[[note]]
The wall was YELLOW!!!
[[span class="bblock"]]
[[span class="dblock"]]
[[span class="keycap"]]
[[span class="ruby"]][[span class="rt"]]
[[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 :backrooms-wiki:component:license-box]]
=====
> **Name:**
> **Author:**
> **License:**
> **Source Link:**
> **Derivative of:** (If applicable)
> **Additional Notes:** (Optional)
=====
[[include :backrooms-wiki: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 :backrooms-wiki:component:license-box]]
=====
=====
[[include :backrooms-wiki:component:license-box-end]]
If you have footnotes, add [[footnoteblock]] above the licensebox code like so:
[[footnoteblock]]
----
[[include :backrooms-wiki:component:license-box]]
=====
=====
[[include :backrooms-wiki: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 various aspects of the default message of the component with a few parameters! These are the customizable features:
- author= This allows you to change the name of the author that appears. This is great for co-written pages or translations. This defaults to the person who created the page.
- license= This allows you to change the license of the page if need be. Note that this can only be changed to variants of the CC BY-SA License. This defaults to 3.0.
- url= This allows you to change the url that appears in the message if this page is a derivative of another page. Once again, very useful for translations. This defaults to the page link.
- origin= This is the first part of changing where the message says where the page originates. Again, useful for translations or derivatives of other works. This defaults to “Backrooms Wiki”.
- origin-link= This is the second part of the where the message says where the page originates. This defaults to a link to our site’s homepage.
[[include :backrooms-wiki:component:license-box
|author=Text here
|license=Text here
|url=Text here
|origin=Text here
|origin-link=Text here
]]
This is the actual component, ignore it:
[[/iftags]]
Cite this page as:
[[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
[[/iftags]]
-
"<a href="https://backrooms-wiki.wikidot.com/theme:super-liminal">Super Liminal Theme</a>" by Ambersight, from the <a href="http://backrooms-wiki.wikidot.com/">Backrooms Wiki</a>. Source: <a href="https://backrooms-wiki.wikidot.com/theme:super-liminal">https://backrooms-wiki.wikidot.com/theme:super-liminal</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
[[/iftags]]
For more information about on-wiki content, visit the Licensing Master List.
Presettings
Super Liminal provides multiple presettings for you to modify its layout. To apply a presetting, change your include code to:
[[include :backrooms-wiki:theme:super-liminal
|Presetting 1
|Presetting 2
]]
Layout: Wide Page
Make your page wider. Attention: this page itself is an example of wide page.
Layout: Remove the Title
Remove the title of the page. You can still make a fake title via .meta-title.
Layout: Show Sidebar
Always show the sidebar on the left. When the size of browser window is shorter than 1024px, the sidebar will still be folded.
Palette: Daytime
The classic style of black and white.
Palette: Nightmare
Who turned off the light?
Customize the Theme
Super Liminal provides plenty of CSS variables that can be changed. If you wish to change some of them, use the following code:
[[module CSS]]
:root {
--variable 1: value;
--variable 2: value;
...
--variable n: value;
}
[[/module]]
WARNING: the other tabs are very long.
[[module CSS]]
:root {
/* Basic Colors */
--background-color: 237, 233, 223;
--text-color: 25, 20, 16;
/* Deco Colors */
--light-color-1: var(--background-color);
--light-color-2: 255, 251, 240;
--dark-color-1: 160, 160, 160;
--dark-color-2: 140, 136, 126;
--dark-color-3: 72, 69, 60;
--dark-color-4: 48, 48, 52;
/* Special Colors */
--warning-color: 193, 44, 50;
--accept-color: 20, 169, 32;
--neutral-color: 193, 147, 44;
--warning-text-color: var(--light-color-2);
--accept-text-color: var(--warning-text-color);
--neutral-text-color: var(--warning-text-color);
/* Link Colors */
--link-color: 230, 23, 68;
--hover-link-color: 187, 0, 34;
--visited-link-color: 150, 24, 43;
--newpage-color: 221, 102, 17;
/* Select Colors */
--selected-background-color: 67, 98, 197;
--selected-text-color: 253, 253, 253;
/* Scrollbar Colors */
--scrollbar-color: var(--dark-color-1), 0.75;
--scrollbar-background-color: var(--dark-color-1), 0.15;
/* Note Colors */
--note-background-color: 255, 242, 114;
--note-text-color: 24, 27, 27;
--note-border-color: 24, 27, 27, 0.5;
}
[[/module]]
[[module CSS]]
:root {
/* General Colors */
--general-light-background-color: var(--light-color-2);
--general-light-text-color: var(--text-color);
--general-medium-background-color: var(--dark-color-2);
--general-medium-text-color: var(--light-color-1);
--general-dark-background-color: var(--dark-color-3);
--general-dark-text-color: var(--light-color-1);
--general-shadow-color: var(--text-color);
--general-light-border-color: var(--dark-color-3), 0.08;
--general-medium-border-color: var(--dark-color-3), 0.2;
--general-strong-border-color: var(--dark-color-3), 0.5;
--general-dark-border-color: var(--dark-color-3);
--general-blur: 0.15rem;
--general-transition-time-fast: 0.2s;
--general-transition-time-slow: 0.3s;
/* General Buttons */
--general-button-text-color: var(--general-medium-text-color);
--general-button-background-color: var(--general-medium-background-color);
--general-hover-button-text-color: var(--general-dark-text-color);
--general-hover-button-background-color: var(--general-dark-background-color);
}
[[/module]]
[[module CSS]]
:root {
/* Header Colors */
--header-background-bottom: var(--general-dark-background-color);
--header-background-top: var(--general-dark-background-color), 0.9;
--header-background-image: linear-gradient(to top, rgba(var(--header-background-bottom)) var(--topbar-height), rgba(var(--header-background-top)) 100%);
--header-extra-background-image: radial-gradient(circle, rgba(var(--general-dark-background-color)) 50%, transparent 0);
--header-text-color: var(--general-dark-text-color);
--header-text-shadow-color: var(--general-shadow-color);
/* Topbar Colors */
--topbar-text-color: var(--light-color-1);
--topbar-hover-text-color: var(--topbar-text-color);
--topbar-background-color: 0, 0, 0, 0;
--topbar-hover-background-color: var(--dark-color-4);
--topbar-hover-border-color: var(--dark-color-2), 0.5;
--topbar-drop-text-color: var(--light-color-1);
--topbar-drop-hover-text-color: var(--general-medium-text-color);
--topbar-drop-background-color: var(--dark-color-4), 0.93;
--topbar-drop-hover-background-color: var(--general-medium-background-color);
--topbar-drop-border-color: var(--text-color);
--topbar-drop-border-width: calc(4rem / 45);
--topbar-drop-shadow-color: var(--general-shadow-color), 0.5;
/* User Account Colors */
--header-username-color: var(--dark-color-1);
--account-button-text-color: var(--general-dark-background-color);
--account-button-hover-text-color: var(--general-medium-text-color);
--account-button-background-color: var(--general-dark-text-color);
--account-button-hover-background-color: var(--general-medium-background-color);
--account-drop-text-color: var(--general-light-text-color);
--account-drop-hover-text-color: var(--general-medium-text-color);
--account-drop-background-color: var(--general-light-background-color);
--account-drop-hover-background-color: var(--general-medium-background-color);
--account-drop-border-color: var(--general-dark-border-color);
/* Search Button Colors */
--search-button-text-color: var(--account-button-text-color);
--search-button-hover-text-color: var(--account-button-hover-text-color);
--search-button-background-color: var(--account-button-background-color);
--search-button-hover-background-color: var(--account-button-hover-background-color);
/* Page Title Colors */
--page-title-text-color: var(--text-color);
--page-title-border-color: var(--general-dark-border-color);
/* Page Tag Colors */
--page-tag-border-color: var(--general-medium-background-color);
--page-tag-title-color: var(--general-medium-text-color);
--page-tag-text-color: var(--text-color);
--page-tag-hover-text-color: var(--general-dark-text-color);
--page-tag-background-color: var(--dark-color-2), 0.2;
--page-tag-hover-background-color: var(--general-dark-background-color);
/* Page Option Colors */
--page-option-text-color: var(--general-button-text-color);
--page-option-hover-text-color: var(--general-hover-button-text-color);
--page-option-background-color: var(--general-button-background-color);
--page-option-hover-background-color: var(--general-hover-button-background-color);
/* Footer Colors */
--footer-text-color: var(--general-medium-text-color);
--footer-background-color: var(--general-medium-background-color);
--license-background-color: var(--light-color-1);
--license-text-color: var(--dark-color-3);
--license-link-color: var(--license-text-color);
/* Sidebar Colors */
--sidebar-handle-text-color: var(--general-dark-text-color);
--sidebar-handle-background-color: var(--general-dark-background-color);
--sidebar-background-color: var(--light-color-1);
--sidebar-media-background-color: var(--text-color), 0.15;
--sidebar-media-icon-color: var(--dark-color-3);
--sidebar-title-background-color: var(--general-dark-background-color), 0.5;
--sidebar-title-text-color: var(--general-dark-text-color);
--sidebar-title-shadow-color: var(--general-shadow-color);
--sidebar-text-color: var(--text-color);
--sidebar-hover-text-color: var(--sidebar-text-color);
--sidebar-border-color: var(--general-light-border-color);
--sidebar-hover-background-color: var(--text-color), 0.15;
/* Action Colors */
--action-area-border-color: var(--general-light-border-color);
--action-area-subtext-color: var(--text-color), 0.75;
--action-area-info-background-color: var(--general-medium-background-color);
--action-area-info-text-color: var(--general-medium-text-color);
--page-source-background-color: var(--general-light-background-color);
--page-source-text-color: var(--general-light-text-color);
/* Edit Area Colors */
--edit-area-background-color: var(--dark-color-2), 0.15;
--edit-area-text-color: var(--text-color);
--edit-area-textarea-text-color: var(--general-light-text-color);
--edit-area-textarea-background-color: var(--general-light-background-color);
--edit-area-textarea-border-color: var(--general-dark-border-color);
--edit-area-info-background-color: var(--action-area-info-background-color);
--edit-area-info-text-color: var(--action-area-info-text-color);
--edit-area-button-background-color: var(--general-button-background-color);
--edit-area-button-text-color: var(--general-button-text-color);
--edit-area-hover-button-background-color: var(--general-hover-button-background-color);
--edit-area-hover-button-text-color: var(--general-hover-button-text-color);
/* Hovertip Colors */
--hovertip-background-color: var(--general-light-background-color);
--hovertip-text-color: var(--general-light-text-color);
--hovertip-border-color: var(--general-dark-border-color);
/* Image Block Colors */
--imageblock-caption-background-color: var(--general-light-background-color);
--imageblcok-caption-text-color: var(--general-light-text-color);
--imageblock-shaodw-color: 0, 0, 0, 0;
--imageblock-border-color: var(--general-medium-border-color);
/* Header & Horizon Colors */
--h1-color: var(--text-color);
--h2-color: var(--text-color);
--h3-color: var(--text-color);
--h4-color: var(--text-color);
--h5-color: var(--text-color);
--h6-color: var(--text-color);
--hr-color: var(--dark-color-1);
/* Tabview Colors */
--tabview-border-color: var(--general-dark-border-color);
--tabview-button-background-color: var(--general-light-background-color);
--tabview-button-text-color: var(--general-light-text-color);
--tabview-hover-button-background-color: var(--general-medium-background-color);
--tabview-hover-button-text-color: var(--general-medium-text-color);
--tabview-selected-button-background-color: var(--general-dark-background-color);
--tabview-selected-button-text-color: var(--general-dark-text-color);
--tabview-horizon-color: var(--dark-color-3), 0.65;
--tabview-content-background-color: var(--general-light-background-color), 0.25;
--tabview-content-text-color: var(--general-light-text-color);
/* Tabel Colors */
--table-border-color: var(--general-strong-border-color);
--table-header-background-color: var(--general-medium-background-color);
--table-header-text-color: var(--general-medium-text-color);
--table-background-color: var(--light-color-1);
--table-text-color: var(--text-color);
/* Blockquote Colors */
--blockquote-background-color: var(--general-light-background-color);
--blockquote-text-color: var(--general-light-text-color);
--blockquote-shadow-color: 0, 0, 0, 0;
--blockquote-border-color: var(--general-medium-border-color);
/* Code Block Colors */
--code-block-background-color: var(--blockquote-background-color);
--code-block-text-color: var(--blockquote-text-color);
--code-block-border-color: var(--general-strong-border-color);
/* TOC Colors */
--toc-background-color: var(--general-light-background-color);
--toc-text-color: var(--general-light-text-color);
--toc-border-color: var(--dark-color-2);
/* Note Colors */
--note-background-color: 255, 242, 114;
--note-text-color: 24, 27, 27;
--note-border-color: 24, 27, 27, 0.5;
/* Footnote Block Colors*/
--footnote-block-background-color: var(--dark-color-2), 0.18;
--footnote-block-text-color: var(--text-color);
--footnote-block-border-color: var(--general-dark-border-color);
/* Rating Module Colors */
--rating-background-color: var(--general-light-background-color);
--rating-text-color: var(--general-light-text-color);
--rating-rateup-color: var(--accept-color);
--rating-ratedown-color: var(--warning-color);
--rating-cancel-color: var(--neutral-color);
--rating-rateup-text-color: var(--accept-text-color);
--rating-ratedown-text-color: var(--warning-text-color);
--rating-cancel-text-color: var(--neutral-text-color);
--rating-info-color: var(--dark-color-3);
--rating-info-text-color: var(--light-color-2);
--rating-border-color: var(--general-dark-border-color);
/* Popups Colors */
--popup-fader-color: var(--general-shadow-color), 0.65;
--popup-background-color: var(--general-light-background-color);
--popup-text-color: var(--general-light-text-color);
--popup-title-background-color: var(--general-dark-background-color);
--popup-title-text-color: var(--general-dark-text-color);
--popup-border-color: var(--general-strong-border-color);
--popup-button-text-color: var(--general-button-text-color);
--popup-button-background-color: var(--general-button-background-color);
--popup-hover-button-text-color: var(--general-hover-button-text-color);
--popup-hover-button-background-color: var(--general-hover-button-background-color);
--popup-tip-color: var(--light-color-2);
--popup-loading-color: var(--dark-color-2);
/* The 4 */
--lightblock-background-color: var(--general-light-background-color);
--lightblock-text-color: var(--general-light-text-color);
--darkblock-background-color: var(--general-dark-background-color);
--darkblock-text-color: var(--general-dark-text-color);
--styled-quote-background-color: var(--general-light-background-color);
--styled-quote-text-color: var(--general-light-text-color);
--styled-quote-border-color: var(--general-dark-border-color);
--dark-styled-quote-background-color: var(--general-dark-background-color);
--dark-styled-quote-text-color: var(--general-dark-text-color);
--dark-styled-quote-border-color: var(--light-color-2);
}
[[/module]]
[[module CSS]]
:root {
/* Font Set */
--body-font: Inter, "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
--header-font: Inter, "Noto Sans SC", "Noto Sans TC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif;
--title-font: var(--header-font);
--mono-font: "JetBrains Mono", "Noto Serif SC", "Noto Serif TC", Consolas, monaco, monospace;
/* Header Vs */
--main-header-height: 8rem;
--main-header-height-on-mobile: 8rem;
--header-height: calc(var(--main-header-height) + var(--topbar-height));
--header-width: 65rem;
--header-margin: max(calc((100% - var(--header-width)) / 2), 0px);
--logo-image: url("../../logo_nomargin.svg");
--header-title: "The Backrooms";
--header-title-font-size: 2.65rem;
--header-title-font-size-on-mobile: 1.6rem;
--header-subtitle: "You've been here before.";
--header-subtitle-font-size: 1rem;
--header-subtitle-font-size-on-mobile: 0.6rem;
--search-icon-width-on-mobile: 2.5rem;
/* Topbar Vs */
--topbar-height: 2rem;
--topbar-height-on-mobile: 3.2rem;
--topbar-font-size: 0.8rem;
--topbar-font-size-on-mobile: 1rem;
/* Account Vs */
--account-drop-border-width: var(--topbar-drop-border-width);
/* Content Vs */
--body-width: 48rem;
--body-margin: max(calc((100% - var(--body-width)) / 2), 1rem);
--content-font-size: clamp(0.87rem, calc(0.83rem + 0.195vw), 1rem);
/* Sidebar Vs */
--sidebar-width: 18rem;
--sidebar-width-on-mobile: 17rem;
/* Page Tag Vs */
--page-tag-title: "TAGS \0021b4";
/* Image Block Vs */
--imageblock-border-width: 0.15rem;
/* Tabview Vs */
--tabview-border-width: calc(1rem / 15);
/* Tabel Vs */
--table-border-width: calc(2rem / 15);
/* Blockquote Vs */
--blockquote-border-width: calc(2rem / 15);
/* Popup Vs */
--popup-tip-content: "(Click anywhere to close)";
--popup-loading-content: "Saving Page...";
}
[[/module]]
Body font is Inter.
Monospace font is JetBrains Mono.