Every Single SCP Wiki Theme
[[module CSS]]
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");
a[rel="license"]::after {
content: ".";
}
[[/module]]
[[div_ style="display: none"]]
[!--
Styling component for the EN Interwiki, based on the CN Interwiki by 7happy7 and Sekai-s.
Please note that as of 2022-03-15, the new EN interwiki is not yet active on the EN SCP Wiki, so this styling component will not yet work.
Interwiki: https://scpwiki.com/interwiki
Source: https://github.com/scpwiki/interwiki
See also: https://scpwiki.com/how-to-create-a-branch-of-the-scp-foundation
Usage:
On the page that intends to restyle the Interwiki:
[[include :scp-wiki:component:interwiki-style
| priority=X
| theme=<link to CSS stylesheet>
| css=<URI-encoded CSS>
]]
The `priority` value must be set to a number that is 1 greater than the priority of the theme that this theme is extending.
Examples:
- The base theme of the site (for the SCP Wiki, this is Sigma-9) has a priority of 0.
- A CSS theme designed to be used on pages that are already styled with Sigma-9 (i.e. a theme that extends Sigma-9) would have a priority of 1.
- The Black Market theme extends the Black Highlighter theme, which has a priority of 2; therefore the Black Market theme would have a priority of 3.
The `theme` value is optional, and can be a URL to a CSS stylesheet e.g. a CSS theme.
The `css` value is optional, and can be URI-encoded CSS to apply directly to the Interwiki. To URI-encode CSS, see https://meyerweb.com/eric/tools/dencoder
--]
[[embed]]
<iframe src="//interwiki.scpwiki.com/styleFrame.html?priority=1&theme=https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css&css={$css}" style="display: none"></iframe>
[[/embed]]
[!--
Styling component for the EN Interwiki, based on the CN Interwiki by 7happy7 and Sekai-s.
Please note that as of 2022-03-15, the new EN interwiki is not yet active on the EN SCP Wiki, so this styling component will not yet work.
Interwiki: https://scpwiki.com/interwiki
Source: https://github.com/scpwiki/interwiki
See also: https://scpwiki.com/how-to-create-a-branch-of-the-scp-foundation
Usage:
On the page that intends to restyle the Interwiki:
[[include :scp-wiki:component:interwiki-style
| priority=X
| theme=<link to CSS stylesheet>
| css=<URI-encoded CSS>
]]
The `priority` value must be set to a number that is 1 greater than the priority of the theme that this theme is extending.
Examples:
- The base theme of the site (for the SCP Wiki, this is Sigma-9) has a priority of 0.
- A CSS theme designed to be used on pages that are already styled with Sigma-9 (i.e. a theme that extends Sigma-9) would have a priority of 1.
- The Black Market theme extends the Black Highlighter theme, which has a priority of 2; therefore the Black Market theme would have a priority of 3.
The `theme` value is optional, and can be a URL to a CSS stylesheet e.g. a CSS theme.
The `css` value is optional, and can be URI-encoded CSS to apply directly to the Interwiki. To URI-encode CSS, see https://meyerweb.com/eric/tools/dencoder
--]
[[embed]]
<iframe src="//interwiki.scpwiki.com/styleFrame.html?priority=2&theme=https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css&css={$css}" style="display: none"></iframe>
[[/embed]]
[[/div]]
[[iftags +theme -nobhl]]
[[module css]]
#page-title { display: none }
.scp-image-block.block-right img {
background: var(--gradient-header);
box-sizing: border-box;
padding: 1em;
}
.fonts-display {
font-size: 1.25em;
}
.title-font {
font-family: var(--title-font);
font-weight: 700;
}
.header-font {
font-family: var(--title-font);
font-weight: 900;
}
.UI-font {
font-family: var(--UI-font);
}
.mono-font {
--MONO: 1;
--CASL: 0;
--CRSV: 0;
font-family: var(--mono-font);
}
[[/module]]
[[image https://scp-wiki.wdfiles.com/local--files/component%3Ablack-highlighter-theme-dev/black-highlighter-logo.svg alt="Black Highlighter"]]
[[>]]
[[module Rate]]
[[/>]]
This is the Black Highlighter theme, a new base theme that aims to be better than the SCP Wiki's default base theme, [[[theme:site | Sigma-10]]]. You've already seen it in action.
_
+ Usage
On any wiki:
[[div class="code" style="text-align: center;"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
[[/div]]
_
+ Reporting problems
If you've got a Github account, [https://github.com/Nu-SCPTheme/Black-Highlighter/issues create an Issue] detailing your problem (whether it's technical, or aesthetic, or whatever).
If you don't have a Github account, or if you'd prefer to discuss your issues with someone directly, send a Wikidot PM to [[*user Woedenaz]]. If he doesn't respond, send it to [[*user Croquembouche]].
_
+ Addons
As a base theme, it's easy to extend Black Highlighter to be whatever you want. You can see all Black Highlighter-derived themes here: [[[black-highlighter-themes | ]]]
For functional changes, try these:
* **[[[component:bhl-dark-sidebar|]]]:** {{@@[[include :scp-wiki:component:bhl-dark-sidebar]]@@}}
* **[[[component:collapsible-sidebar|]]]:** {{@@[[include :scp-wiki:component:collapsible-sidebar]]@@}}
* **[[[component:toggle-sidebar-bhl|]]]:** {{@@[[include :scp-wiki:component:toggle-sidebar-bhl]]@@}}
* **[[[component:centered-header-bhl|]]]:** {{@@[[include :scp-wiki:component:centered-header-bhl]]@@}}
_
-----
_
+ Theme Colors
>[!--
[[module CSS]]
td { vertical-align: top; }
td strong { white-space: nowrap; }
.options table.wiki-content-table td { border: none; padding: 0.7em 1em; }
[[/module]]
[[div style="border: 1px solid #ddd; padding: 1em;"]]
+ What this is
A component that displays a bunch of colored squares to show off a CSS theme's flair.
Designed by [[*user Woedenaz]] and componentised by [[*user Croquembouche]].
This component is designed to be used for CSS themes, but it can be used on almost any page, if you really want.
+ Usage
On any wiki:
[[div class="code"]]
##blue|**[[include :scp-wiki:component:theme-squares -=-**##
##blue|**|**## ##green|color1-name####blue|**=**##My Favourite Colour
##blue|**|**## ##green|color1-variable####blue|**=**##@@--@@fav-color
##blue|**|**## ##green|color1-info####blue|**=**##(191, 144, 0)
##blue|**]]**##
[[/div]]
Note the "{{-=-}}" after the component name. You **//do//** need to include that -- otherwise all this text explaining how to use the component will appear on your page.
For this component, there are three parameters per color. Replace N with the number of the color.
[[div class="options"]]
|| **colorN-name** || The name of the color. Pick whatever you want! ||
|| **colorN-variable** || The name of the [https://developer.mozilla.org/en-US/docs/Web/CSS/--* CSS variable] that contains this color. _
The variable should hold three comma-separated numbers representing the RGB values of the color. This is consistent with BHL-style variables. _
If your variables hold something else (e.g. a full RGB/RGBA or hex color), you will need to override the background color of each theme square manually with CSS. ||
|| **colorN-info** || Some info about the colour. Displaying the RGB values is typical. Keep it short. _
If you don't want any text, add {{@<@@ @@>@}} instead.||
|| **//colorN-has-light-text//** _
//Optional. Default: 0// || Either 0 or 1. Determines the font color on the square. Useful to make sure there is enough contrast between the background color and the text color. _
If 1, the value of {{@@--swatch-text-light@@}} is used, or white (255, 255, 255) if it is not defined. Otherwise {{@@--swatch-text-dark@@}}, or black (0, 0, 0). Like all BHL-style CSS color variables, three numbers representing RGB values are expected. ||
[[/div]]
A color can only be used if it's exposed as a [https://developer.mozilla.org/en-US/docs/Web/CSS/--* CSS variable]. All colors in a Black Highlighter theme have a corresponding CSS variable by default, so for BHL themes, this component should work out of the box. However, sigma9 does not use CSS variables, so the only CSS variables that are available will be any that you have defined in your theme.
This component can hold a maximum of 6 primary colors and 12 secondary colors. I recommend two primary colors and no more than six secondary colors.
To add a primary color, just add the top three of the above parameters to the include, as shown in the example.
To add a secondary color, it's the same, but replace 'color' with 'subcolor'.
+ Example
Here's a longer example, taken from the Black Highlighter theme:
[[div class="code"]]
##blue|**[[include :scp-wiki:component:theme-squares -=-**##
##blue|**|**## ##green|color1-name####blue|**=**##Payne's Grey
##blue|**|**## ##green|color1-variable####blue|**=**##@@--@@gray-monochrome
##blue|**|**## ##green|color1-info####blue|**=**##(66, 66, 72)
##blue|**|**## ##green|color1-has-light-text####blue|**=**##1
##blue|**|**## ##green|color2-name####blue|**=**##Rosewood
##blue|**|**## ##green|color2-variable####blue|**=**##@@--@@bright-accent
##blue|**|**## ##green|color2-info####blue|**=**##(133, 0, 5)
##blue|**|**## ##green|color2-has-light-text####blue|**=**##1
##blue|**|**## ##green|subcolor1-name####blue|**=**##Alto
##blue|**|**## ##green|subcolor1-variable####blue|**=**##@@--@@very-light-gray-monochrome
##blue|**|**## ##green|subcolor1-info####blue|**=**##(215, 215, 215)
##blue|**|**## ##green|subcolor2-name####blue|**=**##White Smoke
##blue|**|**## ##green|subcolor2-variable####blue|**=**##@@--@@pale-gray-monochrome
##blue|**|**## ##green|subcolor2-info####blue|**=**##(244, 244, 244)
##blue|**|**## ##green|subcolor3-name####blue|**=**##Bastille
##blue|**|**## ##green|subcolor3-variable####blue|**=**##@@--@@dark-gray-monochrome
##blue|**|**## ##green|subcolor3-info####blue|**=**##(48, 48, 52)
##blue|**|**## ##green|subcolor3-has-light-text####blue|**=**##1
##blue|**|**## ##green|subcolor4-name####blue|**=**##Buccaneer
##blue|**|**## ##green|subcolor4-variable####blue|**=**##@@--@@medium-accent
##blue|**|**## ##green|subcolor4-info####blue|**=**##(100, 46, 44)
##blue|**|**## ##green|subcolor4-has-light-text####blue|**=**##1
##blue|**|**## ##green|subcolor5-name####blue|**=**##Maroon
##blue|**|**## ##green|subcolor5-variable####blue|**=**##@@--@@dark-accent
##blue|**|**## ##green|subcolor5-info####blue|**=**##(100, 3, 15)
##blue|**|**## ##green|subcolor5-has-light-text####blue|**=**##1
##blue|**|**## ##green|subcolor6-name####blue|**=**##Mango Tango
##blue|**|**## ##green|subcolor6-variable####blue|**=**##@@--@@newpage-color
##blue|**|**## ##green|subcolor6-info####blue|**=**##(221, 102, 17)
##blue|**]]**##
[[/div]]
This produces the following colored squares:
[[=]]
[[image bhl-squares.png]]
[[/=]]
+ Tweaking
You can adjust the appearance of the component with CSS.
The whole component has the {{.colors-container}} class, and any CSS that targets it should included that class to ensure that nothing else on the page is affected. Every colored square has class {{.color}}. The primary colors have a {{.colors}} parent and the secondary colors have a {{.subcolors}} parent.
You'll need to use {{!important}} to override a square's background.
For example, the [[[theme:laughter-and-knives-theme | Laughter and Knives theme]]] adds a gradient background to the 9th secondary color like so:
[[code type="css"]]
.colors-container .subcolors .color:nth-of-type(9) {
background: var(--pastel-rainbow) !important;
}
[[/code]]
-----
[https://rossjrw.com/series-replace/?f=%5Cn&f=%5E&f=%24&f=%3C%3C%3E%3E&f=%28%3F%3C%3Dsubcolors.%2A%29%28%5B%5E%5C%5B%5C%5D%5D%2B%29%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5Ba-z-%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5B%5E%40%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D&f=%28%5B%5E%5C%5B%5C%5D%5D%2B%29%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5Ba-z-%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5B%5E%40%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D&f=%5C%7C&f=%5E%5C%5B%5C%5B%5B%5Ei%5D.%2A%7C%5E%5C%7C%5B%5E%20%5D.%2A&f=%5Cn%24&r=&r=%5B%5Binclude%20%3Ascp-wiki%3Acomponent%3Atheme-squares%20-%3D-%3C%3C%3E%3E%7C%20color%24-has-light-text%3D1%3C%3C%3E%3E%7C%20subcolor%24-has-light-text%3D1%3C%3C%3E%3E&r=%5Cn%5D%5D&r=%5Cn&r=%7C%20subcolor%24%24-name%3D%241%7C%20subcolor%24%24-variable%3D%242%7C%20subcolor%24%24-info%3D%243%7C&r=%7C%20color%24%24-name%3D%241%7C%20color%24%24-variable%3D%242%7C%20color%24%24-info%3D%243%7C&r=%5Cn%7C&r=&r= Tool to convert existing syntax to arguments for this component]
[[/div]]
[!-- --]
[[module CSS]]
.colors-container {
width: 98%;
display: flex;
flex-direction: column;
margin: 0 auto;
font-weight: 700;
font-family: var(--title-font, Verdana), sans-serif;
color: black;
}
.colors-container .colors, .colors-container .subcolors {
width: 100%;
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
}
.colors-container .color {
flex-grow: 2;
padding: 0.5rem;
margin: 0.5rem;
color: rgb(var(--swatch-text-dark, 0, 0, 0));
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.colors-container .colors .color {
height: 7rem;
min-width: 4rem;
flex-basis: calc((100% / 2) - 2rem - 1px);
}
.colors-container .subcolors .color {
height: 4rem;
min-width: 4rem;
font-size: 75%;
text-align: center;
flex-basis: calc((100% / 6) - 2rem - 1px);
}
.colors-container .css-variable {
font-size: 75%;
letter-spacing: 0.1em;
font-family: var(--body-font, Verdana), sans-serif;
}
/* Hide a colour that's not been provided by seeing if the variable starts with "{$" */
.colors-container [data-variable^=\{\$] {
display: none;
}
.colors-container [data-has-light-text="1"] {
color: white;
color: rgb(var(--swatch-text-light, 255, 255, 255));
}
[[/module]]
[[div_ class="colors-container"]]
[!-- Unfortunately I can only support a limited number of colours, because each possible slot needs to be hardcoded --]
[!-- I can use the CSS variable name to reliably determine whether or not a colour has been provided, because it shouldn't contain any fancy formatting that would preclude it from being used in a CSS attribute --]
[!-- If a colour is not provided, it should not take up any space --]
[!-- Support up to six primary colours --]
[[div_ class="colors"]]
[[div_ class="color" style="background-color: rgb(var(--gray-monochrome));" data-variable="--gray-monochrome" data-has-light-text="1"]]
Payne's Grey[[span class="css-variable"]]@@--gray-monochrome@@[[/span]][[span class="css-variable"]](66, 66, 72)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var(--bright-accent));" data-variable="--bright-accent" data-has-light-text="1"]]
Rosewood[[span class="css-variable"]]@@--bright-accent@@[[/span]][[span class="css-variable"]](133, 0, 5)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color3-variable}));" data-variable="{$color3-variable}" data-has-light-text="{$color3-has-light-text}"]]
{$color3-name}[[span class="css-variable"]]@@{$color3-variable}@@[[/span]][[span class="css-variable"]]{$color3-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color4-variable}));" data-variable="{$color4-variable}" data-has-light-text="{$color4-has-light-text}"]]
{$color4-name}[[span class="css-variable"]]@@{$color4-variable}@@[[/span]][[span class="css-variable"]]{$color4-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color5-variable}));" data-variable="{$color5-variable}" data-has-light-text="{$color5-has-light-text}"]]
{$color5-name}[[span class="css-variable"]]@@{$color5-variable}@@[[/span]][[span class="css-variable"]]{$color5-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color6-variable}));" data-variable="{$color6-variable}" data-has-light-text="{$color6-has-light-text}"]]
{$color6-name}[[span class="css-variable"]]@@{$color6-variable}@@[[/span]][[span class="css-variable"]]{$color6-info}[[/span]]
[[/div]]
[[/div]]
[!-- Support up to twelve subcolours --]
[[div_ class="subcolors"]]
[[div_ class="color" style="background-color: rgb(var(--very-light-gray-monochrome));" data-variable="--very-light-gray-monochrome" data-has-light-text="{$subcolor1-has-light-text}"]]
Alto[[span class="css-variable"]]@@--very-light-gray-monochrome@@[[/span]][[span class="css-variable"]](215, 215, 215)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var(--pale-gray-monochrome));" data-variable="--pale-gray-monochrome" data-has-light-text="{$subcolor2-has-light-text}"]]
White Smoke[[span class="css-variable"]]@@--pale-gray-monochrome@@[[/span]][[span class="css-variable"]](244, 244, 244)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var(--dark-gray-monochrome));" data-variable="--dark-gray-monochrome" data-has-light-text="1"]]
Bastille[[span class="css-variable"]]@@--dark-gray-monochrome@@[[/span]][[span class="css-variable"]](48, 48, 52)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var(--medium-accent));" data-variable="--medium-accent" data-has-light-text="1"]]
Buccaneer[[span class="css-variable"]]@@--medium-accent@@[[/span]][[span class="css-variable"]](100, 46, 44)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var(--dark-accent));" data-variable="--dark-accent" data-has-light-text="1"]]
Maroon[[span class="css-variable"]]@@--dark-accent@@[[/span]][[span class="css-variable"]](100, 3, 15)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var(--newpage-color));" data-variable="--newpage-color" data-has-light-text="{$subcolor6-has-light-text}"]]
Mango Tango[[span class="css-variable"]]@@--newpage-color@@[[/span]][[span class="css-variable"]](221, 102, 17)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor7-variable}));" data-variable="{$subcolor7-variable}" data-has-light-text="{$subcolor7-has-light-text}"]]
{$subcolor7-name}[[span class="css-variable"]]@@{$subcolor7-variable}@@[[/span]][[span class="css-variable"]]{$subcolor7-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor8-variable}));" data-variable="{$subcolor8-variable}" data-has-light-text="{$subcolor8-has-light-text}"]]
{$subcolor8-name}[[span class="css-variable"]]@@{$subcolor8-variable}@@[[/span]][[span class="css-variable"]]{$subcolor8-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor9-variable}));" data-variable="{$subcolor9-variable}" data-has-light-text="{$subcolor9-has-light-text}"]]
{$subcolor9-name}[[span class="css-variable"]]@@{$subcolor9-variable}@@[[/span]][[span class="css-variable"]]{$subcolor9-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor10-variable}));" data-variable="{$subcolor10-variable}" data-has-light-text="{$subcolor10-has-light-text}"]]
{$subcolor10-name}[[span class="css-variable"]]@@{$subcolor10-variable}@@[[/span]][[span class="css-variable"]]{$subcolor10-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor11-variable}));" data-variable="{$subcolor11-variable}" data-has-light-text="{$subcolor11-has-light-text}"]]
{$subcolor11-name}[[span class="css-variable"]]@@{$subcolor11-variable}@@[[/span]][[span class="css-variable"]]{$subcolor11-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor12-variable}));" data-variable="{$subcolor12-variable}" data-has-light-text="{$subcolor12-has-light-text}"]]
{$subcolor12-name}[[span class="css-variable"]]@@{$subcolor12-variable}@@[[/span]][[span class="css-variable"]]{$subcolor12-info}[[/span]]
[[/div]]
[[/div]]
[[/div]]
_
+ Syntax Examples
[[div class="scp-image-block block-right" style="width:200px;"]]
[[image https://cdn.scpwiki.com/theme/en/black-highlighter/img/logo.svg {$alt}="{$alt-text}" link=#]]
[[div class="scp-image-caption"]]
SCP Foundation Logo
[[/div]]
[[/div]]
Titles can be created by putting between one and six plus "+" at the start of the line
[[collapsible show="+ Titles" hide="- Titles"]]
+ First Title
++ Second Title
+++ Third Title
++++ Fourth Title
+++++ Fifth Title
++++++ Sixth Title
[[/collapsible]]
A horizontal rule can be created with 5 hyphens "@@-----@@" and extends across the whole page if it's not placed inside anything (e.g. a blockquote). The lines separating sections of this document are horizontal rules.
-----
_
[[tabview]]
[[tab Tabulator]]
This is a tab view.
[[/tab]]
[[tab Tabulation]]
Hey look, more text here.
How quaint.
[[/tab]]
[[tab 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.
[[/tab]]
[[tab This empty tab has a really long name for some odd reason. I wonder why? It is very strange.]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[/tabview]]
[[div class="blockquote"]]
This is a blockquote, created by enclosing its contents with {{[[div class="blockquote"]]}} on the line before and {{[[/div]]}} on the line after.
-----
[[div class="blockquote"]]
Blockquotes, and all divs, can be nested.
[[/div]]
[[/div]]
||~ Here's an ||~ example ||
|| of a || table ||
_
[[=]]
[[div_ class="fonts-display"]]
The body, [[span class="title-font"]]title,[[/span]] and [[span class="header-font"]]header[[/span]] font is [https://rsms.me/inter/ Inter].
[[span class="UI-font"]]The UI font is [https://www.paratype.com/fonts/pt/pt-root-ui PT Root UI].[[/span]]
[[span class="mono-font"]]The monospaced font is [https://www.recursive.design/ Recursive].[[/span]]
[[/div]]
All fonts are licensed under the [http://scripts.sil.org/OFL SIL Open Font License, Version 1.1]
[[/=]]
-----
[[/iftags]]
[[module css]]
@import url('https://fonts.bunny.net/css?family=Bungee&display=swap');
.rounder {
background: url(https://scp-wiki.wdfiles.com/local--files/rounderhouse-s-author-page/rounderception.png);
border: 5px solid rgb(var(--dark-gray-monochrome));
color: #000;
margin-top: 5%;
margin-right: 5%;
margin-bottom: 5%;
padding-left: 2%
}
.rounder h1 {
font-family: 'Bungee', cursive;
}
#page-title {
display: none;
}
#page-content > div:nth-child(3) {
float: right;
}
.page-rate-widget-box {
margin-top: 0.75rem;
}
.theme-articles ul li a[href*="4205"] {
font-family: var(--mono-font);
}
[[/module]]
[[toc]]
[[div_ class="top-image"]]
[[image https://scp-wiki.wikidot.com/local--files/black-highlighter-themes/bhl-themes.svg]]
[[/div]]
[[div_ class="rating-container" style="text-align: right"]]
[[module Rate]]
[[/div]]
+ Welcome! :D
[[div class="welcome"]]
Below are themes to Black Highlighter, an SCP Wiki theme that most that browse the Wiki have likely seen at this point. If you'd like to learn more, [[[theme:black-highlighter-theme | take a look at the main theme page!]]]
Everyone is welcome to add their themes here! Just make sure you follow the format. Make sure to put your name in Alphabetical order.
[[/div]]
+ 7happy7
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ SCP Archive Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:scp-archive | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[scp-6740|SCP-6740 — Our Shared Grave]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/scp-archive.png]]
[[/div]]
[[/div]]
+ BattleblockB0ss
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ TMO Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:telecommunications-monitoring-office-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[Hanging On the Telephone]]]
* [[[WINTER]]]
* [[[SCP-5783]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:telecommunications-monitoring-office-theme/TMO%20Screenshot]]
[[/div]]
[[/div]]
+ CityToast
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Human Resources Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:scp-human-resources | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [https://scp-wiki.wikidot.com/hr-journeys Journeys: The Story of Dane]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/human-resources.png]]
[[/div]]
[[/div]]
+ Croquembouche
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Swirling Ashes Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:swirling-ashes | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[Rat's Nest Hub]]]
* [[[The Four Arcana]]]
* [[[A Terrible Thing]]]
[[/div]]
[[div_ class="theme-img"]]
[[image swirling-ashes.png]]
[[/div]]
[[/div]]
+ EstrellaYoshte
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Isolated Terminal Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:isolated-terminal | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[SCP-5311]]]
* [[[SCP-5887]]]
[[/div]]
[[div_ class="theme-img"]]
[[image isolated_theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Penumbra BHL
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:penumbra-bhl | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[Spirit Stories]]]
* [[[SCP-6666]]]
* [[[SCP-4812]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/penumbra.png]]
[[/div]]
[[/div]]
+ Etinjat
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Broken World Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:broken-world | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[the-book-of-gnosis-repairers-vol-of-psalms-part-1|]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wikidot.com/local--files/black-highlighter-themes/SHOW_broken-world-theme.webp]]
[[/div]]
[[/div]]
+ GreenGolem
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ SPC Black Highlighter Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:shark-punching-centre-bhl | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[spc-179|]]]
* [[[spc-cn-985|]]]
* [[[spc-6500|]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/spc.png]]
[[/div]]
[[/div]]
+ Greyve
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ The Coalition Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:the-coalition-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [https://scp-wiki.wikidot.com/project-roc-part-1 Roc Series Deicide Drone, Prototype Model]
* [[[scp-6871 | SCP-6871 — In the Blink of an Eye]]]
[[/div]]
[[div_ class="theme-img"]]
[[image coalition_theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Foundless Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:foundless | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[Within The Walls I]]]
* [[[Outfounded Hub]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/unfounded.png]]
[[/div]]
[[/div]]
+ IronShears
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Onko Sinulla Nälkä? Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:onko-sinulla-nalka-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[onko-sinulla-nalka-vasna| Onko Sinulla Nälkä: The Food of Orok’s Hunt]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Aonko-sinulla-nalka-theme/OnkoSinullaNalkaTheme.png]]
[[/div]]
[[/div]]
+ JackalRelated
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Present Malice Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:present-malice | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[scp-5420 | SCP-5420 — Mission to Meta]]]
* [[[scp-5384 | SCP-5384 — The Late White Shark]]]
[[/div]]
[[div_ class="theme-img"]]
[[image present-malice-2.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Timepiece Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:clock-tower | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[scp-5279|SCP-5279 — This is Eye-Catching]]]
[[/div]]
[[div_ class="theme-img"]]
[[image clock-tower-2.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Neon Dystopia Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:cyberpunk | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[scp-5782|SCP-(5.782×10⁵⁴) — And Alexander Wept]]]
* [[[scp-6266|SCP-6266 — Red Light, Green Light]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/neon-dystopia.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Twin Files Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:twin-files | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/twin-files.PNG]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Dynamikron Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:dynamikron | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/dynamikron-sample.PNG]]
[[/div]]
[[/div]]
+ JakdragonX
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ JAKSTYLE
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:jakstyle | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[SCP-6200]]]
* [[[SCP-5346]]]
* [[[SCP-783]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wikidot.com/local--files/black-highlighter-themes/jakstyle.webp]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Minimalist BHL Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:minimalist-bhl | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[SCP-5365]]]
* [[[SCP-5366]]]
* [[[SCP-6217]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/minimalist.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ New Age Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:new-age | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[SCP-6872]]]
* [[[SCP-7766]]]
* [[[SCP-4523]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:new-age/simulacrum%20teaser]]
[[/div]]
[[/div]]
+ Jerden
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Black Serpent Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:black-serpent| Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[Now, The Serpent]]]
* [[[More Cunning Than Any Beast]]]
* [[[The Emperor Of Many Voices]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/black-serpent.png]]
[[/div]]
[[/div]]
+ Kilerpoyo
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Valravn's Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:valravn| Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[valravn-corporation-hub | Valravn Corporation Hub]]]
* [[[la-llorona-model | La Llorona Model]]]
* [[[aar-1320-chacaltaya | AAR-1320 Chacaltaya]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/valravn.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Día de Muertos Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:dia-de-muertos| Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[scp-6755|SCP-6755 — A Promise to The Pale Lady]]]
* [[[scp-7261|SCP-7261 — Interview with the Tlahuelpuchi]]]
* [[[scp-5381|SCP-5381 — Gashadokuro de azúcar]]]
* [[[ofrendas-deadname|Ofrendas: Deadname]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/dia-de-muertos.png]]
[[/div]]
[[/div]]
+ MalyceGraves
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Memoria Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:memoria | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[A Most Contentious Reunion]]]
* [[[et-ecce | Et Ecce Equus Pallidus]]]
* [[[kelipat | Kelipat Nogah]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/memoria.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ La Rue Macabre Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:laruetheme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[New World, Old Flames]]]
* [[[swamplight | s w a m p l i g h t]]]
* [[[SCP-4421]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/macabre.png]]
[[/div]]
[[/div]]
+ Mishary
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ IJAMEA BHL Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:ijamea-bhl | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[Project Konkane Kamuy, 1905]]]
[[/div]]
[[div_ class="theme-img"]]
[[image ijamea.png]]
[[/div]]
[[/div]]
+ Miss Lapis
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Fuladh Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:fuladh-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[SCP-8499]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Afuladh-theme/fuladh_theme.png]]
[[/div]]
[[/div]]
+ MontagueETC
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Midnight Rush Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:midnight-rush | Theme Link]]]
[[/div]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Amidnight-rush/midnight-rush.png]]
[[/div]]
[[/div]]
+ Oboebandgeek99
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Calamity Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:calamity | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[UnHuman Hub]]]
* [[[cinema-chaotique |]]]
* [[[SCP-5825]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wikidot.com/local--files/black-highlighter-themes/calamity-theme.webp]]
[[/div]]
[[/div]]
[[div class="rounder"]]
+ [[size 125%]]**ROUNDERHOUSE**[[/size]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ The Way Out Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:the-way-out | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[djkaktus-s-proposal-ii | djkaktus's Proposal II — Atonement]]]
* [[[SCP-5008]]]
* [[[SCP-5017]]]
* [[[SCP-5018]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wikidot.com/local--files/black-highlighter-themes/Gj2SeuK.webp]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Black Highlightyear Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:black-highlightyear | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[SCP-4774]]]
* [[[SCP-4887]]]
[[/div]]
[[div_ class="theme-img"]]
[[image black-highlightyear_theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ [[span style="font-size: 67%"]]Disrememberment Theme[[/span]]
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:disrememberment-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[SCP-4224]]]
* [[[SCP-5108]]]
[[/div]]
[[div_ class="theme-img"]]
[[image disrememberment_theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ EX OFFICIO THEME.
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:goc | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [https://scp-wiki.wikidot.com/scp-5495 EXTDOC-5495]
* [[[UTE-1919-Discofather]]]
* [[[KTE-5634-Ex-Machina-Bosch]]]
[[/div]]
[[div_ class="theme-img"]]
[[image goc_theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ I57 BHL Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:i57 | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[SCP-5227]]]
* [[[SCP-5164]]]
[[/div]]
[[div_ class="theme-img"]]
[[image i57_theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ RAISA Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:raisa | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [https://scp-wiki.wikidot.com/raisa-6147 RAISA-6147 (PENDING ASSIGNMENT)]
* [[[scp-5813|SCP-5813 — Mr. President II]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wdfiles.com/local--files/black-highlighter-themes/raisa.png]]
[[/div]]
[[/div]]
+ Sekai_s
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Deus Ex Machina Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:deus-ex-machina | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[scp-5309 | SCP-5309 — is not to exist.]]]
* [[[scp-6090 | SCP-6090 — Therianthropy Virus]]]
[[/div]]
[[div_ class="theme-img"]]
[[image Deus_Ex_Machina_Theme.jpeg]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Exposé Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:expose | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[On the Outskirts]]]
* [[[keeping-it-chill | Keeping it Chill With Your Homies Down at The SCP Foundation]]]
* [[[scp-5350 | SCP-5350 — Oculoma]]]
[[/div]]
[[div_ class="theme-img"]]
[[image Expose_Theme.png]]
[[/div]]
[[/div]]
+ Stormbreath
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Black Market Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:black-market | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[All That Glisters]]]
* [[[perispirit-records-personal-concert-experience-dm437-25p16f | 'Perispirit Records Personal Concert Experience']]]
* [[[mcd-thunderbolt-iron | 'Thunderbolt Iron']]]
[[/div]]
[[div_ class="theme-img"]]
[[image mcdsample.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Wilderness Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:wilderness | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[critter-profile-the-polar-bear | Critter Profile: The Polar Bear]]]
* [[[adoption-poster-pearl | Adoption Poster: Pearl!]]]
* [[[critter-profile-geist | Critter Profile: Geist!]]]
[[/div]]
[[div_ class="theme-img"]]
[[image wilsonsnu-preview.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ War on All Fronts Theme (BHL)
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:war-on-all-fronts-bhl | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[scp-5514 | SCP-5514 — The Dragonslayer]]]
* [[[scp-5391 | SCP-5391 — Anastasis]]]
* [[[scp-3741 | SCP-3741 — The World Is Your Oyster]]]
[[/div]]
[[div_ class="theme-img"]]
[[image woaf.png]]
[[/div]]
[[/div]]
+ winkwonkboi
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ A Problematic Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:a-problematic-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[something-burning|]]]
* [[[a-sinking-feeling|]]]
* [[[scp-7362|SCP-7362 — A Fatal Miscalculation]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:a-problematic-theme/ProblematicScreenshot.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Bedbugs Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:bedbugs-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[department-of-entomology-hub|]]]
* [[[friendly-rivalries|]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:bedbugs-theme/BedbugsScreenshot.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Caretaker Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:caretaker-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[people-care-dear|]]]
* [[[scp-6719|SCP-6719 — A Boy And His Bug]]]
* [[[inkirbycase1|]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:caretaker-theme/AEEDScreenshot.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Cleaning Services Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:cleaning-services | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[biweekly|]]]
* [[[sugar-cream-parlor|]]]
* [[[welcome-to-site-19|]]]
[[/div]]
[[div_ class="theme-img"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:cleaning-services/CGScreenshot.png]]
[[/div]]
[[/div]]
+ Woedenaz
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ 𝑨𝑬𝑺𝑻𝑯𝑬𝑻𝑰𝑪 𝑻𝑯𝑬𝑴𝑬
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:aesthetic-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[BREAKNECK]]]
[[/div]]
[[div_ class="theme-img"]]
[[image Aesthetic_Theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Chinese Foundation Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:ch-scp-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[Aflame with the Fires of Delusion]]]
* [[[scp-4161 | SCP-4161 — METEMPSYCHOSIS.]]]
* [[[scp-4522 | SCP-4522 — The Mystical Village of the Jade Peach]]]
* [[[oh-i-feel-it-i-feel-the-cosmos | Oh, I feel it! I feel the cosmos!]]]
[[/div]]
[[div_ class="theme-img"]]
[[image CHSCP_Theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Crocker (Granny) Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:crocker-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[dianas-personnel-file | Diana's Author Page]]]
* [[[Site-81 Community Cookbook]]]
[[/div]]
[[div_ class="theme-img"]]
[[image Crocker_Theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Dustjacket Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:dustjacket| Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[wanderers-library-hub | The Wanderers' Library Hub]]]
* [[[mother-who-demands-ones-toes | Karcist Halyna Ieva]]]
* [[[rock-war-rock-war | ROCK WAR! ROCK WAR!]]]
[[/div]]
[[div_ class="theme-img"]]
[[image dustjacket.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Extra Black Highlighter Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:extra-black-highlighter-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[scp-5664 | SCP-5644 — An Addiction to Blood]]]
* [[[truth-lies | Truth Lies]]]
[[/div]]
[[div_ class="theme-img"]]
[[image ExtraBHL_Theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Galactic Federation Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:galactic-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[the-moons-stellar-companion | The Moon's Stellar Companion]]]
* [[[Sky Sermon Hub]]]
[[/div]]
[[div_ class="theme-img"]]
[[image GalFed_Theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Laughter & Knives Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:laughter-and-knives-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[mzl-1730 | MZL-1730 (And, god willing, that will be the only one.)]]]
* [[[WE LIVE IN A SOCIETY]]]
[[/div]]
[[div_ class="theme-img"]]
[[image Knives_Theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Old Money Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:old-money-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[djkaktus | The Based God]]]
* [[[Starch and Cream]]]
[[/div]]
[[div_ class="theme-img"]]
[[image OldMoney_Theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Ourobouros Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:ouroborous-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [https://scp-wiki.wikidot.com/djkaktus-s-proposal-iii/offset/1 SCP-001: The Way It Ends]
* [[[scp-6140|SCP-6140 — The True Empire]]]
[[/div]]
[[div_ class="theme-img"]]
[[image Ouro_Theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ SCP Offices Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:scp-offices-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[scp-4205 | SCP-4205 — In The Eyes of the Beholder 🖳]]]
* [[[scp-4511 | SCP-4511 — SWINE GOD]]]
* [[[scp-4191 | SCP-4191 — Hiding In Your Hands]]]
* [[[scp-4939 | SCP-4939 — The Man on the Moon]]]
* [[[Hawks n Artworks]]]
[[/div]]
[[div_ class="theme-img"]]
[[image offices_theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ The Foundation Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:the-foundation-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[scp-4485 | SCP-4485 — Such Black Light]]]
* [[[scp-6565 | SCP-6565 — Incubus]]]
* [[[Secure Facility Dossier Site-98]]]
[[/div]]
[[div_ class="theme-img"]]
[[image TF_Theme.png]]
[[/div]]
[[/div]]
[[div_ class="theme-container"]]
[[div_ class="theme-name"]]
++ Unusual Incidents Unit Theme
[[/div]]
[[div_ class="theme-link"]]
[[div_ class="button-container"]]
[[[theme:uiu-bhl-theme | Theme Link]]]
[[/div]]
[[/div]]
[[div class="theme-articles"]]
* [[[make-america-normaler | Directive: Make America Normaler]]]
* [[[uiu-file-2008-21 | UIU File: 2008-021]]]
* [[[uiu-file-2017-102 | UIU File: 2017-102 ]]]
[[/div]]
[[div_ class="theme-img"]]
[[image UIU_Theme.png]]
[[/div]]
[[/div]]
----
[[size 130%]] **__See Also__** [[/size]]
* [[size 120%]] [[[sigma-9-themes|Sigma Themes]]] [[/size]]
* [[size 120%]] [[[CSS Theme Preparation Tool]]] [[/size]]
* [[size 120%]] [[[CSS Policy]]] [[/size]]
[[module css]]
/* ===MAIN CSS===*/
.theme-container,
.theme-container * {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.theme-container {
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: 0.25fr 0.25fr 1fr;
grid-gap: 0.125rem;
width: calc(100% - 0.625rem);
min-height: 15.625rem;
margin-bottom: 1rem;
grid-template-areas:
"name img"
"link img"
"artc img";
background: rgb(var(--black-monochrome), 1);
border: 0.125rem solid rgb(var(--swatch-primary-darkest));
box-shadow:
0.0625rem 0.0625rem 0 rgb(var(--swatch-primary-darkest)),
0.125rem 0.125rem 0 rgb(var(--swatch-primary-darkest)),
0.1875rem 0.1875rem 0 rgb(var(--swatch-primary-darkest)),
0.25rem 0.25rem 0 rgb(var(--swatch-primary-darkest)),
0.3125rem 0.3125rem 0 rgb(var(--swatch-primary-darkest)),
0.375rem 0.375rem 0 rgb(var(--swatch-primary-darkest)),
0.4375rem 0.4375rem 0 rgb(var(--swatch-primary-darkest)),
0.5rem 0.5rem 0 rgb(var(--swatch-primary-darkest));
transform: translateY(-0.625rem) translateX(-0.625rem);
}
.theme-container>div {
background-color: rgb(var(--white-monochrome), 0.1);
padding: 1rem;
}
.theme-container>.theme-name {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: name;
display: flex;
background-color: rgb(var(--swatch-primary-darkest));
color: rgb(var(--white-monochrome));
font-family: var(--title-font);
font-size: 110%;
text-align: center;
line-height: 1.1;
text-shadow:
0.0625rem 0.0625rem 0 rgb(var(--black-monochrome)),
0.125rem 0.125rem 0 rgb(var(--black-monochrome)),
0.1875rem 0.1875rem 0 rgb(var(--black-monochrome)),
0.25rem 0.25rem 0 rgb(var(--black-monochrome))
}
.theme-container>.theme-name>h2 {
padding: 0;
margin: 0;
}
.theme-container>.theme-link {
-ms-grid-row: 3;
-ms-grid-column: 1;
grid-area: link;
display: flex;
align-items: center;
justify-content: center;
}
.theme-container>.theme-link .button-container,
.theme-container>.theme-link .button-container * {
box-sizing: border-box;
}
.theme-container>.theme-link .button-container {
display: flex;
align-items: center;
justify-content: center;
width: 80%;
height: 90%;
padding: 0.5rem 0.25rem;
background-color: rgb(var(--swatch-primary));
box-shadow:
0 0 0 rgb(var(--black-monochrome)),
0 0 0 rgb(var(--black-monochrome)),
0 0 0 rgb(var(--black-monochrome)),
0 0 0 rgb(var(--black-monochrome)),
0 0 0 rgb(var(--black-monochrome)),
0.125rem 0.125rem 0 rgb(var(--black-monochrome)),
-0.125rem -0.125rem 0 rgb(var(--black-monochrome)),
-0.125rem 0.125rem 0 rgb(var(--black-monochrome)),
0.125rem -0.125rem 0 rgb(var(--black-monochrome));
transform: translateX(0) translateY(0);
position: relative;
overflow: hidden;
will-change: box-shadow, transform;
transition:
box-shadow 150ms cubic-bezier(0.4, 0.0, 0.2, 1),
transform 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.theme-container>.theme-link>.button-container>a {
--wght: 900;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: rgb(var(--white-monochrome));
font-size: 125%;
font-weight: 900;
position: relative;
transform: translateX(0);
transition: transform 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.theme-container>.theme-link>.button-container::before {
content: "";
position: absolute;
width: 120%;
height: 100%;
top: 0;
left: 0;
background-color: rgb(var(--pale-accent));
transform: translateX(-100%);
transition: transform 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
-webkit-clip-path: polygon(0.00% 0.00%, 100% 0px, 90% 100%, 0px 100%);
clip-path: polygon(0.00% 0.00%, 100% 0px, 90% 100%, 0px 100%);
}
.theme-container>.theme-link>.button-container::after {
content: '»';
position: absolute;
opacity: 0;
right: 0.35em;
color: rgb(var(--white-monochrome));
font-size: 200%;
transform: translateY(-0.15em) translateX(-1.25rem);
transition:
transform 150ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.theme-container>.theme-link .button-container:hover {
box-shadow:
0.0625rem 0.0625rem 0 rgb(var(--black-monochrome)),
0.125rem 0.125rem 0 rgb(var(--black-monochrome)),
0.1875rem 0.1875rem 0 rgb(var(--black-monochrome)),
0.25rem 0.25rem 0 rgb(var(--black-monochrome)),
0.3125rem 0.3125rem 0 rgb(var(--black-monochrome)),
0.125rem 0.125rem 0 rgb(var(--black-monochrome)),
-0.125rem -0.125rem 0 rgb(var(--black-monochrome)),
-0.125rem 0.125rem 0 rgb(var(--black-monochrome)),
0.125rem -0.125rem 0 rgb(var(--black-monochrome));
transform: translateX(-0.25rem) translateY(-0.25rem);
}
.theme-container>.theme-link .button-container:hover>a {
transform: translateX(-0.78125rem);
}
.theme-container>.theme-link .button-container>a:hover {
text-decoration: none;
}
.theme-container>.theme-link .button-container:hover::before {
transform: translateX(0);
}
.theme-container>.theme-link .button-container:hover::after {
opacity: 1;
transform: translateY(-0.15em) translateX(0);
}
.theme-container>.theme-articles {
-ms-grid-row: 5;
-ms-grid-column: 1;
grid-area: artc;
display: grid;
padding: 0;
}
.theme-articles ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-auto-rows: minmax(4rem, -webkit-max-content);
grid-auto-rows: minmax(4rem, max-content);
color: rgb(var(--black-monochrome));
grid-gap: 0.125rem;
align-content: center;
}
.theme-articles ul li {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
background-color: rgb(var(--swatch-primary), 0.25);
}
.theme-articles ul li a {
--wght: 900;
display: flex;
width: 100%;
height: 100%;
padding: 0.5rem;
align-items: center;
justify-content: center;
text-align: center;
color: rgb(var(--white-monochrome));
position: relative;
overflow: hidden;
font-weight: 900;
line-height: 1.1;
transform: translateX(0) translateY(0);
letter-spacing: 0.03em;
box-shadow:
0 0 0 rgb(var(--black-monochrome)),
0 0 0 rgb(var(--black-monochrome)),
0 0 0 rgb(var(--black-monochrome)),
0 0 0 rgb(var(--black-monochrome));
text-shadow:
0 0 0 rgb(var(--black-monochrome)),
0 0 0 rgb(var(--black-monochrome)),
0 0 0 rgb(var(--black-monochrome)),
0 0 0 rgb(var(--black-monochrome));
transition:
color 150ms 200ms cubic-bezier(0.4, 0.0, 0.2, 1),
text-shadow 150ms 200ms cubic-bezier(0.4, 0.0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1),
transform 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.theme-articles ul li a::before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
background-color: rgb(var(--swatch-primary));
transform: translateX(-100%);
transition: transform 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
-webkit-clip-path: polygon(0.00% 0.00%, 100% 0px, 90% 100%, 0px 100%);
clip-path: polygon(0.00% 0.00%, 100% 0px, 90% 100%, 0px 100%);
z-index: -1;
}
.theme-articles ul li a:hover {
color: rgb(var(--white-monochrome));
text-decoration: none;
box-shadow:
0.0625rem 0.0625rem 0 rgb(var(--black-monochrome)),
0.125rem 0.125rem 0 rgb(var(--black-monochrome)),
0.1875rem 0.1875rem 0 rgb(var(--black-monochrome)),
0.25rem 0.25rem 0 rgb(var(--black-monochrome));
text-shadow:
0.0625rem 0.0625rem 0 rgb(var(--black-monochrome)),
0.125rem 0.125rem 0 rgb(var(--black-monochrome)),
0.1875rem 0.1875rem 0 rgb(var(--black-monochrome)),
0.25rem 0.25rem 0 rgb(var(--black-monochrome));
transform: translateX(-0.25rem) translateY(-0.25rem);
}
.theme-articles ul li a:hover::before {
transform: translateX(0);
}
.theme-container>.theme-img {
-ms-grid-row: 1;
-ms-grid-row-span: 5;
-ms-grid-column: 3;
background-color: rgb(var(--light-pale-gray-monochrome), 1);
grid-area: img;
display: flex;
}
.theme-container>.theme-img>img {
object-fit: cover;
object-position: center left;
width: 100%;
}
#page-content>table {
position: -webkit-sticky;
position: sticky;
width: 30%;
top: 3rem;
right: 0;
margin-top: 10rem !important;
overflow: visible;
transform: translateX(340%);
border-collapse: collapse;
}
#page-content>table>tbody {
position: absolute;
}
#page-content>div.rating-container {
position: -webkit-sticky;
position: sticky;
top: 3rem;
right: 0;
overflow: visible;
transform: translateX(105%) translateY(-100%);
border-collapse: collapse;
float: right;
margin-bottom: -4rem;
padding-top: 2rem;
width: var(--sidebar-width-on-desktop);
display: flex;
align-items: center;
justify-content: center;
}
.page-rate-widget-box {
margin-top: 0 !important;
}
#page-content>br:nth-of-type(1) {
display: none;
}
#page-content h1 span {
display: flex;
align-items: center;
min-height: 1em;
margin: 0.5em 0;
padding: 0;
border: none;
line-height: 1;
}
#page-content h1 span::after {
content: "";
flex-grow: 1;
height: 0.0625rem;
margin: auto auto auto 1.25rem;
background: rgb(var(--swatch-tertiary-color));
}
#toc0 {
margin: 0 auto;
display: flex;
width: 100%;
align-content: center;
justify-content: center;
font-size: 300%;
position: relative;
}
#toc0::after {
content: " ";
position: absolute;
height: 1rem;
width: 18rem;
background-color: rgb(var(--dark-gray-monochrome));
bottom: 0.25rem;
}
.top-image {
margin-top: -10rem;
}
#toc-action-bar {
display: none;
}
.welcome {
box-sizing: border-box;
background-color: rgb(var(--dark-gray-monochrome));
color: rgb(var(--white-monochrome));
padding: 1rem;
font-size: 120%;
transform: translateX(-0.625rem);
}
.welcome a {
box-shadow: inset 100vw 0 0 0 rgb(var(--swatch-primary-darkest)), 0.25rem 0.25rem 0 rgb(var(--swatch-primary-darkest)), -0.25rem -0.25rem 0 rgb(var(--swatch-primary-darkest)), -0.25rem 0.25rem 0 rgb(var(--swatch-primary-darkest)), 0.25rem -0.25rem 0 rgb(var(--swatch-primary-darkest));
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
color: rgb(var(--white-monochrome));
}
#page-content div#toc {
border: none;
padding: 0;
margin: 0;
border: solid 0.125rem rgb(var(--swatch-primary-darkest));
max-height: calc(100vh - var(--final-header-height-on-desktop));
box-shadow:
0.0625rem 0.0625rem 0 rgb(var(--swatch-primary-darkest)),
0.125rem 0.125rem 0 rgb(var(--swatch-primary-darkest)),
0.1875rem 0.1875rem 0 rgb(var(--swatch-primary-darkest)),
0.25rem 0.25rem 0 rgb(var(--swatch-primary-darkest)),
0.3125rem 0.3125rem 0 rgb(var(--swatch-primary-darkest));
flex-direction: column;
border-collapse: collapse;
overflow-x: hidden;
scrollbar-width: thin;
}
#toc #toc-list:not([style*="none"]) {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: stretch;
margin: 0;
padding: 0;
overflow-y: hidden;
max-height: initial;
}
#toc #toc-list>div {
background-color: rgb(var(--white-monochrome));
width: 100%;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.1
}
#toc #toc-list div[style*="em"] {
width: -moz-fit-content;
width: fit-content;
margin-left: 0 !important;
padding-left: 0 !important;
}
#toc #toc-list div[style*="em"]::before,
#toc #toc-list div[style*="em"]::after,
#toc #toc-list div[style*="em"] a::before,
#toc #toc-list div[style*="em"] a::after {
display: none;
}
#toc #toc-list>div[style*="margin-left: 1em"] {
--wght: 900;
padding: 0;
font-weight: 900;
font-size: 120%;
}
#toc #toc-list>div[style*="margin-left: 1em"]:first-of-type {
padding-top: 0.5ch;
width: 100%;
flex-basis: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
#toc #toc-list>div[style*="margin-left: 1em"]:first-of-type::after {
content: "⇓ Designers ⇓";
width: 100%;
height: 1em;
margin-top: 0.5em;
padding: 0.25em 0;
color: rgb(var(--white-monochrome));
display: flex;
align-items: center;
justify-content: center;
background: rgb(var(--swatch-primary));
align-self: flex-end;
}
#toc #toc-list>div[style*="margin-left: 1em"]:not(:first-of-type) {
width: 100%;
flex-basis: 100%;
border-top: 0.125rem solid rgb(var(--swatch-primary-darkest)) !important;
padding-top: 0.25em;
padding-bottom: 0.25rem;
}
#toc #toc-list>div[style*="margin-left: 2em"] {
flex-grow: 1;
flex-basis: 100%;
padding: 0;
margin: 0;
}
#toc #toc-list>div[style*="margin-left: 2em"]>a {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
padding: 0.5rem;
position: relative;
overflow: hidden;
transform: translateX(0) translateY(0);
letter-spacing: 0.03em;
box-shadow:
0 0 0 rgba(var(--swatch-primary-darkest), 0),
0 0 0 rgba(var(--swatch-primary-darkest), 0),
0 0 0 rgba(var(--swatch-primary-darkest), 0),
0 0 0 rgba(var(--swatch-primary-darkest), 0);
text-shadow:
0 0 0 rgba(var(--swatch-primary-darkest), 0),
0 0 0 rgba(var(--swatch-primary-darkest), 0),
0 0 0 rgba(var(--swatch-primary-darkest), 0),
0 0 0 rgba(var(--swatch-primary-darkest), 0);
transition:
color 150ms 200ms cubic-bezier(0.4, 0.0, 0.2, 1),
text-shadow 150ms 200ms cubic-bezier(0.4, 0.0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1),
transform 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
#toc #toc-list>div[style*="margin-left: 2em"]>a::before {
--right-arrow-mask: none;
content: " ";
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 120%;
height: 101%;
align-items: center;
justify-content: center;
text-align: center;
background-color: rgb(var(--swatch-primary));
transform: translateX(-100%);
transition: transform 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
-webkit-clip-path: polygon(0.00% 0.00%, 100% 0px, 90% 100%, 0px 100%);
clip-path: polygon(0.00% 0.00%, 100% 0px, 90% 100%, 0px 100%);
z-index: -1;
}
#toc #toc-list>div[style*="margin-left: 2em"]>a:hover {
color: rgb(var(--white-monochrome));
text-decoration: none;
box-shadow:
0.0625rem 0.0625rem 0 rgba(var(--swatch-primary-darkest), 1),
0.125rem 0.125rem 0 rgba(var(--swatch-primary-darkest), 1),
0.1875rem 0.1875rem 0 rgba(var(--swatch-primary-darkest), 1),
0.25rem 0.25rem 0 rgba(var(--swatch-primary-darkest), 1);
text-shadow:
0.0625rem 0.0625rem 0 rgba(var(--swatch-primary-darkest)),
0.125rem 0.125rem 0 rgba(var(--swatch-primary-darkest)),
0.1875rem 0.1875rem 0 rgba(var(--swatch-primary-darkest)),
0.25rem 0.25rem 0 rgba(var(--swatch-primary-darkest));
transform: translateX(-0.25rem) translateY(-0.25rem);
}
#toc #toc-list>div[style*="margin-left: 2em"]>a:hover::before {
transform: translateX(0);
}
#toc #toc-list>div[style*="margin-left: 2em"] {
background-color: rgb(var(--swatch-primary), 0.1);
}
#toc #toc-list>div[style*="margin-left: 3em"] {
margin: 0;
background-color: rgb(var(--swatch-primary), 0.15);
}
#toc #toc-list>div[style*="margin-left: 4em"] {
margin: 0;
}
@media only screen and (max-width: 1300px) {
.top-image {
margin-top: 0;
display: block;
margin-top: 4rem !important;
}
#page-content>div.rating-container {
position: relative;
transform: translateX(0);
margin-top: -2rem;
margin-bottom: -4rem;
width: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
float: initial;
}
#toc0 {
display: inline-flex;
width: 60%;
}
#page-content>table>tbody {
position: relative;
}
#page-content>table {
position: relative;
width: 90%;
right: 0;
transform: translateX(0);
margin: 0 auto !important;
}
#page-content div#toc {
max-width: inherit;
width: 100%;
}
#toc #toc-list {
max-width: 90vw;
}
#toc #toc-list>div[style*="margin-left: 2em"]:not(:first-of-type) {
flex-basis: 25%;
}
}
@media only screen and (max-width: 1300px) {
#toc0 {
width: 100%;
font-size: 250%;
margin: 8rem auto 0;
}
.theme-container {
grid-template-areas:
"name name"
"link artc"
"artc img";
grid-template-columns: 40% 60%;
grid-template-rows: auto auto 1fr;
min-height: 50vh;
transform: unset;
}
.theme-articles ul li a {
font-size: 120%;
}
.welcome {
transform: unset;
}
.theme-container>.theme-name {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
.theme-container>.theme-link {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
.theme-container>.theme-articles {
-ms-grid-row: 3;
-ms-grid-row-span: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
.theme-container>.theme-img {
-ms-grid-row: 5;
-ms-grid-row-span: 1;
-ms-grid-column: 3;
}
}
@media only screen and (max-width: 768px) {
#toc0 {
width: 100%;
font-size: 250%;
}
#page-content>div.rating-container {
top: var(--topbar-height-on-mobile);
overflow: visible;
transform: initial;
width: 100%;
z-index: 5;
padding: 1rem 0 0 0;
margin: 0;
text-align: center !important;
position: -webkit-sticky;
position: sticky;
}
.theme-container {
grid-template-areas:
"name"
"link"
"img"
"artc";
grid-template-columns: 100%;
grid-template-rows: auto auto 1fr;
min-height: 50vh;
}
.theme-container>.theme-name {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
}
.theme-container>.theme-link {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
.theme-container>.theme-articles {
-ms-grid-row: 7;
-ms-grid-row-span: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
}
.theme-container>.theme-img {
-ms-grid-row: 5;
-ms-grid-row-span: 1;
-ms-grid-column: 1;
}
}
[[/module]][[iftags +theme]]
[[div class="logo"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Apaperstack/lgtrans.png]]
[[/div]]
[[>]]
[[module Rate]]
[[/>]]
[[div class="header-container-ex"]]
[[div class="scp-image-block block-right" style="width:300px;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme:paperstack/test.png {$alt}="{$alt-text}" link=#]]
[[div class="scp-image-caption"]]
(CAPTION HERE)
[[/div]]
[[/div]]
[[div class="header-info"]]
[[div class="header-info-flex"]]
[[div class="text-item"]]
[[size 90%]]##grey|**ITEM #:**##[[/size]]
[[size 220%]]**9999**[[/size]]
[[/div]]
[[div class="text-item"]]
[[size 90%]]##grey|**CONTAINMENT CLASS:**##[[/size]]
[[size 220%]]**THEME-IEL**[[/size]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
**Normal text begins here.**
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus neque dapibus ullamcorper facilisis. Sed et porta arcu, a vestibulum ligula. Nam auctor, arcu vel fringilla lobortis, ipsum ante malesuada turpis, vitae dapibus mi risus non diam. Fusce aliquam feugiat mauris, a consectetur justo dignissim vitae.
Duis eleifend justo eu orci placerat, at bibendum felis aliquam. Integer eu dapibus dui. Praesent viverra dolor vitae commodo hendrerit. Suspendisse aliquam mattis neque et vulputate. Sed nisl risus, vehicula eu nunc vel, lobortis iaculis ex. Nullam sollicitudin, nunc scelerisque euismod dignissim, leo erat iaculis lorem, sit amet interdum nulla justo luctus nibh. Aliquam tincidunt, risus eget sagittis posuere, augue est malesuada magna, non rutrum justo magna nec nunc.
Mauris nisi turpis, feugiat sed semper vitae, scelerisque et libero. Vivamus ex massa, placerat ut lorem nec, mollis tempor risus. Morbi eget leo dui. Duis sit amet massa vel magna euismod commodo. Vestibulum sit amet pretium eros. Duis pretium suscipit nunc, id dignissim orci laoreet sodales. Duis non vehicula dolor. Nulla at mi ut ante gravida vehicula.
----
This is an aesthetic, [[[component:sigma-plus|]]] theme made by [[*user EstrellaYoshte]] and inspired by the interface seen in Containment Breach.
To use this theme, put the following text at the start:
[[div class="code"]]
@@[[include :scp-wiki:theme:paperstack]]@@
@@[[div class="logo"]]@@
@@[[image https://scp-wiki.wdfiles.com/local--files/theme%3Apaperstack/lgtrans.png]]@@
@@[[/div]]@@
@@[[>]]@@
@@[[module Rate]]@@
@@[[/>]]@@
@@[[div class="header-container-ex"]]@@
@@[[include component:image-block name=(IMAGE-HERE)|caption=(CAPTION HERE)|width=300px|align=right]]@@
@@[[div class="header-info"]]@@
@@[[div class="header-info-flex"]]@@
@@[[div class="text-item"]]@@
@@[[size 90%]]##grey|**ITEM #:**##[[/size]]@@
@@[[size 220%]]**9999**[[/size]]@@
@@[[/div]]@@
@@[[div class="text-item"]]@@
@@[[size 90%]]##grey|**CONTAINMENT CLASS:**##[[/size]]@@
@@[[size 220%]]**THEME-IEL**[[/size]]@@
@@[[/div]]@@
@@[[/div]]@@
@@[[/div]]@@
@@[[/div]]@@
**Normal text begins here.**
[[/div]]
Alternatively, fewer or more //text-item// div can be used and the image block omitted.
[[div class="code"]]
@@[[include :scp-wiki:theme:paperstack]]@@
@@[[div class="logo"]]@@
@@[[image https://scp-wiki.wdfiles.com/local--files/theme%3Apaperstack/lgtrans.png]]@@
@@[[/div]]@@
@@[[>]]@@
@@[[module Rate]]@@
@@[[/>]]@@
@@[[div class="header-container-ex"]]@@
@@[[div class="header-info"]]@@
@@[[div class="header-info-flex"]]@@
@@[[div class="text-item"]]@@
YOUR TEXT HERE
@@[[/div]]@@
@@[[/div]]@@
@@[[/div]]@@
@@[[/div]]@@
[[/div]]
----
@@ @@
[[tabview]]
[[tab Tabulator]]
This is a tab view.
[[/tab]]
[[tab Tabulation]]
Hey look, more text here.
How quaint.
[[/tab]]
[[tab Long Tab]]
This is a long tab. It contains a lot of text.[[footnote]] This is a footnote. [[/footnote]]
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.
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[/tabview]]
> This is a blockquote, created by putting "> " at the start of each line.
>
> More text
> -----
> That's a horizontal rule
>
>> Nested blockquotes
||~ This is a ||~ table ||
||You should know || how to make these ||
||||already ||
[[=]]
@@ @@
+++* The header font is Josefin Sans.
The body font is IBM Plex Sans.
{{The monospace font is Fira Code.}}
[[/=]]
------
++* Source Code
[[code type="CSS"]]
/*
Paperstack Theme
[2020 -2023 Wikidot Theme]
By EstrellaYoshte
Based on:
Inkblot Theme by Croquembouche
Word Processor Theme by stormbreath
Modern Theme by Azamo
Simple Yonder Theme by EstrellaYoshte
*/
@import url('https://fonts.bunny.net/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap');
@import url(https://fonts.bunny.net/css2?family=Fira+Code&display=swap);
@font-face {
font-family: 'Josefin Sans';
src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans.woff2) format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Josefin Sans';
src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans-Italic.woff2) format("woff2");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Josefin Sans';
src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans-Bold.woff2) format("woff2");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Josefin Sans';
src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans-Bold-Italic.woff2) format("woff2");
font-weight: bold;
font-style: italic;
font-display: swap;
}
:root {
--header-title: "SCP FOUNDATION";
--header-subtitle: "SECURE - CONTAIN - PROTECT";
--sp_header-title-scale: 1.35;
--sp_header-subtitle-scale: 1.15;
--top-layer-color: #EFEFEF;
--paper-ink-color: #333;
--paper-faded-color: #808080;
--paper-background-color: #FFF;
--paper-block-color: #F7F7F7;
--paper-shadow-color: #0005;
--top-layer-height-offset: 0em;
--top-layer-height: calc(var(--sp_final-header-height) + 8.325rem + var(--top-layer-height-offset));
--top-layer-shadow: 0.375rem;
--sp_header-height: 8.5rem;
--sp_top-bar-height: 1.5rem;
--sp_header-logo-size: 0rem;
--sp_top-bar-link-color: var(--paper-faded-color);
--sp_rate-module-text-color: var(--paper-ink-color);
--sp_rate-module-background: var(--paper-background-color);
--sp_rate-module-sub-color: var(--sp_rate-module-text-color);
--sp_rate-module-active-color: var(--paper-faded-color);
--sp_rate-module-button-color: var(--sp_rate-module-text-color);
--sp_rate-module-button-background: var(--sp_rate-module-background);
--sp_rate-module-button-hover-color: var(--sp_rate-module-background);
--sp_rate-module-button-hover-background: var(--sp_rate-module-text-color);
--sp_tab-text-color: var(--paper-ink-color);
--sp_tab-background: var(--paper-block-color);
--sp_tab-hover-text-color: var(--paper-block-color);
--sp_tab-hover-background: var(--paper-ink-color);
--sp_tab-selected-text-color: var(--sp_tab-hover-text-color);
--sp_tab-selected-background: var(--sp_tab-hover-background);
--sp_hovertip-background: var(--paper-background-color);
--sp_hovertip-border: none;
}
body {
color: #000;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.925rem;
background-color: var(--paper-background-color);
background-image:
linear-gradient( to bottom,
var(--top-layer-color), var(--top-layer-color) var(--top-layer-height),
#00000028 calc(var(--top-layer-height) + 1px),
transparent calc(var(--top-layer-height) + var(--top-layer-shadow) + 1px)
);
background-repeat: no-repeat;
}
.page-source, .code pre, .code p, .code, tt {
font-family: "Fira Code", monospace;
}
.page-source, .code, tt { font-size: 0.9625em; }
#content-wrap { margin-top: 0.25rem; }
#header {
grid-template-rows: auto 1fr auto auto .625rem auto;
background: none;
}
#header::before { all: unset; }
#header h1, #header h2 {
text-align: center;
grid-column: 2/4;
}
#header h1 a, #header h2 span {
max-width: 100%;
text-shadow: none;
color: var(--paper-ink-color);
font-weight: 700;
font-family: "Josefin Sans", sans-serif;
line-height: 0.825;
}
#search-top-box {
grid-row: 2/3;
padding-block: 0.375rem;
}
#top-bar { background: none; }
#top-bar div[class*="top-bar"] > ul {
justify-content: center;
}
#page-title {
display: none;
}
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
border: none;
background: var(--paper-ink-color);
box-shadow: none;
border-radius: 0px;
color: var(--paper-block-color);
}
#login-status, #login-status a {
color: var(--paper-ink-color);
}
/* ---- SIDE BAR ---- */
:is(#side-bar, #interwiki) .side-block {
border: transparent;
border-radius: 0;
box-shadow: 0px 0px 0.325rem var(--paper-shadow-color);
background-color: #ffffff;
}
#interwiki body { background-image: none; }
#side-bar .side-block.media > * {
display: flex;
justify-content: space-evenly;
}
#top-bar div.open-menu a {
color: var(--paper-faded-color);
background: var(--paper-background-color);
box-shadow: 0 0 .325rem var(--paper-shadow-color);
border-radius: 0;
border: solid .125rem var(--paper-background-color);
}
#breadcrumbs {
margin: -1em 0 -0.75em;
font-size: 0.875em;
}
/* ---- INFO BAR ---- */
body{
--barColour: var(--paper-ink-color);
}
.info-container .collapsible-block-content{
padding: 0 .5em 30px;
}
.info-container .collapsible-block-content .wiki-content-table {
width: 100%;
}
/* ---- RATE MODULE ---- */
div.page-rate-widget-box, div.rate-box-with-credit-button {
border-radius: 0;
padding: .125em;
box-shadow: 0 0 0.325rem var(--paper-shadow-color);
}
.creditRate, div.page-rate-widget-box { margin-bottom: 0.125rem; }
div.creditButton p a { border: none; }
div.creditButton p a:is(:hover,:focus) { background-color: var(--paper-ink-color); }
/* ---- PAGE ELEMENTS ---- */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--paper-ink-color);
font-family: 'Josefin Sans', sans-serif;
font-weight: bold;
}
blockquote,
div.blockquote,
#toc,
.code {
background-color: var(--paper-block-color);
border: solid .05rem var(--paper-block-color);
box-shadow: 0 0 .25rem var(--paper-shadow-color);
}
.scp-image-block {
border: solid .5rem var(--paper-background-color);
box-shadow: 0 0 .5rem var(--paper-shadow-color);
box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
background-color: var(--paper-background-color);
border-top: none;
padding: 0;
padding-top: .375rem;
}
#page-content .wiki-content-table tr th {
border: solid .05rem var(--paper-faded-color);
background-color: var(--paper-block-color);
/* set border for table title */
}
#page-content .wiki-content-table tr td {
border: solid .05rem var(--paper-faded-color);
/* set border for table content */
}
div.modalbox {
border-radius: 0;
border: none;
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
/*-- tags --*/
#main-content .page-tags > span { padding-block-start: 0.325rem; }
#main-content .page-tags a {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.95em;
background-color: #FDFDFD;
border-radius: 0.5rem 0;
padding: 0.175rem 0.375rem;
box-shadow: 0.075em 0.075em 0.325em 0 var(--paper-shadow-color);
}
#main-content .page-tags a::before {
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background-color: var(--paper-background-color);
box-shadow: inset 0.075em 0.075em 0.1em 0 var(--paper-shadow-color);
}
/* ---- FOOTNOTES ---- */
.hovertip {
box-shadow: 0px 0px 0.25rem var(--paper-shadow-color);
}
/* ---- TABS ---- */
.yui-navset .yui-nav { border-color: var(--paper-ink-color); }
.yui-navset.yui-navset-top .yui-nav li {
flex-grow: 1;
}
.yui-navset.yui-navset-top .yui-nav li a {
border-width: 0;
}
.yui-navset .yui-content {
padding: .5rem;
border: none;
background-color: var(--paper-background-color);
box-shadow: 0 0 0.25rem var(--paper-shadow-color);
}
/* ---- BOTTOM AREA ---- */
#footer {
color: var(--paper-faded-color);
background: transparent;
}
#footer a { color: var(--paper-ink-color); }
#license-area {
background-color: var(--paper-block-color);
background-image:
linear-gradient( to bottom,
#00000028 0%,
transparent var(--top-layer-shadow)
);
padding-block: .675rem;
}
#footer-bar {
background-color: var(--paper-block-color);
}
/* ---- CUSTOM SYNTAX ---- */
.logo {
position: absolute;
width: 10.5rem;
inset-block-start: calc(var(--sp_final-header-height)*-1 - 0.5rem);
inset-inline-start: -14.325rem;
z-index: -1;
pointer-events: none;
}
@media (max-width: 767px) {
.logo {
width: max(36%, 10.5rem);
inset-block-start: calc(var(--top-layer-height)*-0.5 - 0.5rem);
inset-inline-start: 50%;
transform: translateX(-50%);
}
}
.header-container-ex {
padding-top: 0.5em;
clear: both;
}
.header-container-ex .scp-image-block {
margin: 0 0 0.5rem 1.875rem;
width: min(42.5%, 300px)!important;
}
.header-container-ex .header-info {
display: flow-root;
margin-bottom: 1.75em;
}
.header-container-ex .header-info .header-info-flex {
display: flex;
}
.text-item {
flex-grow: 1;
text-align: center;
}
.text-item p {
margin-block: 0.425em;
}
@media (max-width: 960px) and (min-width: 767px), (max-width: 580px) {
.header-container-ex {
display: flex;
flex-direction: column;
}
.header-container-ex .header-info {
order: -1;
}
.header-container-ex .scp-image-block {
width: calc(275px + 5vw)!important;
margin: -1.25em auto 0.5em;
}
}
/* ---- MOBILE QUERY ---- */
@media (max-width: 767px) {
#side-bar { background-color: var(--top-layer-color); }
#page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr {
margin: 2.5em -1.25rem;
}
}
/*--- deprecated, kept for legacy purpose ---*/
.header-container {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
position: relative;
justify-content: space-around;
align-content: space-between;
width: 100%;
left: 0;
align-items: flex-start;
row-gap: 2px;
}
.grid-item {
flex-grow: 1;
min-width: 25%;
text-align: center;
margin: 8px 6px;
}
@media (max-width: 1200px) {
.grid-item {
min-width: 50%;
}
}
.textbox {
position: absolute;
width: 42%;
top: 7.5rem;
}
@media (max-width: 960px) and (min-width: 767px), (max-width: 666px) {
.textbox {
position: relative;
width: 100%;
top: 0;
}
}
[[/code]]
[[/iftags]]
[[iftags +component]]
[[>]]
[[module Rate]]
[[/>]]
[[div style="border: solid 2px #ededed; padding: 0.5rem;"]]
This is a meta-component made by [[*user EstrellaYoshte]] to be used as an assistive layer for theme-making.
To use, put the following:
> @@[[include :scp-wiki:component:sigma-plus]]@@
Sigma+, by itself, preserves most of the original aesthetics while using more modern CSS conventions and properties, including:
* Extensible CSS variables
* Grid and flex-based layout
* Fully tab-able navigation
* RTL direction compliance
+++ Developer's Note
The principal idea of the component is to alleviate the burden of resolving the site theme's outdated base layout, which tends to either limit the amount of customization implemented, massively increase CSS complexity/overhead to implement the desired layout, further worsens the situation with more unoptimized CSS, or some unholy combination of the three.
Sigma+ limits itself to re-implementing semantic and visual flow for the most part to maintain the highest possible passthrough as a compatibility layer, with a few exceptions:
* **Header decoration**: Originally a background-image on {{#container-wrap}}, which both semantically divorce it from the actual {{#header}} and {{#top-bar}}, and makes it unresponsive to change in size and layout (from end-user settings, browser defaults, screen size, etc.) Remade into {{background-image}} for both divs.
* **Top Bar dropdowns**: modified to be better responsive to screen sizes, as well as overriding generally annoying styles from Wikidot's default. Made tab-navigable.
* **Rate & Info module**: significantly restyled for better semantic separation and easier to modify with variables. Undid Info module's idiosyncratic CSS.
* **Tabs**: Replaced the spritesheet used to style the tabs with CSS variables. Slightly less annoying to deal with.
+++ Example
[[image https://scp-wiki.wdfiles.com/local--files/component%3Asigma-plus/plus-example.png]]
[[div class="code"]]
:root {
@@ --header-title: "We don't have a 55";@@
@@ --sp_header-height: 21.75rem;@@
}
[[/div]]
[[/div]]
++ Source Code:
[[code type="css"]]
:where(:root) {
--header-title: "SCP Foundation";
--header-subtitle: "Secure, Contain, Protect";
--sp_header-title-size: min(calc(2.675rem * var(--sp_header-title-scale)), calc(1.25rem * var(--sp_header-title-scale) + 2.5vw));
--sp_header-subtitle-size: min(calc(.875rem * var(--sp_header-subtitle-scale)), calc(0.475rem * var(--sp_header-subtitle-scale) + 1.25vw));
--sp_header-title-scale: 1;
--sp_header-subtitle-scale: 1;
--sp_header-logo: url(https://scpwiki.github.io/sigma/images/header-logo.svg);
--sp_header-logo-size: 6.25rem;
--sp_header-logo-adaptive-size: min(var(--sp_header-logo-size), calc(var(--sp_header-logo-size)*0.575 + 5vw));
--sp_header-height: 8.75rem;
--sp_header-gradient-top-color: #000000;
--sp_header-gradient-top-stop: .4;
--sp_header-gradient-bottom-color: #6B4040;
--sp_header-gradient-bottom-stop: .95;
--sp_diagonal-stripes-angle: 45deg;
--sp_diagonal-stripes-width: .08rem;
--sp_diagonal-stripes-gap: .22rem;
--sp_diagonal-stripes-color: #FFAFAF09;
--sp_top-bar-height: 1.375rem;
--sp_top-bar-gradient-top-color: #535353;
--sp_top-bar-gradient-bottom-color: #3B3B3B;
--sp_top-bar-link-color: #fff;
--sp_top-bar-link-hover-color: #a01;
--sp_top-bar-link-hover-background: #fff;
--sp_dropdown-width: calc(8.25rem + 2.25vw);
--sp_dropdown-background: #eee;
--sp_dropdown-link-color: var(--sp_top-bar-link-hover-color);
--sp_dropdown-link-hover-color: var(--sp_top-bar-link-hover-color);
--sp_dropdown-link-background: transparent;
--sp_dropdown-link-border: 0.05rem solid #ddd;
--sp_dropdown-link-hover-background: var(--sp_top-bar-link-hover-background);
--sp_side-bar-width: 14rem;
--sp_area-max-width: 62.5rem;
--sp_area-min-margin: 1.25rem;
--sp_area-comp-margin: max(calc((100vw - var(--sp_area-max-width))/2), var(--sp_area-min-margin));
--sp_final-header-height: calc(var(--sp_header-height) + var(--sp_top-bar-height));
--sp_rate-module-text-color: #FFF;
--sp_rate-module-background: #633;
--sp_rate-module-sub-color: #966;
--sp_rate-module-active-color: var(--sp_rate-module-text-color);
--sp_rate-module-button-color: var(--sp_rate-module-background);
--sp_rate-module-button-background: #fff6f0;
--sp_rate-module-button-hover-color: var(--sp_rate-module-active-color);
--sp_rate-module-button-hover-background: var(--sp_rate-module-background);
--sp_tab-text-color: #000;
--sp_tab-background: #fefefe;
--sp_tab-border-color: #a3a3a3;
--sp_tab-hover-text-color: var(--sp_tab-text-color);
--sp_tab-hover-background: #ffd3d3;
--sp_tab-hover-border-color: var(--sp_tab-border-color);
--sp_tab-selected-text-color: #fff;
--sp_tab-selected-background: #901;
--sp_tab-selected-border-color: #65000b;
--sp_hovertip-background: #fff;
--sp_hovertip-border: 0.05rem solid black;
}
textarea, input { font-family: inherit; }
/*--------------*/
/*--- HEADER ---*/
/*--------------*/
/* unset the faux header bg */
div#container-wrap { background-image: none; }
#header {
/* Recreating (sans top bar) with gradients */
background-image:
/* Diagonal stripes */
repeating-linear-gradient(var(--sp_diagonal-stripes-angle),
var(--sp_diagonal-stripes-color), var(--sp_diagonal-stripes-color) var(--sp_diagonal-stripes-width),
transparent var(--sp_diagonal-stripes-width), transparent var(--sp_diagonal-stripes-gap)),
/* Header gradient colors */
linear-gradient(to bottom,
var(--sp_header-gradient-top-color) calc(var(--sp_header-gradient-top-stop) * var(--sp_header-height)),
var(--sp_header-gradient-bottom-color) calc(var(--sp_header-gradient-bottom-stop) * var(--sp_header-height))
);
background-repeat: repeat-x;
background-size: auto;
background-position: initial;
/* De-styling sigma */
padding-bottom: 0;
height: auto;
width: 100%;
max-width: unset;
min-height: var(--sp_final-header-height);
z-index: initial;
/* Grid layout */
display: grid;
grid-template-areas:
". login login ."
". . . ."
". h1 search ."
". h2 search ."
". . . ."
"top-bar top-bar top-bar top-bar";
grid-template-rows: auto 1fr auto auto 1fr auto;
grid-template-columns: var(--sp_area-comp-margin) 1fr auto var(--sp_area-comp-margin);
}
/* Header logo */
#header::before {
content: "";
display: block;
background: var(--sp_header-logo) no-repeat center;
background-size: contain;
grid-row: 2/6;
grid-column: 2/3;
width: var(--sp_header-logo-adaptive-size);
}
/*--------------*/
/*--- TOP BAR ---*/
/*--------------*/
#top-bar {
grid-area: top-bar;
/* De-styling sigma-9 */
position: relative;
z-index: initial;
top: initial; right: initial;
max-width: unset;
line-height: unset;
height: 100%;
font-size: .875em;
padding-inline: var(--sp_area-min-margin);
box-sizing: border-box;
min-height: var(--sp_top-bar-height);
/* Recreating top bar image with gradients */
background-image:
linear-gradient(to bottom,
var(--sp_top-bar-gradient-top-color) 0%,
var(--sp_top-bar-gradient-bottom-color) 100%);
}
#top-bar > div[class*="top-bar"] {
max-width: var(--sp_area-max-width);
height: 100%;
margin: auto;
position: static;
left: initial;
bottom: initial;
z-index: initial;
}
#top-bar ul, #top-bar li {
float: none;
}
#top-bar div[class*="top-bar"] > ul {
height: 100%;
display: flex;
justify-content: end;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
max-height: unset;
border: none;
line-height: 1.275;
color: var(--sp_top-bar-link-color);
padding: 0;
padding-inline: calc(var(--sp_dropdown-width)*0.05 + 0.25vw);
box-sizing: border-box;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a:hover,
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:is(.sfhover, :hover, :focus-within) > a {
color: var(--sp_top-bar-link-hover-color);
background: var(--sp_top-bar-link-hover-background);
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
left: initial;
min-width: max(100%, var(--sp_dropdown-width));
width: max-content;
background: var(--sp_dropdown-background);
box-sizing: border-box;
z-index: 3;
visibility: visible;
pointer-events: none;
opacity: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:where(:not(:last-child)) > ul {
inset-inline-start: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:where(:last-child) > ul {
right: initial;
inset-inline-end: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li:is(.sfhover, :hover, :focus-within) ul {
pointer-events: auto;
opacity: 1;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
min-width: max-content;
width: 100%;
box-sizing: border-box;
line-height: 1.5;
overflow: initial;
max-height: initial;
padding: 0.125em 0.75em;
border-top: var(--sp_dropdown-link-border);
color: var(--sp_dropdown-link-color);
background: var(--sp_dropdown-link-background);
text-align: start;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a:is(:hover,:focus) {
color: var(--sp_dropdown-link-hover-color);
background: var(--sp_dropdown-link-hover-background);
}
#top-bar .open-menu, #top-bar .open-menu > p { display: contents; }
#top-bar .open-menu a { z-index: 9; }
/*--------------*/
/*--- LOGIN ---*/
/*--------------*/
#login-status {
top: initial;
right: initial;
position: relative;
z-index: 3;
grid-area: login;
text-align: end;
padding-block-start: 0.5rem;
}
#account-options {
right: initial;
inset-inline-end: 0;
inset-block-start: 100%;
display: block!important;
opacity: 0;
pointer-events: none;
transition: opacity 0.075s linear;
}
#account-topbutton:focus + #account-options,
#account-options:is(:hover, :focus-within) {
opacity: 1;
pointer-events: auto;
}
/* Safari support */
@supports (-webkit-hyphens: none) {
#account-topbutton:hover + #account-options {
opacity: 1;
pointer-events: auto;
}
}
/*--------------*/
/*--- SEARCH ---*/
/*--------------*/
#search-top-box {
grid-area: search;
position: relative;
right: initial;
top: initial;
width: auto;
display: flex;
align-items: center;
text-align: unset;
z-index: initial;
}
#search-top-box-form {
display: flex;
gap: 0.325rem;
}
#search-top-box-input, #search-top-box-form input[type=submit] {
margin: 0;
appearance: none;
}
/*------------------*/
/*--- HEADER TEXT ---*/
/*------------------*/
#header h1 { grid-area: h1; }
#header h2 { grid-area: h2; }
#header h1, #header h2 {
margin-left: initial;
padding: 0;
padding-inline-start: calc(var(--sp_header-logo-adaptive-size)*1.05);
float: none;
max-height: initial;
font-size: 1rem;
}
#header h1 a, #header h2 span {
margin: 0;
padding: 0;
line-height: 1.125;
max-height: initial;
max-width: max-content;
display: inline-block;
font-size: 0rem;
letter-spacing: 0;
}
#header h1 a::before {
content: var(--header-title);
font-size: var(--sp_header-title-size);
}
#header h2 span::before {
content: var(--header-subtitle);
font-size: var(--sp_header-subtitle-size);
letter-spacing: 0.05vw;
}
/*-----------------------*/
/*-----------------------*/
/*-----------------------*/
/*------------------*/
/*--- MAIN AREA ---*/
/*------------------*/
#content-wrap {
min-height: unset;
width: calc(100% - var(--sp_area-min-margin)*2);
display: flex;
max-width: var(--sp_area-max-width);
column-gap: 2.325rem;
}
#main-content {
padding: 0;
margin: 0;
max-width: 100%;
min-width: 0rem;
flex: 1 1 auto;
overflow-wrap: break-word;
}
#page-content { font-size: unset; }
/* Side Bar */
@media not all and (max-width: 767px) {
#side-bar {
position: static;
inset: initial;
}
}
div#side-bar {
width: var(--sp_side-bar-width);
flex: 0 0 var(--sp_side-bar-width);
align-self: start;
}
/* Breadcrumbs */
#breadcrumbs, .pseudocrumbs {
display: flex;
flex-wrap: wrap;
column-gap: 0.55ch;
}
.pseudocrumbs > p { display: contents; }
/*--------------------*/
/*--- USER DISPLAY ---*/
/*--------------------*/
.printuser {
display: inline-flex;
align-items: baseline;
grid-gap: 0.25em;
text-indent: 0;
}
.printuser a { margin-right: 0; }
.printuser > a:first-child {
display: flex;
user-select: none;
align-self: center;
min-width: max-content;
}
.printuser > a:first-child img {
height: 1.25em;
width: 1.25em;
padding: 0;
padding-left: 0.5em;
object-fit: contain;
background-size: cover;
overflow: hidden;
margin: 0;
}
/*-----------------*/
/*--- RATE & INFO MODULE ---*/
/*-----------------*/
/* Baseline reset */
div.page-rate-widget-box,
div.rate-box-with-credit-button {
display: inline-flex;
align-items: center;
background-color: var(--sp_rate-module-background);
border: none;
padding: 0.075em;
margin-right: 0;
}
div.page-rate-widget-box .cancel a:hover { background: transparent; }
/*-----------------*/
div.page-rate-widget-box {
flex-wrap: wrap;
}
div.page-rate-widget-box .rate-points {
padding: 0 .675em;
color: var(--sp_rate-module-text-color);
}
#main-content div.page-rate-widget-box span:is(.rate-points, .btn) {
border: none;
border-radius: unset;
background: transparent;
}
.page-rate-widget-box :is(.rateup, .ratedown) a {
margin: 0;
color: var(--sp_rate-module-button-color);
background-color: var(--sp_rate-module-button-background);
}
.page-rate-widget-box :is(.rateup, .ratedown) a:is(:hover,:focus) {
color: var(--sp_rate-module-button-hover-color);
background-color: var(--sp_rate-module-button-hover-background);
}
div.page-rate-widget-box .cancel a { color: var( --sp_rate-module-sub-color); }
div.page-rate-widget-box .cancel a:is(:hover,:focus) { color: var( --sp_rate-module-active-color); }
/*-----------------*/
div.rate-box-with-credit-button {
align-items: stretch;
}
div.rate-box-with-credit-button .page-rate-widget-box {
background-color: transparent;
border-radius: inherit;
padding: 0;
}
div.rate-box-with-credit-button .creditButton {
display: block;
}
div.rate-box-with-credit-button .creditButton p {
display: contents;
font-size: unset;
}
div.creditButton p a {
display: flex;
align-items: center;
justify-content: center;
font-size: .925em;
width: 1.375em;
height: 100%;
color: var( --sp_rate-module-text-color);
padding: 0; padding-top: .1425em;
border: 0;
border-inline-start: solid 0.05em var( --sp_rate-module-sub-color);
box-sizing: border-box;
margin: 0;
}
div.creditButton p a:is(:hover,:focus) { color: var(--sp_rate-module-button-hover-color); }
:is(div,ul).creditRate {
display: block;
float: none;
text-align: end;
margin-right: 0;
}
div.creditRate .rateBox { display: contents; }
div#u-credit-view, div#u-credit-otherwise {
display: grid;
place-content: center;
}
div.modalcontainer {
position: relative;
top: unset;
bottom: unset;
left: unset;
right: unset;
height: auto;
}
div.modalbox {
display: flex;
flex-direction: column;
}
/*-------------*/
/*--- IMAGE BLOCK ---*/
/*-------------*/
div.scp-image-block.block-right {
margin-right: 0;
}
div.scp-image-block.block-left {
margin-left: 0;
}
@media screen and (max-width: 640px) {
div.scp-image-block:is(.block-right,.block-left) {
margin: .75em auto; float: none;
}
}
/*-------------*/
/*--- TABS ---*/
/*-------------*/
.yui-navset { clear: both; }
.yui-navset .yui-nav {
display: flex;
flex-wrap: wrap;
}
.yui-navset.yui-navset-top .yui-nav :is(li, .selected) {
display: block;
margin: 0;
padding: 0;
}
.yui-navset.yui-navset-top .yui-nav li a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
border-width: 0.05rem;
box-sizing: border-box;
padding: 0.325rem 0.625rem;
}
.yui-navset.yui-navset-top .yui-nav :is(li, .selected) a em {
position: static;
inset: unset;
border: none;
padding: 0;
}
/* ------------------------- */
.yui-navset.yui-navset-top .yui-nav li a {
color: var(--sp_tab-text-color);
background: var(--sp_tab-background);
border-color: var(--sp_tab-border-color);
}
.yui-navset.yui-navset-top .yui-nav li a:where(:hover,:focus) {
color: var(--sp_tab-hover-text-color);
background: var(--sp_tab-hover-background);
border-color: var(--sp_tab-hover-border-color);
}
.yui-navset.yui-navset-top .yui-nav .selected a {
color: var(--sp_tab-selected-text-color);
background: var(--sp_tab-selected-background);
border-color: var(--sp_tab-selected-border-color);
}
/*-------------*/
/*--- FOOTNOTE ---*/
/*-------------*/
.hovertip {
background: var(--sp_hovertip-background)!important;
border: var(--sp_hovertip-border)!important;
}
/*-------------*/
/*--- TAGS ---*/
/*-------------*/
#main-content .page-tags { text-align: start; }
#main-content .page-tags span {
max-width: max-content;
display: flex;
flex-wrap: wrap;
grid-gap: 0.375rem;
}
#main-content .page-tags a {
margin: 0;
}
/*------------------*/
/*--- BOTTOM OPTIONS ---*/
/*------------------*/
#page-info, .page-watch-options, .page-options-bottom {
text-align: end;
height: auto;
}
:where(#page-options-container) .page-options-bottom a {
display: inline-block;
}
#who-rated-page-area > div {
column-width: 13.75em;
column-gap: 0.75rem;
}
/*------------------*/
/*--- END AREA ---*/
/*------------------*/
#footer {
display: flex!important;
flex-wrap: wrap;
text-align: center;
justify-content: center;
align-items: baseline;
grid-gap: 0.5ch;
}
#footer .options {
display: flex!important;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
float: none;
order: 1;
width: auto;
font-size: 0;
margin-inline: 0.25rem;
text-align: inherit;
}
#footer .options a {
display: flex;
align-items: center;
font-size: 0.625rem;
padding-inline: 0.375rem;
border-inline-start: currentColor solid 0.05rem;
}
#license-area {
padding-inline: var(--sp_area-min-margin);
}
#footer-bar {
max-width: 100%;
margin: 0 auto;
border: none;
padding: 0 var(--sp_area-comp-margin);
}
#footer-bar .units {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
padding: .5rem;
}
#footer-bar .unit {
float: none;
width: auto;
flex-basis: 10.25rem;
}
/*------------------*/
/*--- MOBILE Q ---*/
/*------------------*/
@media (max-width: 767px) {
#top-bar { padding-inline: 0; }
#top-bar div[class*="top-bar"] > ul { justify-content: center; }
#top-bar div[class*="top-bar"] > ul > li { flex-grow: 1; }
}
[[/code]]
[[/iftags]]
[[module css]]
@import url(https://scp-wiki.wdfiles.com/local--code/component%3Asigma-plus/1);
[[/module]]
[[module CSS]]
@import url('https://scp-wiki.wdfiles.com/local--code/theme%3Apaperstack/1');
[[/module]]
[[div_]]
[!--
Styling component for the EN Interwiki, based on the CN Interwiki by 7happy7 and Sekai-s.
Please note that as of 2022-03-15, the new EN interwiki is not yet active on the EN SCP Wiki, so this styling component will not yet work.
Interwiki: https://scpwiki.com/interwiki
Source: https://github.com/scpwiki/interwiki
See also: https://scpwiki.com/how-to-create-a-branch-of-the-scp-foundation
Usage:
On the page that intends to restyle the Interwiki:
[[include :scp-wiki:component:interwiki-style
| priority=X
| theme=<link to CSS stylesheet>
| css=<URI-encoded CSS>
]]
The `priority` value must be set to a number that is 1 greater than the priority of the theme that this theme is extending.
Examples:
- The base theme of the site (for the SCP Wiki, this is Sigma-9) has a priority of 0.
- A CSS theme designed to be used on pages that are already styled with Sigma-9 (i.e. a theme that extends Sigma-9) would have a priority of 1.
- The Black Market theme extends the Black Highlighter theme, which has a priority of 2; therefore the Black Market theme would have a priority of 3.
The `theme` value is optional, and can be a URL to a CSS stylesheet e.g. a CSS theme.
The `css` value is optional, and can be URI-encoded CSS to apply directly to the Interwiki. To URI-encode CSS, see https://meyerweb.com/eric/tools/dencoder
--]
[[embed]]
<iframe src="//interwiki.scpwiki.com/styleFrame.html?priority=1&theme=https://scp-wiki.wdfiles.com/local--code/theme%3Apaperstack/1&css={$css}" style="display: none"></iframe>
[[/embed]]
[[/div]]
[[iftags +component]]
[[div style="border: solid 2px #ededed; padding: 0.5rem; margin: 4px;"]]
This is a component to make the mobile sidebar button active on desktop-size screen.
To use, put the following:
> @@[[include :scp-wiki:component:toggle-sidebar]]@@
If used with a theme, it's recommended to put said theme after this {{[[include]]}}.
//(Use [[[component:toggle-sidebar-bhl|this version]]] by [[*user Woedenaz]] if you're using Black Highlighter)//
[[/div]]
----
[[code type="CSS"]]
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
#top-bar .open-menu a {
position: fixed;
top: 0.5em;
left: 0.5em;
z-index: 5;
font-family: 'Lucida Sans Unicode','Lucida Grande','Lucida Sans','Times New Roman',Helvetica,Roboto,sans-serif;
font-size: 30px;
font-weight: 700;
width: 30px;
height: 30px;
line-height: 0.9em;
text-align: center;
border: 0.2em solid #888;
background-color: #fff;
border-radius: 3em;
color: #888;
pointer-events: auto;
}
@media not all and (max-width: 767px) {
#top-bar .mobile-top-bar {
display: block;
pointer-events: none;
}
#top-bar .mobile-top-bar li {
display: none;
}
#main-content {
max-width: 44.5rem;
margin: 0 auto;
padding: 0;
transition: max-width 0.2s ease-in-out;
}
#side-bar {
display: block;
position: fixed;
top: 0;
left: -18rem;
width: 15.25rem;
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
background-color: rgba(0,0,0,0.1);
transition: left 0.4s ease-in-out;
scrollbar-width: thin;
}
#side-bar:target {
left: 0;
}
#side-bar:focus-within {
left: 0;
}
#side-bar:target .close-menu {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-left: 17rem;
opacity: 0;
z-index: -1;
visibility: visible;
}
#side-bar:not(:target) .close-menu { display: none; }
#top-bar .open-menu a:hover {
text-decoration: none;
}
}
[[/code]]
[[/iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--code/component%3Atoggle-sidebar/1);
[[/module]]
[[module CSS]]
:root {
--header-subtitle: "SIGMA THEMES";
--sp_header-title-scale: 1.25;
--sp_header-subtitle-scale: 1.875;
}
#header h1 a::before, #header h2 span::before {
font-family: 'Sans Normalcy', 'Nanum Gothic', 'Arial', sans-serif;
}
body {
background-image: linear-gradient(
to bottom,
#FCFCFC, #FCFCFC 100%);
}
div#extra-div-1 {
height: 140px;
width: 100%;
top: 28px;
position: absolute;
background: url("https://scp-wiki.wdfiles.com/local--files/sigma-9-themes/SCP_F.png");
background-size: contain;
background-repeat: no-repeat;
background-position: calc(50vw - 380px) 50%;
z-index: -1;
}
@media (max-width: 767px) {
div#extra-div-1 {
opacity: 0.2;
background-position: 50% 50%;
}
}
#main-content { max-width: 100%; margin: 0 auto; }
#side-bar {
background-color: #FCFCFC;
border: solid 1px #ccc;
}
#side-bar .side-block { box-shadow: none; }
#top-bar div.open-menu a {
box-shadow: none;
border: solid 2px #ccc;
color: #333;
}
hr {
height: 0;
background-color: transparent;
border-top: 1px solid #ccc;
}
#page-content .rate-box-with-credit-button {
box-shadow: none;
border: solid 2px #ccc;
}
#page-content h1 {
border-bottom: solid 1px #ccc;
margin: 0 0 0.6em;
}
#main-content .page-tags a {
background-color: none;
margin: initial;
padding: 0.17rem;
box-shadow: none;
}
#main-content .page-tags a:before {
content: unset;
}
/* ----------*/
.tcontainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: space-between;
gap: .75rem;
}
.caser {
background-color: white;
width: calc(11rem + 1.5vw);
padding: .5rem;
box-sizing: border-box;
border: solid 1px #ccc;
display: grid;
row-gap: .675rem;
text-align: center;
transition: transform .15s;
line-height: 1.1;
position: relative;
}
.caser > p { display: contents; }
.caser h3 {
font-size: 1.175em;
margin: 0;
}
.caser > a { display: block; }
.caser img.image {
width: 100%;
height: calc(10.625rem + 1vw);
object-fit: cover;
object-position: top;
}
.caser:is(:hover, :focus-within) {
transform: scale(1.52);
z-index: 2;
}
.hoverdesc {
position: absolute;
box-sizing: border-box;
background: white;
border: solid 1px #ccc;
width: calc(11rem + 1.5vw);
top: 100%; left: 50%;
transform: translateX(-50%);
margin-top: -5rem;
padding: 0.4rem;
opacity: 0;
font-size: 70%;
pointer-events: none;
transition: margin-top 0.3s cubic-bezier(.08,.72,.5,.94), opacity 0.175s linear;
z-index: -1;
word-break: unset;
}
.caser:hover .hoverdesc,
.caser .hoverdesc:hover {
margin-top: 0;
opacity: 1;
pointer-events: all;
}
.caser:focus-within .hoverdesc{
margin-top: 0;
opacity: 1;
pointer-events: all;
}
.anchor {
position: sticky;
height:0;
top: 0;
}
.sidebox {
margin-top: 16px;
max-height: calc(92vh - 24px);
position: absolute;
top: 0;
right: -14em;
z-index: 4;
box-sizing: border-box;
}
div#toc {
display: block;
box-sizing: border-box;
font-size: 90%;
box-shadow: none;
border: solid 1px #ccc;
max-height: 85vh;
overflow-y: auto;
}
@media (max-width: 1384px) {
.sidebox {
display: none;
}
}
[[/module]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--code/info%3Astyle/1);
[[/module]]
[[ul class="creditRate"]]
[[li class="rateBox folded"]]
[[div_ class="rate-box-with-credit-button"]]
[[module Rate]]
[[div class="creditButton foldable-list-container"]]
[# ]
[[/div]]
[[/div]]
[[div id="credit-view"]]
[[div_ class="fader foldable-list-container"]]
[# close]
[[/div]]
[[div class="modalcontainer"]]
[[div class="modalbox"]]
[[=]]
++* Info
[[/=]]
------
[[div_ class="close-credits foldable-list-container"]]
[# X]
[[/div]]
[[div class="credit first"]]
[[=]]
Co-written by [[*user EstrellaYoshte]], [[*user Lt Flops]], and [[*user Ralliston]]
**[[[estrellayoshte | EstrellaYoshte's Authorpage]]]**
**[[[floppyphoenix | Lt Flops' Authorpage]]]**
**[[[ralliston-s-authorpage | Ralliston's Authorpage]]]**
[[/=]]
[[/div]]
------
[[div class="creditBottomRate"]]
[[div]]
[[module Rate]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/li]]
[[/ul]]
~~~~
[[div class="anchor"]]
[[div class="sidebox"]]
[[toc]]
[[/div]]
[[/div]]
+ What Is This?
This is a (relatively) exhaustive list of all site themes based on Sigma-10 -- the Wiki's main theme -- sorted alphabetically by author.
Hover over any image to view its blurb. Each one explains (relatively) what the theme is for. Or, click the image to proceed to its theme page and use it directly. To view the blurbs on mobile, tap the frame below the image rather than the image itself. That way, the blurb will show up rather than you getting redirected to the theme page.
For rules on contributing, please see the [#Part1 Editorial Guide].
@@ @@
@@ @@
+ Theme Contributors
@@ @@
++ [[[dr-mackenzie | Aelanna]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image sigma-9.png link="https://scp-wiki.wikidot.com/theme:site"]]
+++* Sigma-10 — //Site Theme//
[[span class="hoverdesc"]]The Wiki's Charming Stylish Semblance, c. 2014. Co-opted with [[*user Dr Devan]].[[/span]]
[[/div]]
[[div class="caser"]]
[[image pets.png link="https://scp-wiki.wikidot.com/theme:pet"]]
+++* Super Cute Pets
[[span class="hoverdesc"]]A Super Cute Theme for all //Super Cute Pets!// articles.[[/span]]
[[/div]]
[[/div]]
----
++ [[[aismallard | aismallard]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image sigma-9-s.png link="https://scp-wiki.wikidot.com/theme:sigma"]]
+++* Sigma-9 (Joke)
[[span class="hoverdesc"]]The Wiki's normal theme, again, but this time with 90% more shitposts.[[/span]]
[[/div]]
[[/div]]
----
++ [https://www.wikidot.com/user:info/c_bonefish c_bonefish]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image ambr.png link="https://scp-wiki.wikidot.com/theme:golden-feast"]]
+++* Golden Feast CSS
[[span class="hoverdesc"]]A luxurious menu design fit for, if not a king, Ambrose Restaurants.[[/span]]
[[/div]]
[[div class="caser"]]
[[image sh.png link="https://scp-wiki.wikidot.com/theme:maxwell-s-silver-hammer"]]
+++* Silver Hammer CSS
[[span class="hoverdesc"]]Theme made for the //Church of Maxwellism// Sub-GoI. Co-created with [[*user Denevola]][[/span]]
[[/div]]
[[div class="caser"]]
[[image queen.png link="https://scp-wiki.wikidot.com/theme:queen-s-gambit"]]
+++* Queen's Gambit
[[span class="hoverdesc"]]Theme made for the //Black Queen// GoI. Shared royalties with [[*user Denevola]][[/span]]
[[/div]]
[[div class="caser"]]
[[image smoke.png link="https://scp-wiki.wikidot.com/theme:the-smell-of-smoke"]]
+++* The Smell Of Smoke CSS
[[span class="hoverdesc"]]Theme made for the //Factory// GoI. Co-manufactured with [[*user Denevola]][[/span]]
[[/div]]
[[div class="caser"]]
[[image cool.png link="https://scp-wiki.wikidot.com/theme:much-cool"]]
+++* Much Cool
[[span class="hoverdesc"]]Theme made for the //AWCY?// GoI. Co-authored with [[*user Denevola]][[/span]]
[[/div]]
[[/div]]
-----
++ [[[Calibri Bold's Mega Cool Author Page|Calibold]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:decom-dept/Decom.%20Dept.%20Thumbnail link="https://scp-wiki.wikidot.com/theme:decom-dept"]]
+++* Decommissioning Dept.
[[span class="hoverdesc"]]Theme of the Decommissioning Department, now released to the public.[[/span]]
[[/div]]
[[/div]]
----
++ [[[reixis-personnel-file|CityToast]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image cargo.png link="https://scp-wiki.wikidot.com/theme:unusual-cargo"]]
+++* Unusual Cargo
[[span class="hoverdesc"]]A papery theme for all sailors and swashbucklers.[[/span]]
[[/div]]
[[/div]]
----
++ [https://www.wikidot.com/user:info/cole-13 Cole 13]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image wa.png link="https://scp-wiki.wikidot.com/theme:writing-anomalies"]]
+++* Writing Anomalies
[[span class="hoverdesc"]]A motif for the anomalous arts and poetry.[[/span]]
[[/div]]
[[div class="caser"]]
[[image wisdom.png link="https://scp-wiki.wikidot.com/theme:words-of-wisdom"]]
+++* Words Of Wisdom Theme
[[span class="hoverdesc"]]Theme made for the //Wandsmen// GoI.[[/span]]
[[/div]]
[[/div]]
----
++ [[[croquembouche | Croquembouche]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image ar.png link="https://scp-wiki.wikidot.com/theme:ar"]]
+++* Anderson Robotics
[[span class="hoverdesc"]]Theme for the //Anderson Robotics// GoI.[[/span]]
[[/div]]
[[div class="caser"]]
[[image ink.png link="https://scp-wiki.wikidot.com/theme:inkblot"]]
+++* Inkblot
[[span class="hoverdesc"]]//Waldon Studio// minor GoI's tailor-made theme.[[/span]]
[[/div]]
[[/div]]
----
++ [[[sexycontainmentprocedures | Cyantreuse]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image bm.png link="https://scp-wiki.wikidot.com/theme:broken-masquerade"]]
+++* Broken Masquerade
[[span class="hoverdesc"]]Backgrounds behind //Broken Masquerade// made manifest.[[/span]]
[[/div]]
[[/div]]
----
++ [http://fondationscp.wikidot.com/dossier-personnel-du-dr-macro DrMacro]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image dj.png link="https://scp-wiki.wikidot.com/theme:dustjacket-sigma"]]
+++* Dustjacket (Sigma-9 Version)
[[span class="hoverdesc"]]The //Wanderers' Library// - modernized, then backported.[[/span]]
[[/div]]
[[div class="caser"]]
[[image offices.png link="https://scp-wiki.wikidot.com/theme:scp-offices-sigma"]]
+++* SCP Offices (Sigma-9 Version)
[[span class="hoverdesc"]]The Old Offices -- now even older. Co-created with [[*user Dr Lekter]].[[/span]]
[[/div]]
[[/div]]
----
++ [[[dr-magnus-personnel-file | DrMagnus]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image magnus-web.png link="https://scp-wiki.wikidot.com/theme:magnus-web-format"]]
+++* Magnus Web Format
[[span class="hoverdesc"]][[*user DrMagnus]]' personal CSS layout.[[/span]]
[[/div]]
[[/div]]
----
++ DukeofYore
[[div class="tcontainer"]]
[[div class="caser"]]
[[image 3moons.png link="https://scp-wiki.wikidot.com/theme:3moons"]]
+++* Three Moons Initiative Theme
[[span class="hoverdesc"]][[[three-moons-initiative-hub |Three Moons Initiative]]] GoI Theme.[[/span]]
[[/div]]
[[/div]]
----
++ [[[ellie3-gimmick-free | Ellie3]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image trans.png link="https://scp-wiki.wikidot.com/theme:scp-trans-pride"]]
+++* SCP Trans Pride
[[span class="hoverdesc"]]Theme for Pride![[/span]]
[[/div]]
[[/div]]
----
++ [https://www.wikidot.com/user:info/erminustay Erminustay]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image wikifot.png link="/theme:wikifot"]]
+++* Wikifot Theme
[[span class="hoverdesc"]]{{ERROR: CSS NOT FOUND}}[[/span]][[/div]][[/div]]
----
++ [https://www.wikidot.com/user:info/etinjat Etinjat]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:magazine/theme-overview.jpg link="https://scp-wiki.wikidot.com/theme:magazine"]]
+++* Magazine
[[span class="hoverdesc"]]A plain and old-fashion theme, with the style of printed matter.
[[/span]]
[[/div]]
[[/div]]
------
++ [[[is-this-thing-on | etoisle]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image y2k.png link="https://scp-wiki.wikidot.com/theme:y2k"]]
+++* Y2K
[[span class="hoverdesc"]]Theme for those who like the early 2000s aesthetics a bit too much.[[/span]]
[[/div]]
[[/div]]
----
++ [[[estrellayoshte | EstrellaYoshte]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image chr.png link="https://scp-wiki.wikidot.com/theme:xmas"]]
+++* Christmas
[[span class="hoverdesc"]]Theme for the snowy holiday seasons. Based on [[*user dc_yerko]]'s work and co-created with [[*user stormbreath]].[[/span]]
[[/div]]
[[div class="caser"]]
[[image paper.png link="https://scp-wiki.wikidot.com/theme:paperstack"]]
+++* Paperstack
[[span class="hoverdesc"]]Theme for those who like their articles clean.[[/span]]
[[/div]]
[[div class="caser"]]
[[image pnb.png link="https://scp-wiki.wikidot.com/theme:penumbra"]]
+++* Penumbra
[[span class="hoverdesc"]]Theme for those who like their articles clean, and in a different color.[[/span]]
[[/div]]
[[div class="caser"]]
[[image simple.png link="https://scp-wiki.wikidot.com/theme:simple-yonder"]]
+++* Simple Yonder
[[span class="hoverdesc"]]Like Sigma-9, but streamlined.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Ascpedia/thumbnail.png link="https://scp-wiki.wikidot.com/theme:scpedia"]]
+++* SCPedia
[[span class="hoverdesc"]]If the SCP Wiki was written by online volunteers-- wait a minute.[[/span]]
[[/div]]
[[div class="caser"]]
[[image aiad.png link="https://scp-wiki.wikidot.com/theme:technoblast"]]
+++* Technoblast
[[span class="hoverdesc"]]The //AIAD// canon, rendered.[[/span]]
[[/div]]
[[div class="caser"]]
[[image mono.png link="https://scp-wiki.wikidot.com/theme:monotypical"]]
+++* Monotypical
[[span class="hoverdesc"]]A theme for giving the wiki a softer look.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Acosmonaut/thumbnail.png link="https://scp-wiki.wikidot.com/theme:cosmonaut"]]
+++* Cosmonaut
[[span class="hoverdesc"]]A theme made for the Oneiroi Collective GoI.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/sigma-9-themes/fish.png link="https://scp-wiki.wikidot.com/theme:fish"]]
+++* Fish
[[span class="hoverdesc"]]April Fools 2022's activity of choice, in which fishes may or may not have been caught. [[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Aoceanbound/oceanbound-thumb.png link="https://scp-wiki.wikidot.com/theme:Oceanbound"]]
+++* Oceanbound
[[span class="hoverdesc"]]Theme divined for the //Seas of Orcadia// canon.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Aspace/spacethumb.png link="https://scp-wiki.wikidot.com/theme:space"]]
+++* Space
[[span class="hoverdesc"]]A generic theme for general use.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Asunside/thumb.png link="https://scp-wiki.wikidot.com/theme:sunside"]]
+++* Sunside
[[span class="hoverdesc"]]Theme illuminated for the Location of Interest //Esterberg//.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Afossil/fossil-thumb.png link="https://scp-wiki.wikidot.com/theme:fossil"]]
+++* Fossil
[[span class="hoverdesc"]]Theme gifted to [[user Pedagon]] for Art Exchange 2023.[[/span]]
[[/div]]
[[/div]]
----
++ [[[https://scp-wiki.wikidot.com/hotfish | Fish^12]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image https://scp-wiki.wikidot.com/local--files/sigma-9-themes/retrofutura2.png link="https://scp-wiki.wikidot.com/theme:retrofutura"]]
+++* Retro Futura
[[span class="hoverdesc"]]For the //Nautilus// Series featuring Captain Nemo. Made for Public Domain Contest.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:black-diamond/thumbdiamond.png link="https://scp-wiki.wikidot.com/theme:black-diamond"]]
+++* Black Diamond
[[span class="hoverdesc"]]For [[*user xexnoncores]]'s Black Diamond Billions series.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:fandom/fanthumb.png link="https://scp-wiki.wikidot.com/theme:fandom"]]
+++* Fandom
[[span class="hoverdesc"]]April Fools from Eventyr! First used in [https://scp-wiki.wikidot.com/fandation Fandation], adapted for generic use.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:shoebill/thumbnail.png link="https://scp-wiki.wikidot.com/theme:shoebill"]]
+++* Shoebill
[[span class="hoverdesc"]]Art Exchange gift for [[*user MetalRavioli]] in their Site-225 series.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:art-deco/decoThumb.png link="https://scp-wiki.wikidot.com/theme:art-deco"]]
+++* Art Deco
[[span class="hoverdesc"]]For the //Machina// tale series featuring the -DE Machine canon. Made during the International Canon Contest.[[/span]]
[[/div]]
[[/div]]
----
++ [[[greenwolf-s-author-page | GreenWolf]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image 3l.png link="https://scp-wiki.wikidot.com/theme:3law"]]
+++* Third Law
[[span class="hoverdesc"]]The //Third Law// canon's distinctive look.[[/span]]
[[/div]]
[[div class="caser"]]
[[image 3lp.png link="https://scp-wiki.wikidot.com/theme:3law-pride"]]
+++* Third Law Pride CSS
[[span class="hoverdesc"]]The //Third Law// canon's prideful look.[[/span]]
[[/div]]
[[div class="caser"]]
[[image 7w.png link="https://scp-wiki.wikidot.com/theme:3law-7ow"]]
+++* 7th Occult War
[[span class="hoverdesc"]]The reds of the //7th Occult War//.[[/span]]
[[/div]]
[[div class="caser"]]
[[image uiu.png link="https://scp-wiki.wikidot.com/theme:ui"]]
+++* Unusual Investigations
[[span class="hoverdesc"]]Theme for the //The Unusual Investigations of Kenneth Spencer and Robin Thorne// series.[[/span]]
[[/div]]
[[/div]]
----
++ HaydenSaintPascal
[[div class="tcontainer"]]
[[div class="caser"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:lampeter-warm/lampeterpreview.png link="https://scp-wiki.wikidot.com/theme:lampeter-warm"]]
+++* Lampeter(warm)
[[span class="hoverdesc"]]"There is beauty in rust." Made for use in the Lampeter canon[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:cosmos/cosmospreview.png link="https://scp-wiki.wikidot.com/theme:cosmos"]]
+++* Cosmos
[[span class="hoverdesc"]]Aesthetic theme with pretty moving stars.[[/span]]
[[/div]]
[[/div]]
----
++ [[[jackalrelated | JackalRelated]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Aturbo-vision-dark/turbodark.PNG link="https://scp-wiki.wikidot.com/theme:turbo-vision-dark"]]
+++* Turbo Vision Dark
[[span class="hoverdesc"]]**TURBODARK** is a sleek, dark theme variant of Turbo Vision, the theme below this one. Retro styling meets modern color.[[/span]]
[[/div]]
[[/div]]
----
++ [[[/jakdragonx-rage-collection|JakdragonX]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image trb.png link="https://scp-wiki.wikidot.com/theme:turbo-vision"]]
+++* Turbo Vision
[[span class="hoverdesc"]]Need an excuse to go back to the 90's? Turbo Vision has you covered! In collaboration with [[*user Croquembouche]].[[/span]]
[[/div]]
[[/div]]
----
++ [[[floppyphoenix | Lt Flops]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Aanon/anon.png link="https://scp-wiki.wikidot.com/theme:anon"]]
+++* Anon
[[span class="hoverdesc"]]A different skin for the //Parawatch// Wiki.[[/span]]
[[/div]]
[[div class="caser"]]
[[image classic.png link="https://scp-wiki.wikidot.com/theme:classic"]]
+++* Classic SCP Foundation
[[span class="hoverdesc"]]Adaptation of the wiki's pre-2014 looks.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/flopstyleDARK.png link="https://scp-wiki.wikidot.com/theme:flopstyle-dark"]]
+++* Flopstyle: DARK
[[span class="hoverdesc"]]A highly customizable fork of both Flopstyle and PLACESTYLE.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle/flopstyleLITE.png link="https://scp-wiki.wikidot.com/theme:flopstyle"]]
+++* Flopstyle: LITE
[[span class="hoverdesc"]][[*user Lt Flops]]' personal CSS layout.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Apack-of-peanuts/PackOfPeanuts.png link="https://scp-wiki.wikidot.com/theme:pack-of-peanuts"]]
+++* Pack Of Peanuts
[[span class="hoverdesc"]]Created for the 173 Fifteenth Anniversary Celebration. Happy Birthday, Peanut![[/span]]
[[/div]]
[[div class="caser"]]
[[image pata.png link="https://scp-wiki.wikidot.com/theme:pataphysics"]]
+++* 'Pataphysics Dept.
[[span class="hoverdesc"]]Theme for one interpretation of the Pataphysics Dept.[[/span]]
[[/div]]
[[div class="caser"]]
[[image sapp.png link="https://scp-wiki.wikidot.com/theme:sapphire"]]
+++* SAPPHIRE
[[span class="hoverdesc"]]Theme for the French GoI //SAPPHIRE//. Created in collaboration with [[*user Uncle Nicolini]] under the guidance of [[*user stormbreath]].[[/span]]
[[/div]]
[[div class="caser"]]
[[image sapp.png link="https://scp-wiki.wikidot.com/theme:saphir"]]
+++* SAPPHIRE Redux
[[span class="hoverdesc"]]Theme for the French GoI //SAPPHIRE//, reimagined with extra doubt (originally by [[*user DrGemini.]]).[[/span]]
[[/div]]
[[/div]]
----
++ [http://www.wikidot.com/user:info/macro-au-micro macro_au_micro]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image raisa.jpg link="https://scp-wiki.wikidot.com/theme:raisa-sigma"]]
+++* RAISA Sigma-9
[[span class="hoverdesc"]]The dataform for the RAISA department.[[/span]]
[[/div]]
[[/div]]
----
++ [[[malycegraves-author | MalyceGraves]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image news.png link="https://scp-wiki.wikidot.com/theme:newspaper"]]
+++* Newspaper
[[span class="hoverdesc"]]The official front of the Site News roundup.[[/span]]
[[/div]]
[[div class="caser"]]
[[image ragn.png link="https://scp-wiki.wikidot.com/theme:ragnarok-theme"]]
+++* Ragnarok
[[span class="hoverdesc"]]The dark outlook of the Ragnarok series.[[/span]]
[[/div]]
[[/div]]
----
++ [http://www.wikidot.com/user:info/mishary Mishary]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image mhtn.jpg link="https://scp-wiki.wikidot.com/theme:manhattan-crisis"]]
+++* Manhattan Crisis
[[span class="hoverdesc"]]Theme for the [[[1998-911-hub|Manhattan Crisis]]] series.[[/span]]
[[/div]]
[[/div]]
----
++ [[[miss-lapis | Miss Lapis]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/pastel_skies_preview.png link="https://scp-wiki.wikidot.com/theme:pastel-skies"]]
+++* Pastel Skies
[[span class="hoverdesc"]]Pastel-colored aesthetic theme made after the sky.[[/span]]
[[/div]]
[[/div]]
----
++ [[[misterfrown | MisterFrown]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Afrownstyle/frownstylethumbnail.png link="https://scp-wiki.wikidot.com/theme:frownstyle"]]
+++* Frownstyle
[[span class="hoverdesc"]]Blue theme made to be blue.[[/span]]
[[/div]]
[[/div]]
----
++ [[[mrpines-author-page | MrPines]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image pl.png link="https://scp-wiki.wikidot.com/theme:prom-labs"]]
+++* Prometheus Labs
[[span class="hoverdesc"]]//Prometheus Labs//' Interface, now available for all.[[/span]]
[[/div]]
[[/div]]
----
++ [http://scp-jp.wikidot.com/author:nanigashi-sato Nanigashi Sato]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image ij-re.png link="https://scp-wiki.wikidot.com/theme:revised-ijamea-theme"]]
+++* Revised IJAMEA
[[span class="hoverdesc"]]Theme for the IJAMEA GoI, reborn.[[/span]]
[[/div]]
[[/div]]
----
++ [[[nagiros | Nagiros]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image nr.png link="https://scp-wiki.wikidot.com/theme:night-rush-theme"]]
+++* Night Rush
[[span class="hoverdesc"]]Theme mostly associated with the //Site-17 Deepwell Catalog// canon, though with no official connections.[[/span]]
[[/div]]
[[/div]]
----
++ [[[natalie-watts | NatVoltaic]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image star.png link="https://scp-wiki.wikidot.com/theme:ad-astra"]]
+++* Ad Astra
[[span class="hoverdesc"]]The settings of //Ad Astra Per Aspera//, visualized.[[/span]]
[[/div]]
[[div class="caser"]]
[[image 2h.png link="https://scp-wiki.wikidot.com/theme:hytoth"]]
+++* Second Hytoth
[[span class="hoverdesc"]]Theme for the //Church of the Second Hytoth// GoI. Adapted from the work of [[*user DrMacro]]. [[/span]]
[[/div]]
[[/div]]
----
++ [https://www.wikidot.com/user:info/newyrose NewyRose]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image hlwn.png link="https://scp-wiki.wikidot.com/theme:halloween"]]
+++* Halloween
[[span class="hoverdesc"]]Theme for that spooky time of the year. Made with assistance from [[*user uncle nicolini]] and [[*user croquembouche]].[[/span]]
[[/div]]
[[/div]]
----
++ [[[peppersghost | PeppersGhost]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image oct.png link="https://scp-wiki.wikidot.com/theme:oct"]]
+++* OCT
[[span class="hoverdesc"]]Theme for the Original Character Tournament.[[/span]]
[[/div]]
[[div class="caser"]]
[[image spc.png link="https://scp-wiki.wikidot.com/theme:spc"]]
+++* Shark Punching Centre
[[span class="hoverdesc"]]The //Shark Punching Centre//'s punchy visuals.[[/span]]
[[/div]]
[[/div]]
----
++ [[[placeholder-mcd-s-authorpage | Placeholder McD]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image oldaiad.png link="https://scp-wiki.wikidot.com/theme:retro-aiad-theme"]]
+++* Retro AIAD
[[span class="hoverdesc"]]//Retro AIAD//'s visual palette.[[/span]]
[[/div]]
[[div class="caser"]]
[[image blnk.png link="https://scp-wiki.wikidot.com/theme:blankstyle"]]
+++* BLANKSTYLE CSS
[[span class="hoverdesc"]]Site-43, //carte blank//. Made for, and co-authored with [[*user HarryBlank]].[[/span]]
[[/div]]
[[/div]]
----
++ [[[queerious| Queerious]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image queer.jpg link="https://scp-wiki.wikidot.com/theme:queerstyle"]]
+++* Queerstyle
[[span class="hoverdesc"]][[*user Queerious]]'s personal prism of colors.[[/span]]
[[/div]]
[[div class="caser"]]
[[image Darkqueer.PNG link="https://scp-wiki.wikidot.com/theme:darkqueer"]]
+++* Darkqueer
[[span class="hoverdesc"]]A dark-mode variant of Queerstyle, with a bit more Forgotten flair.[[/span]]
[[/div]]
[[div class="caser"]]
[[image linearBlack.PNG link="https://scp-wiki.wikidot.com/theme:linear-black"]]
+++* Linear Black
[[span class="hoverdesc"]]The bleak minimalism of an uncaring line -- originally made for [https://scp-wiki.wikidot.com/9000contestqueerious Single File]]].[[/span]]
[[/div]]
[[/div]]
----
++ [[[randomini | Randomini]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image mcd.png link="https://scp-wiki.wikidot.com/theme:mcd"]]
+++* Marshall, Carter & Dark
[[span class="hoverdesc"]]Theme for the half-legal businesses of //Marshall, Carter & Dark//.[[/span]]
[[/div]]
[[/div]]
----
++ [[[rounderhouse-s-author-page | ROUNDERHOUSE]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image aae.png link="https://scp-wiki.wikidot.com/theme:aces-and-eights"]]
+++* Aces and Eights
[[span class="hoverdesc"]]//Aces and Eights// canon, now in parchment.[[/span]]
[[/div]]
[[div class="caser"]]
[[image alex.png link="https://scp-wiki.wikidot.com/theme:alexylva-university"]]
+++* Alexylva University
[[span class="hoverdesc"]]Theme for the //Alexylva University// and all its students.[[/span]]
[[/div]]
[[div class="caser"]]
[[image horizon.png link="https://scp-wiki.wikidot.com/theme:horizon-initiative-theme"]]
+++* Horizon Initiative
[[span class="hoverdesc"]]Theme for the //Horizon Initiative// GoI.[[/span]]
[[/div]]
[[div class="caser"]]
[[image i57.png link="https://scp-wiki.wikidot.com/theme:i57-theme"]]
+++* Facility-57
[[span class="hoverdesc"]]Spanish Branch's //Facility-57// canon's looks, visiting the English Branch. Co-created with [[*user dc_yerko]] and
[[*user uncle nicolini]].[[/span]]
[[/div]]
[[div class="caser"]]
[[image zyn.png link="https://scp-wiki.wikidot.com/theme:kiryu-labs-theme"]]
+++* Kiryu Labs
[[span class="hoverdesc"]]Theme for all articles concerning //Kiryu Labs//.[[/span]]
[[/div]]
[[/div]]
----
++ [http://www.wikidot.com/user:info/shaftmetal Shaftmetal]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image sch.png link="https://scp-wiki.wikidot.com/theme:scheme"]]
+++* Scheme Theme
[[span class="hoverdesc"]]Theme made for the //Cogwork Orthodox Church// Sub-GoI. Co-Created with [[*user thd-glasses]], [[*user Denevola]], and [[*user fluxman]].[[/span]]
[[/div]]
[[/div]]
----
++ [[[silberescher-personnel-file | Silberescher]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image mcdg.png link="https://scp-wiki.wikidot.com/theme:mcd-gray"]]
+++* MC&D (Gray)
[[span class="hoverdesc"]]The look of the very illegal actions of //Marshall, Carter & Dark//.[[/span]]
[[/div]]
[[/div]]
----
++ [[[stormbreath | stormbreath]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image jgt.png link="https://scp-wiki.wikidot.com/theme:just-girly-things"]]
+++* Just Girly Things
[[span class="hoverdesc"]]//Just Girly Things//' UI, with 50% more pink than ever before.[[/span]]
[[/div]]
[[div class="caser"]]
[[image mcf.png link="https://scp-wiki.wikidot.com/theme:mcf"]]
+++* Manna Charitable Foundation
[[span class="hoverdesc"]]//Manna Charitable Foundation//'s colors of help. Originally by [[*user Dr Reach]] and reworked alongside [[*user uncle nicolini]].[[/span]]
[[/div]]
[[div class="caser"]]
[[image minimal.png link="https://scp-wiki.wikidot.com/theme:minimal"]]
+++* Minimal
[[span class="hoverdesc"]]Theme minimalizing the Wiki's looks.[[/span]]
[[/div]]
[[div class="caser"]]
[[image plant.png link="https://scp-wiki.wikidot.com/theme:plant"]]
+++* Super Cool Plants
[[span class="hoverdesc"]]Theme for all who wish the //Super Cool Plants!// event lasted forever.[[/span]]
[[/div]]
[[div class="caser"]]
[[image harmony.png link="https://scp-wiki.wikidot.com/theme:wanderers"]]
+++* Wanderer's (Classic Version)
[[span class="hoverdesc"]]The classic looks of the //Wanderers' Library//, now available to the Jailors. Originally by [[*user ZeroStrider]] and adapted with [[*user Salamander724]].[[/span]]
[[/div]]
[[div class="caser"]]
[[image woaf.png link="https://scp-wiki.wikidot.com/theme:war-on-all-fronts-sigma"]]
+++* War On All Fronts (Sigma-9 Version)
[[span class="hoverdesc"]]The colors of //War On All Fronts//' sea monsters in theme form.[[/span]]
[[/div]]
[[div class="caser"]]
[[image wws.png link="https://scp-wiki.wikidot.com/theme:wilsons"]]
+++* Wilson's Wildlife Solutions
[[span class="hoverdesc"]]The outlook of all critters and volunteers of //Wilson's Wildlife Solutions//. Co-created with [[*user DarkStuff]].[[/span]]
[[/div]]
[[div class="caser"]]
[[image word.png link="https://scp-wiki.wikidot.com/theme:word-processor"]]
+++* Word Processor
[[span class="hoverdesc"]]Theme for those who wish Wikidot was more like Notepad.[[/span]]
[[/div]]
[[div class="caser"]]
[[image af.png link="https://scp-wiki.wikidot.com/theme:crayon"]]
+++* Crayon
[[span class="hoverdesc"]]April Fools 2021's creative decision, where scribbles break the wiki in half.[[/span]]
[[/div]]
[[div class="caser"]]
[[image pumpkin.png link="https://scp-wiki.wikidot.com/theme:parawatch-pumpkin"]]
+++* Parawatch Pumpkin
[[span class="hoverdesc"]]A variant of the Parawatch Anon Theme with orange colors.[[/span]]
[[/div]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/starch-s-lemonade-stand/sigma-10-dark.png link="https://scp-wiki.wikidot.com/theme:dark"]]
+++* Sigma 10 Dark Mode
[[span class="hoverdesc"]]A generic Sigma-10 Dark Mode Theme.[[/span]]
[[/div]]
[[/div]]
----
++ tachymelia
[[div class="tcontainer"]]
[[div class="caser"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:paramycota/preview.webp link="https://scp-wiki.wikidot.com/theme:paramycota"]]
+++* Paramycota
[[span class="hoverdesc"]]//theme from fungi / fungi from theme//[[/span]]
[[/div]]
[[/div]]
-----
++ taylor_itkin
[[div class="tcontainer"]]
[[div class="caser"]]
[[image drw.png link="https://scp-wiki.wikidot.com/theme:wondertainment"]]
+++* Dr. Wondertainment
[[span class="hoverdesc"]]Theme for the //Dr. Wondertainment// GoI and related content. Co-created with [[*user DarkStuff]].[[/span]]
[[/div]]
[[/div]]
----
++ [http://www.wikidot.com/user:info/thd-glasses thd_glasses]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image fmaf.jpg link="https://scp-wiki.wikidot.com/theme:fmaf-theme"]]
+++* MOBILE AIR FORCE
[[span class="hoverdesc"]]Theme for the [[[fmaf-hub|Mobile Air Force]]] group.[[/span]]
[[/div]]
[[/div]]
----
++ [[[tygently-author-page | TyGently]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image sms.png link="https://scp-wiki.wikidot.com/theme:skiesmadestrange"]]
+++* Skies Made Strange
[[span class="hoverdesc"]]Theme for the //Skies Made Strange// series.[[/span]]
[[/div]]
[[div class="caser"]]
[[image 3l2.png link="https://scp-wiki.wikidot.com/theme:3lawcracked"]]
+++* Third Law — Cracked
[[span class="hoverdesc"]]//Third Law// doesn't feel so good.[[/span]]
[[/div]]
[[/div]]
----
++ [https://www.wikidot.com/user:info/thedarkartist TheDarkArtist]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image thalass.png link="https://scp-wiki.wikidot.com/theme:thalassophobia-sigma"]]
+++* Thalassophobia
[[span class="hoverdesc"]]Sigma-9 port of the [[[theme:thalassophobia|BHL Thalassophobia]]] Theme.[[/span]]
[[/div]]
[[/div]]
----
++ [[[the-great-hippo | The Great Hippo]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image parawatch.png link="https://scp-wiki.wikidot.com/theme:creepypasta"]]
+++* Creepypasta
[[span class="hoverdesc"]]//Parawatch//'s interface and site layout, available to the public.[[/span]]
[[/div]]
[[/div]]
----
++ [[[vivarium-s-word-hole | Vivarium]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Alast-frontier/lastfrontier.png link="https://scp-wiki.wikidot.com/theme:last-frontier"]]
+++* Last Frontier
[[span class="hoverdesc"]]Theme for the //Into the Void// settings.[[/span]]
[[/div]]
[[/div]]
----
++ [https://www.wikidot.com/user:info/von-pincier Von Pincier]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image sotm.png link="https://scp-wiki.wikidot.com/theme:sotm"]]
+++* Straight On Till Morning
[[span class="hoverdesc"]]Theme for the //Straight On Till Morning// canon.[[/span]]
[[/div]]
[[/div]]
----
++ [[[the-winkwonk-page|winkwonkboi]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image https://scp-wiki.wikidot.com/local--files/theme:caretaker-sigma/ctsv.PNG link="https://scp-wiki.wikidot.com/theme:caretaker-sigma"]]
+++* Caretaker Theme (Sigma Version)
[[span class="hoverdesc"]]Sigma version of the AEED's theme.[[/span]]
[[/div]]
[[/div]]
----
++ [[[yossipossi-authorphage | Yossipossi]]]
[[div class="tcontainer"]]
[[div class="caser"]]
[[image yossi.png link="https://scp-wiki.wikidot.com/theme:yossistyle"]]
+++* YOSSISTYLE
[[span class="hoverdesc"]]what even anymore. Made for April Fools 2021.[[/span]]
[[/div]]
[[div class="caser"]]
[[image st.png link="https://scp-wiki.wikidot.com/theme:shattered-thoughts"]]
+++* Shattered Thoughts
[[span class="hoverdesc"]]//"All normal life, Peter, consciously or otherwise, resent domination."// Made for the Shattered Thoughts series.[[/span]]
[[/div]]
[[div class="caser"]]
[[image abyss.png link="https://scp-wiki.wikidot.com/theme:ad-abyssum"]]
+++* Ad Abyssum
[[span class="hoverdesc"]]Theme divined for the Department of Tactical Theology.[[/span]]
[[/div]]
[[/div]]
----
++ Others__
[[div class="tcontainer"]]
[[div class="caser"]]
[[image cal.png link="https://scp-wiki.wikidot.com/theme:calibri-logos"]]
+++* Alternate SCP Logos
[[span class="hoverdesc"]]Options for different cool logos, by [[*user Calibold]].[[/span]]
[[/div]]
[[div class="caser"]]
[[image tabs.png link="https://scp-wiki.wikidot.com/component:chicago-spirit"]]
+++* Old-Timey Tabs
[[span class="hoverdesc"]]Old paper file-style tabs, by [[*user PeppersGhost]].[[/span]]
[[/div]]
[[div class="caser"]]
[[image pride.png link="https://scp-wiki.wikidot.com/component:pride-highlighter"]]
+++* Pride Highlighter
[[span class="hoverdesc"]]Numerous Foundation Pride logos, by [[*user Woedenaz]].[[/span]]
[[/div]]
[[div class="caser"]]
[[image template.png link="https://scp-wiki.wikidot.com/component:scp-pride"]]
+++* SCP Pride Template
[[span class="hoverdesc"]]Another Foundation Pride logo, by [[*user The Great Hippo]].[[/span]]
[[/div]]
[[/div]]
@@ @@
@@ @@
[[# Part1]]
+ Editorial Guide
Feel free to add anything you think is missing, or edit the blurb of your theme to your taste!
When editing, please use the following template:
[[div style="background-color: #f8f8f8; border: solid 1px #ccc; padding: 6px; font-family: monospace;"]]
@@++ [[[author-page-link | Author Name]]]@@
@@[[div class="tcontainer"]]@@
@@ @@
@@[[div class="caser"]]@@
@@[[image thumbnail1.png link="https://scp-wiki.wikidot.com/theme:link-to-theme1"]]@@
@@+++* Name1@@
@@[[span class="hoverdesc"]]Short blurb that appears on hover.[[/span]]@@
@@[[/div]]@@
@@ @@
@@[[div class="caser"]]@@
@@[[image thumbnail2.png link="https://scp-wiki.wikidot.com/theme:link-to-theme2"]]@@
@@+++* Name2@@
@@[[span class="hoverdesc"]]Short blurb that appears on hover.[[/span]]@@
@@[[/div]]@@
@@ @@
@@[[/div]]@@
[[/div]]
The thumbnail should have a square(-ish) ratio and (relatively) small filesize.
@@ @@
@@ @@
+ See Also
* [[[black-highlighter-themes|]]]
* [[[css-policy|]]]
[[iftags +component]]
+ How To Use
It is **mandatory** for all articles to have the licensebox citing all images, texts, and excerpts utilized within the piece.
Add this to the bottom of the page, below the wikiwalk footer:
[[div class="blockquote"]]
@@[[include :scp-wiki:component:license-box]]@@
@@> **Filename:** @@
@@> **Name:** (if different from filename)@@
@@> **Author:**@@
@@> **License:**@@
@@> **Source Link:**@@
@@> **Additional Notes:** (Optional)@@
@@> **Derivative Of:** (Situational)@@
@@[[include :scp-wiki:component:license-box-end]]@@
[[/div]]
Let's break down what each of these sections mean.
> @@> **Filename:** @@
Filename is, as the name implies, the name of a file in your article. As per Tech Policy, all files on pages must have a file extension appended after the name. This means that if you upload an image to your article and call it {{mycoolimage-1}}, you are not following the rules. A correct name would be {{mycoolimage-1.png}} or {{mycoolimage-1.jpg}}, or any other similar filetypes. If you are unsure what the file extension of something you intend to upload is, you can check it by right clicking on the file and then pressing 'Properties.'
If you are quoting from a text, write something along the lines of {{Excerpts taken from //Book Title Here//}}. Do not input the entire quote here, just where it comes from.
> @@> **Name:** (if different from filename)@@
This field is where you put the original name of the file. For example, let's say I wanted to use [https://commons.wikimedia.org/wiki/File:Kievitsbloem.jpg this image in my article]. The name of the image is {{Kievitsbloem}}, as is listed on the page. I would then copy that and paste it onto this field. Do not include its file extension (jpg, png, etc).
If you are quoting from a text, list its title here.
If you are using your own creation, you may title it however you please, or you may exclude this field completely.
> @@> **Author:**@@
This field is where you acknowledge the original creator of the media you are using. Looking at [https://commons.wikimedia.org/wiki/File:Kievitsbloem.jpg the same previous image], we can see that the author of the file is {{Rasbak}}. This means I would have to put that name in this field. If you are using commissioned work, you must still cite the original creator.
If you are using your own creation, insert your username.
> @@> **License:**@@
In this section, you must write the file's attached license. This information is typically accessible on the page you are sourcing the file from. [https://commons.wikimedia.org/wiki/File:Kievitsbloem.jpg Following the same example as before], we can see that this particular image is CC BY SA 3.0. Keep in mind that all files must be compatible with the site's license (CC BY SA 3.0) and follow the [[[Image Use Policy]]].
> @@> **Source Link:**@@
This field is typically a direct link to the page where you are taking the file from. Just copy the url from the address bar and paste it here. So for example, using the same image as above, I would put {{@@[https://commons.wikimedia.org/wiki/File:Kievitsbloem.jpg Wikimedia Commons]@@}} in this field. You should replace the text of the hyperlink with the name of the webiste you are taking your file from.
If you are utilizing your own work, link to the page you are posting and title it {{SCP Foundation Wiki}}. However, if you are using your own media that you uploaded to a site like, say, Flickr, you must still follow this step.
> @@> **Additional Notes:** (Optional)@@
This is where you enter any additional information about the file. For example, if it is a composite image, you must state that this file is made up of two different images, and cite all images used in its creation.
> @@> **Derivative Of:** (Situational)@@
This field is only applicable if you are using an image or other form of media that was derived from two or more sources. For example, a mashup would have to cite all of its images here. In order to be properly licenseboxed, copy-past the following syntax underneath the {{Derivative Of:}} line.
[[div class="blockquote"]]
@@> **Name:**@@
@@> **Author:**@@
@@> **License:**@@
@@> **Source Link:**@@
[[/div]]
From there, you simply fill in the information as you would any other file.
-----
+ Examples
Here is an example of a licensebox used in [[[SCP-7726]]], which cites an image from Wikimedia Commons.
[[div class="blockquote"]]
@@[[include :scp-wiki:component:license-box]]@@
@@> **Filename:** gun.png@@
@@> **Name:** Beretta 90TWO closed.JPG@@
@@> **Author:** Praiyachat@@
@@> **License:** CC BY-SA 3.0@@
@@> **Source Link:** [https://commons.wikimedia.org/wiki/File:Beretta_90TWO_closed.JPG Wikimedia Commons]@@
@@[[include :scp-wiki:component:license-box-end]]@@
[[/div]]
Here is an example of a licensebox used in [[[SCP-6999]]], which cites an audio clip.
[[div class="blockquote"]]
@@[[include :scp-wiki:component:license-box]]@@
@@> **Filename:** hymn.mp3@@
@@> **Name:** Nearer, my God, to Thee@@
@@> **Author:** Conway's Band@@
@@> **License:** Public Domain@@
@@> **Source Link:** [https://www.loc.gov/item/jukebox-14234/ Library of Congress]@@
@@[[include :scp-wiki:component:license-box-end]]@@
[[/div]]
Here is an example of a licensebox used in [[[michael-the-kiler|michael the kiler]]], which cites an author using their own creation.
[[div class="blockquote"]]
@@[[include :scp-wiki:component:license-box]]@@
@@> **Filename:** dakilla.jpg@@
@@> **Author:** [[*user ratking666]]@@
@@> **License:** CC BY-SA 3.0@@
@@> **Source Link:** [https://scp-wiki.wikidot.com/michael-the-kiler SCP Foundation Wiki]@@
@@[[include :scp-wiki:component:license-box-end]]@@
[[/div]]
Here is an example of a licensebox used in [[[SCP-7000]]], which cites an author using an image derivative of other images.
[[div class="blockquote"]]
@@[[include :scp-wiki:component:license-box]]@@
@@> **Filename:** WettleBomb.jpg@@
@@> **License:** CC BY 2.0@@
This image is a composite of:
@@> **Name:** 130320-Z-TK422-652@@
@@> **Author:** Oregon National Guard@@
@@> **License:** CC BY 2.0@@
@@> **Source:** [https://www.flickr.com/photos/32031029@N03/8576628356 flickr]@@
@@> **Name:** High Noon Nap@@
@@> **Author:** OakleyOriginals@@
@@> **License:** CC BY 2.0@@
@@> **Source:** [https://www.flickr.com/photos/47264866@N00/13279780754 flickr]@@
@@[[include :scp-wiki:component:license-box-end]]@@
[[/div]]
Here is an example of a licensebox used in [[[SCP-173]]], which does not have any images or other citations, but includes an author listing.
[[div class="blockquote"]]
@@[[include :scp-wiki:component:license-box@@
@@|author=Moto42]]@@
@@[[include :scp-wiki:component:license-box-end]]@@
[[/div]]
Here is an example of a licensebox used in [[[deesoafs|Doctor Everwood Eats Shit On A Frozen Sidewalk]]], which does not have any images or other citations and does not include an author listing.
[[div class="blockquote"]]
@@[[include :scp-wiki:component:license-box]]@@
@@[[include :scp-wiki:component:license-box-end]]@@
[[/div]]
-----
+ A Word On Excerpts/Quotes
If you are using excerpts from passages or quotes, you must still cite them.
Here is an example of a licensebox used in [[[SCP-7010]]], which cites excerpts from a book.
[[div class="blockquote"]]
@@[[include :scp-wiki:component:license-box]]@@
@@> This article contains an excerpt from //[*https://en.wikisource.org/wiki/Leviathan Leviathan]// (1651) by Thomas Hobbes (Public Domain).@@
@@[[include :scp-wiki:component:license-box-end]]@@
[[/div]]
-----
+ A Note On Co-Authoring
In the event you co-author an article with someone or someones, you can add the following syntax to the top of the licensebox to indicate multiple authors.
[[div class="blockquote"]]
@@[[include :scp-wiki:component:license-box@@
@@|author=User1, User2, User3]]@@
@@[[include :scp-wiki:component:license-box-end]]@@
[[/div]]
----
+ A Note On Translations
For translations of works originally written in another language (see our [[[Translations Policy]]] for more information), the licensebox should list the original author (or authors) first, followed by the translator (or translators).
Within the licensebox, link to the original article, as follows:
[[div class="blockquote"]]
@@[[include :scp-wiki:component:license-box@@
@@|author=User1, translated by User2]]@@
@@> **Original Article:** original-url@@
@@[[include :scp-wiki:component:license-box-end]]@@
[[/div]]
If you post a translation of your own work then it is unnecessary to list your own name twice. If you post a translation of a translation (e.g. a Japanese article that was translated into Spanish, then into English), link to the original article, but credit the translator whose work you used as a co-translator.
See [[[SCP-280-JP]]] for an example of a translation with multiple images listed in the License Box.
----
[[size 75%]]This page was originally created by CityToast and was updated on 1/27/2024 by Uncle Nicolini.[[/size]]
@@ @@
@@ @@
@@ @@
@@ @@
= Ignore everything beneath this text.
@@ @@
@@ @@
@@ @@
[[/iftags]]
[[div class="licensebox"]]
[[collapsible show="‡ Licensing / Citation" hide="‡ Hide Licensing / Citation"]]
Cite this page as:
[[module listpages range="."]]
> "%%title_linked%%" by EstrellaYoshte, Lt Flops, and Ralliston, from the [https://scpwiki.com SCP Wiki]. Source: https://scpwiki.com/%%fullname%%. Licensed under [https://creativecommons.org/licenses/by-sa/3.0/ CC BY-SA].
[[/module]]
For information on how to use this component, see the [[[component:license-box|License Box component]]]. To read about licensing policy, see the [[[Licensing Guide]]].
> **Name of the file:** all of the files on this page
> **Source:** N/A
> **License:** CC BY SA 3.0
> **Author:** [[*user EstrellaYoshte]] / [[*user Ralliston]]
[[/collapsible]]
[[/div]]Cite this page as:
"Every Single SCP Wiki Theme" by radian628, from the SCP Wiki. Source: https://scpwiki.com/every-single-theme. Licensed under CC BY-SA.
For information on how to use this component, see the License Box component. To read about licensing policy, see the Licensing Guide.
Filename: All attached .webp images.
Author: See the theme browser tool above. Hover over a theme screenshot to see its authors.
License: CC BY-SA 3.0
Source Link: See linked themes above.
Additional Notes: Every .webp image on this page is a screenshot of a theme: page.
Filename: All attached .js files.
Author:radian628
License: GNU GPLv3
Source Link: https://github.com/radian628/scp-wiki-every-single-theme
Additional Notes: This applies to all .js files attached to this page.
page revision: 836, last edited: 14 Apr 2026 22:14