Components Hub

rating: +139+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
rating: +139+x

Introduction

Welcome to the Components Hub! This is a hub meant for all pages under the component: category. Components are defined, by the 05 Command Tech Hub Tag List, as "A page that is designed to be imported onto other pages via the [[include]] syntax in order to add new design, style or functionality." This doesn't include themes (which modify the look and feel of a page), or more-by pages (which are pages that lists works by certain authors).


Table of Contents

Table of Contents

This page has been split into the four following categories:



- General -

These are components that can work on any page, regardless of the theme being used.

- Sigma-9 -

These are components meant for use only on Sigma-9 pages, and would more than likely break on Black Highlighter or BASALT.

- Black Highlighter -

These are components meant for use only on Black Highlighter pages, and would more than likely break on Sigma-9 or BASALT.

- Technical/Staff -

These are components that are for more technical work or meant only for staff processes. It's unlikely you'll be using these in any articles.


A fifth category can be created if components are made that are exclusive to BASALT, which has yet to occur.


Components


General


This component serves as a semi-customizable navigation system to guide readers through a series. To use it, paste the following at the bottom of your page:

[[include :scp-wiki:component:advanced-navigation-toolbar-source dual= false
|styleNum= one
|prev= articleURL |prevtext= link text
|prevImage= prevImageURL
|hub= hubURL |hubtext= Name
|next= articleURL |nexttext= link text
|nextImage= nextImageURL
]]


Item#: 6776
Level4
Containment Class:
esoteric
Secondary Class:
thaumiel
Disruption Class:
vlam
Risk Class:
caution

This component serves as a header for SCP articles. It shows an SCP's Item Number, Containment Class, Disruption Class, and Risk Class. Definitions of these can be found in this guide. To use it, paste the following somewhere on your page:

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= XXXX
|clearance= #
|container-class= class_here
|secondary-class= class_here
|secondary-icon= http://urlhere.com
|disruption-class= keneq
|risk-class= notice
]]

You can see pages that use ACS via this fancy database made by WoedenazWoedenaz.



๐Ÿ“ŽACS Animation



This component animates the ACS header when the page is being loaded in. To use it, paste the following somewhere on your page:

[[include :scp-wiki:component:acs-animation]]

You can see this component in action on SCP-5935.


Link To Guide
Item#:6776
Clearance Level 4: Clearance
Containment Class: safe
safe-icon.svg
Secondary Class: thaumiel
thaumiel-icon.svg
Disruption Class: #/keneq
keneq-icon.svg
Risk Class: #/caution
caution-icon.svg

Link To Guide
Item#:6776
Clearance Level 4: Clearance
Containment Class: safe
safe-icon.svg
Secondary Class: thaumiel
{$secondary-icon}
Disruption Class: #/keneq
keneq-icon.svg
Risk Class: #/caution
caution-icon.svg

A less detail-heavy version of ACS. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:acs-hybrid-text-bar-source
|version= hybrid/text
|item-number= ####
|clearance-level= #
|containment-class= class_here
|include-secondary= yes/no
|secondary-class= class_here
|secondary-icon= https://urlhere.com
|disruption-class= class_here
|risk-class= class_here
]]


ITEM #:
6776






LEVEL 4
{$clearance-text}UnrestrictedRestrictedConfidencialSecretTop SecretCosmic Top C
Secret
CONTAINMENT CLASS:
esoteric
SECONDARY CLASS:
thaumiel
DISRUPTION CLASS:
keneq
RISK CLASS:
caution

An ACS component that unifies line thickness to 3px and almost halves the size of the header on most devices. To use, paste the following somewhere on your page:

[[include :scp-wiki:component:acs-horm-lite-source
|item-number= XXXX
|clearance= #
|container-class= class_here
|secondary-class= class_here
|secondary-icon= http://urlhere.com
|disruption-class= class_here
|risk-class= class_here
]]


acslitepeppo.png

This component shrinks ACS on most devices, and gives it a slightly different feel. To use it, paste the following somewhere on your page:

[[include :scp-wiki:component:acs-peppo-lite
|item-number= ####
|clearance= #
|container-class= class_here
|secondary-class= class_here
|secondary-icon= http://urlhere.com
|disruption-class= class_here
|risk-class= class_here
]]


acssplit.png

This component allows for both Containment and Secondary Classes to be displayed at the same time. To use it, paste the following somewhere on your page after the [[include]] for ACS:

[[include :scp-wiki:component:acs-peppo-split
|object= class_here
|object-image= http://urlhere.com
|object-color= class_here
|esoteric-color= class_here
]]

The base ACS include should be set to display the Secondary Class, with object, object-image, and object-color set as the Containment Class you want.


ITEM #:โ€‰SCP-6776

LEVEL-โ€Š

CONTAINMENT CLASS: THAUMIEL

DISRUPTION CLASS: KENEQ


Assigned Site


N/A

Site Director


N/A

Research Head


Dr Akabi Hayk

Assigned MTF


N/A

ITEM:โ€‰SCP-6776

LEVEL-โ€Š

CONTAINMENT
CLASS:
THAUMIEL

DISRUPTION
CLASS:
KENEQ


Assigned Site


N/A

Site Director


N/A

Research Head


Dr Akabi Hayk

Assigned MTF


N/A

This component serves as a header for your SCP articles, combining other commonly used headers into a single one. To use it, paste the following somewhere on your page:

[[include :scp-wiki:component:advanced-information-methodology
|XXXX=####
|lv=one/two/three/four/five/fix
|cc=SAFE/EUCLID/KETER/NEUTRALIZED/THAUMIEL
|dc=DARK/VLAM/KENEQ/EKHI/AMIDA
|site=Site-##/ N/A
|dir=Dr Director/ N/A
|head=Dr Doctor/ N/A
|mtf=Name-#/ N/A
]]


This component offers up a fully customizable audio player. To use it, paste the following where you want it to be in your article:

[[include :scp-wiki:component:audio-player-woed-source
|unique-name=secretparty (only words, no numbers)
|audio-file= https://thisisalink.com/PartyTime.mp3 (all audio file types allowed)
|background-color=rgb(252, 252, 252)
|border-color=rgb(215, 215, 215)
|border-radius=0.313rem
|dropshadow-color=rgba(12, 12, 12, 0.15)
|text-color=rgb(80, 0, 2)
|icons-color=rgb(171, 0, 5)
|player-color=rgb(215, 215, 215)
|progress-color=rgb(80, 0, 2)
]]



๐Ÿ“ŽAuthor Label


rating: +139+x

This component offers a means to credit authors at the beginning of a page via a small dropdown menu. To use it, paste the following after your rating module:

[[include :scp-wiki:component:author-label-source start=--
|name=name(s)]]
content
[[include :scp-wiki:component:author-label-source end=—]]



๐Ÿ“ŽAuthor Page Tool


This component offers a quick and easy way to set up an author page, without the need for updating it every time you post a new page. To use it, paste the following onto your page:

[[include :scp-wiki:component:author-page order=created_at]]



๐Ÿ“ŽBetterFootnotes


This component offers custom footnotes like those in SCP-4485. To use, paste the following somewhere on your page:

[[include :scp-wiki:component:betterfootnotes]]

Then, everything you wish to have a footnote, paste the following where you want it:

[[span class="fnnum"]].[[/span]][[span class="fncon"]]Text in footnote.[[/span]]

Be careful to not edit anything within the fnnum span, or else the component may break..If done correctly, it should look something like this!


This component modifies the pre-existing [[collapsible]] element to give it a new look. To use it, paste the following somewhere on your page:

[[include :scp-wiki:component:bhl-style-collapse-source]]

You can see this component in action on Flos.


๐Ÿ“ŽBlacklight Box


This component offers up fancy, BHL-style divs to decorate your page with. To use, paste the following somewhere on your page:

[[include :scp-wiki:component:blacklight-box-source |inc-source= --]]]

After that, everytime you wish to use on of the boxes, paste this where you want it to be:

[[include :scp-wiki:component:blacklight-box-source |inc-section-start= --]
|color-family=optional-colors
|unique-name=lowercase-nospaces
|display-name=text in label
]]
Insert content of box here.
[[include :scp-wiki:component:blacklight-box-source |inc-section-end= --]]]

The "color-family" field is optional and used for any custom colours you have for your boxes.

You can see this component in action in McDoctorate's Proposal.



๐Ÿ“ŽCd Ver2


This component serves as a header for your SCP Article. To use it, paste the following somewhere on the top of your page:

[[include :scp-wiki:component:cd-ver2
|lv=1/2/3/4/5/6
|item=SCP-XXXX
|class= Class
|site-responsible=Site/Area-##
|director= name
|research-head= name
|assigned-task-force= MTF Name-## ("Codename")
]]

You can see this component in use in Anonymous Proposal II.

4/6776 LEVEL 4/6776
CLASSIFIED
classified-bar.svg
classified-bar.svg
classified-bar.svg
classified-bar.svg
classified-bar.svg
classified-bar.svg
Item #: SCP-6776
Thaumiel

This component serves as a header for your SCP Articles. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:classified-bar-woed
|lv=0/1/2/3/4/5
|item=XXXX
|oc= class
|lang=EN/RU/KO/CN/FR/PL/ES/TH/JP/DE/IT/UA/PTBR/IND
]]


4/6776 LEVEL 4/6776

CLASSIFIED

classified-lv4.png

Item #: SCP-6776

Object Class: Thaumiel

This component adds a header for your SCP article. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:classified-decoration
|lv=1/2/3/4/5
|item=XXXX
|oc=Class
|lang=EN/RU/KO/CN/FR/PL/ES/TH/JP/DE/IT/UA/PTBR
]]



๐Ÿ“ŽCroqstyle CSS


This component is a personal styling component for CroquemboucheCroquembouche which contains small little CSS components. To use it, paste the following somewhere on your page:

[[include :scp-wiki:component:croqstyle]]



๐Ÿ“ŽDiscord Chat


catsby
11:00
Angry, and half in love with her, and tremendously sorry, I turned away.
sans
11:01
based and gatbilled

This component allows you to emulate the look of a Discord chat in your pages. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:discord-chat-source |inc-source= --]]]

Please refer to the component page for further instructions on its use.


This component allows you to give the reader the option to view a transcribed version of an image. To use it, paste the following:

[[include :scp-wiki:component:doc-transcript-swapper start=--
|image= image.png
|totrans= Show Transcribed Document
|toimage= Show Original Document]]
Write the transcript of the image's text here
[[include :scp-wiki:component:doc-transcript-swapper end=--]]

Please refer to the component page for further instructions on its use.


This component serves as an easy way to guide readers through a tale series. To use it, paste the following at the bottom of your page:

[[include :scp-wiki:component:earthworm
| first=true/false | last=true/false | hub=yes/no
| previous-url=URL_OF_PREVIOUS | previous-title=TITLE OF PREVIOUS
| next-url=URL_OF_NEXT | next-title=TITLE OF NEXT
| hub-url=URL_OF_HUB | hub-title=TITLE OF HUB
]]



๐Ÿ“ŽFade In


This component smoothly fades in the contents of a page, instead of having it all load at once. To use it, paste the following somewhere on your page:

[[include :scp-wiki:component:fade-in speed=1/2/3]]

You can see this component in action in the BLANKSTYLE and PLACESTYLE themes.



๐Ÿ“ŽFlops Header


ITEM:โ€‰SCP-6776 LEVELโ€‰4/6776
CLASS:โ€‰thaumiel secret

DISRUPTION CLASS: keneq

This component adds a header for your SCP article. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:flops-header
|item= 0001โ€“9999
|containment= safe/euclid/keter/thaumiel/other
|level= 1โ€“6
|security= unrestricted/restricted/confidential/secret/top-secret/other
|disruption= dark/vlam/keneq/ekhi/amida/other
|disruption-bg-color= #00638a/#008a5c/#bd9d00/#bd5200/#8a0022/your choice
]]


none

โ‚ฌ 2. 0 0 0 raised of โ‚ฌ 1. 500 goal!


This component is used to link to any of your offsite fundraisers in a visually appealing way. All use of this component must comply with the SCP Wiki's Donations Policy. To use this, paste the following on your page:

[[include :scp-wiki:component:fundraiser-widget amt=
|goal=
|title=
|main_url=
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= none
|logo_text=
|description=
]]


Poster:

rating: +139+x


The One Sent by God

SHE FLIES!

SHE HEALS!

SHE GIVES LIFE!

SHE HELPS!

LIFE!



HUMAN?

BIRD?

MIRACLE?

ANGEL?

SOUL!

lorem ipsum

ยกDon't miss it!

ONE DAY ONLY
10 PM this Sunday.
Come one, come all!

These components are related to the GoI Format for Herman Fuller's Circus of the Disquieting. To use them, paste the following:

[[include :scp-wiki:component:hf-poster title=[1]|textLeft=[2]|image=[3]|textRight=[4]|textBottom=[5]|textFooter=[6]]]

[[include :scp-wiki:component:hf-book-left chapter=[1]|content=[2]|pagenumber=[3]]]

[[include :scp-wiki:component:hf-book-right chapter=[1]|content=[2]|pagenumber=[3]]]


๐Ÿ“ŽID Cards



This component allows you to make decorative ID cards.
logo_white.png
Level5
Access
Full Name
Standard Chartered Personnel
Department
of Containment
Position
not a O5
dQw4w9WgXcQdQw4w9WgXcQ
ID NO.dQw4w9WgXcQ
Valid until FOREVER

[[include :scp-wiki:component:id-card |css=--
|photo=Image URL
|level=1-5
|name=
|dept=
|position=
|id-number=
|expiry=
]]

If multiple cards are placed on one page, you only need the css parameter once, and can otherwise be omitted on subsequent [[include]]s.


๐Ÿ“ŽImage Blocks


dcalfine.jpg

PoI-0007-A surveillance photo. c. 2018




This component allows you to insert photos with captions into your pages. To use it, paste the following:

[[include :scp-wiki:component:image-block name=filename/url|caption=content|width=###px]]

There are a couple of alternatives to Image Block, which can be found below:

๐Ÿ“ŽImage Block Peppo

imagepeppo.png

This component automatically aligns the right side of the block to the flush edge instead of to the rating module, as well as formatting images if the reader is on mobile. To use it, paste the following:

[[include :scp-wiki:component:image-block-peppo
|name=file url
|caption=caption
|width=###px (300px is recommended)
]]

๐Ÿ“ŽImage Block Quoted

imagequoted.png

This component allows the image to serve as a link. To use it, paste the following:

[[include :scp-wiki:component:image-block-quoted name=file|caption=text|link=link|width=300px]]

๐Ÿ“ŽSunnyParallax Image Block

imagesunny.png

This component is mostly used by SunnyClockworkSunnyClockwork. It automatically puts the image in a collapsible and sets the caption as a title before it. As such, it's incredibly useful for displaying large amounts of artwork on a single page. To use it, paste the following:

[[include :scp-wiki:component:sp-image caption=caption|src=file url|width=###]]

๐Ÿ“ŽWide Image Sizer

With component:

with-component.png

Without component:

without-component.png

This component scales a wide image to a 215px height and appropriate width. This allows you to have a wide image as a header without having to precisely crop the image.

To use it, paste this at the top of your page:

[[include :scp-wiki:component:wide-image-sizer]]

Then for the image paste the following:

[[include :scp-wiki:component:image-block
name=https://scp-wiki.wdfiles.com/local--files/(REST OF LINK TO YOUR IMAGE) |
caption=(YOUR CAPTION HERE) |
align=center |
width=100%
]]



๐Ÿ“ŽImage Carousel


This component allows you to cycle through different images in just one single image block. To use it, paste the following:

[[include :scp-wiki:component:carousel
| images=photograph.png,old-map.png,jumpscare.gif
| caption=A selection of images.
| interval=5
| wiki=scp-wiki
| page=SCP-173
| width=300px
| height=240px
| position=right
| no-caption=false
| background=white
| options=yes
]]

Further information on what each field in the component does can be found on its component page.

You can see this component in action in SCP-5800.



๐Ÿ“ŽImage Features


This component allows you to modify Image Blocks with a wide range of features.

Hover Blur blurs an image until it is hovered over or tapped. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |blur-reveal=--]
|blur-amount=Number
|speed=Number
|float=true/false
|align=left/right
|width=px/rem/vw/%
|url=url
|add-caption=true/false
|caption=text
]]

Hover Blur Change changes the image shown when it is hoverd over or tapped. It works best when both images have the same width to height ratio. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |image-change=--]
|blur-amount=Number
|speed=Number
|float=true/false
|align=left/right
|width=px/rem/vw/%
|start-url=url
|hover-url=url
|add-caption=true/false
|caption=text
]]

Hover Slide Blur will remove the blur from an image by sliding it away fromdirection chosen. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |slide-blur-reveal=--]
|blur-amount=Number
|slide-direction=left/right/top/bottom
|float=true/false
|align=left/right
|speed=Number
|width=px/rem/vw/%
|url=url
|add-caption=true/false
|caption=text
]]

Hover Slide Block will remove a black-box over the image by sliding it. To use, paste the following:

[[include :scp-wiki:component:image-features-source |slide-block-reveal=--]
|block-color=hex/rgb/hsl
|slide-direction=left/right/top/bottom
|speed=Number
|float=true/false
|align=left/right
|width=px/rem/vw/%
|url=url
|add-caption=true/false
|caption=text
]]

Slide Image Revealer changes the image with a user-controlled slider. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |slide-revealer=--]
|block-color=hex/rgb/hsl
|float=true/false
|align=left/right
|width=px/rem/vw/%
|left-url=url
|right-url=url
|slider-start-percent=0-100
|slider-color=hex/rgb/hsl
|slider-circle-size=px/rem/vw/%
|add-caption=true/false
|caption=text
]]

Hover Fractal Noise Reveal removes a fractal effect on an image to reveal it. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |noise-reveal=--]
|fractal-size=1-999
|speed=Number
|float=true/false
|align=left/right
|width=px/rem
|background=color/url("")/gradient
|url=url
|add-caption=true/false
|caption=text
]]

Hover Pixelate Reveal removes a pixelation effect on an image to reveal it. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |pixel-reveal=--]
|pixel-res=Number
|speed=Number
|float=true/false
|align=left/right
|width=px/rem
|url=url
|add-caption=true/false
|caption=text
]]

Hover Enlarge enlarges an image when it is hovered over or tapped. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |hover-enlarge=--]
|enlarge-amount=Number
|speed=Number
|float=true/false
|align=left/right
|width=px/rem/vw/%
|url=url
|add-caption=true/false
|caption=text
]]

Click & Hold Fullscreen increases an image to be fullscreen, with its caption at the bottom. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |click-fullscreen=--]
|speed=Number
|float=true/false
|align=left/right
|width=px/rem/vw/%
|url=url
|add-caption=true/false
|caption=text
]]

Examples of all of these can be found on the component's page.



๐Ÿ“ŽInfo Bar



This is the collapsible info bar. To use it, copy and paste the following:

[[include :scp-wiki:component:info-ayers
|lang=en
|page=component:info-ayers
|authorPage= Link here
|comments=Look at me! I'm an info module! Yay!
]]

You can see an example of this component on its component page.

This component is a info button, next to your rating module which shows the authors, and other information. To use it, copy and paste the following:

[[include :scp-wiki:info:start]]
**SCP-XXXX:** TITLE
**NAME OF TALE/GOI-FORMAT**
**Author:** [[*user AUTHOR]]
**Original:** LINK TO ORIGINAL
**Translator:** [[*user TRANSLATOR]]
**Image:** Put any licensing information for images here
Add anything else you'd like the reader to know
[[include :scp-wiki:info:more]]
More, optional info that appears in a new window. Remove the "[[include :scp-wiki:info:more]]" if you > don't want this
[[include :scp-wiki:info:end]]

If your article does not have a rating module, then use the following [[include]] instead of the ones above.

[[include :scp-wiki:info:start-standalone]]
[[include :scp-wiki:info:more-standalone]]
[[include :scp-wiki:info:end-standalone]]

๐Ÿ“ŽInfo Module Content Warning

โš ๏ธ content warning

If the article calls for it, you can also add a component that lets readers know that this page has a content warning. To use it, paste the following under your Info Module:

[[include :scp-wiki:component:info-cw]]


This component allows you to have in-line collapsibles on pages. To use it, paste the following on your page:

[[div class="inline-colmod"]]
Text before collapsible block
[[include :scp-wiki:component:inline-colmod show=Text displayed before clicking | content=Text displayed after clicking]]
Text after collapsible block
[[/div]]

Make sure that the actual [[include]] is on a separate line from what comes before and after it.

Ain't that neat?



LaRueTitle.png

La Rue Macabre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis lorem et justo hendrerit posuere. Donec in massa in eros hendrerit luctus. Aliquam condimentum sapien sed mauris condimentum, at porttitor metus ultricies. Cras vulputate aliquet lacus, ac aliquam felis ornare id. Quisque suscipit vel felis sed finibus. Vivamus fringilla lacus sed ligula egestas, vitae tincidunt nulla aliquam. Donec pulvinar enim fermentum magna gravida volutpat. Sed elementum interdum ex, ut maximus massa condimentum sed. Morbi nisi eros, aliquet et nisi vel, lacinia fermentum massa. Curabitur scelerisque mauris justo, in vulputate arcu imperdiet eget.

This component enables you to use a special div for your la Rue Macabre GoI Formats. To use it, paste the following at the top of your page:

[[module css]]
@import url('https://fonts.googleapis.com/css?family=Gochi+Hand|Source+Sans+Pro&display=swap');

.rmpostcontainer
{
    background-image: url('http://firedawnfolder.wikidot.com/local--files/component:larueposting/LaRueDesk.png');
    background-repeat: no-repeat;
    width: 100%; max-width: 660px;
    height: 980px;
    margin: 0px;
        padding: 60px 20px 0px 60px;
}

.rmpostcontent
{
    font-family: 'Source Sans Pro', sans-serif;
    font-family: 'Gochi Hand', cursive;
    font-style: normal;
    font-size: 1.30em;
    color: #000;
    width: 530px;
    height: 880px;
    padding: 30px;
    margin: 0px;
    margin-top: -8px;
}

.rmpostmobiletitle
{
    display: none;
}

.scribble
{
    font-style: bold;
    font-size: 1.30em;
    color: #000;
    width: 300px;
    padding: 0px 0px 0px 20px;
    margin: 0px;
    margin-top: -8px;
    -ms-transform: rotate(20deg); /* IE 9 */
    transform: rotate(12deg); /* Standard syntax */
}

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

    .rmpostcontainer {
        background-image: url("http://firedawnfolder.wikidot.com/local--files/component:larueposting/LaRueMobile.png");
        background-size: 100%;
        background-repeat: repeat;
        width: 100%;
        height: auto;
        padding: 0px;
        padding-top: 0px;
    }

    .rmpostcontent {
        font-size: 14pt;
        width: 85%;
        height: auto;
        padding: 10px 10px 0px 30px;
    }

    .rmposttitle {
        width: auto;
        height: auto;
        padding: 0px 20px 0px 70px;
    }

}

[[/module]]

Then, for every page you want to be on the page, paste the following:

[[div class="rmpostcontainer"]]
@@ @@
@@ @@
[[div class="rmposttitle"]]
[[image https://scp-wiki.wdfiles.com/local--files/component:laruepost/LaRueTitle.png]]
[[/div]]
[[div class="rmpostmobiletitle"]]
La Rue Macabre
[[/div]]
[[div class="rmpostcontent"
]]
content
[[/div]]
[[/div]]

You can exclude the [[div]]s for the title if this isn't the first La Rue page on the page.



This component allows you to create an interactive map.

For instructions on how to use this component, please refer to its component page.

You can see this component in action on Foundation Facilities.

This component automatically updates your page, and offers support for international and co-authored pages. To use it, paste the following:

[[include :scp-wiki:component:mega-cool-author-page-tool |inc-list= --]
|language= en/ru/ko/cn/fr/pl/es/th/jp/de/it/ua
|order= name/title/rating/created_at
|perpage= 1-250
|background-image= url
|shadow= yes/no
]]

For co-authored pages that you didn't post, do the following:

[[include :scp-wiki:component:mega-cool-author-page-tool |inc-coauthor-header= --]]]

[[include :scp-wiki:component:mega-cool-author-page-tool |inc-coauthored= —]
|name= slug (this page's slug would be components-hub
|feat= co-authors
|language= en/ru/ko/cn/fr/pl/es/th/jp/de/it/ua
]]


This component allows you to customize practically the entirety of the ACS Component. With the exception of the last option, paste these after your include for ACS.

Please refer to this guide for usage instructions.


This component allows you to nest collapsibles within each other. To use it, paste the following as your first level of collapsibles:

[[include :scp-wiki:component:coltop
| show=+ show block
| hide=- hide block
]]
Text to show inside the collapsible
[[include :scp-wiki:component:colend]]

Paste this again within itself to nest them.



๐Ÿ“ŽObject Class Bar


Item #: SCP-4444
Object Class: Esoteric Class Ticonderoga
Site Responsible: USMILA Site-19
Director: Tilda Moose
Research Head: K. P. Crow
Assigned Task Force: N/A
Level 4/4444
Classified

This component serves as a header for your page. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:object-class-bar-source
|item-num=XXXX
|obj-classobject_class
|site-resp=Site/Area-##
|director=name
|rsch-head=name
|task-force= MTF [NAME]-## ("[CODENAME]")
|colorbar-bg-color=rgb(0,0,0)
|colorbar-bg-img=optional
|colorbar-one=full/half/none
|colorbar-two=full/half/none
|colorbar-three=full/half/none
|colorbar-four=full/half/none
|colorbar-five=full/half/none
|colorbar-six=full/half/none
|level=1/2/3/4/5/6
|secrecy=unrestricted/restricted/classified/secret/top-secret/other
]]


BY ORDER OF THE OVERSEER COUNCIL
The following file is Level 4/2935 Classified
Unauthorized access is forbidden.
2935

This component allows you to add an in-universe warning box to your page. To use it, paste the following:

[[include :scp-wiki:component:object-warning-box-source
|bg-image=https://thisisaurl.com
|bg-opacity=0.15
|bg-size=105% 105%
|text-top=BY ORDER OF THE OVERSEER COUNCIL
|text-bottom=The following file is Level #/XXXX Classified
Unauthorized access is forbidden.
|object-number=XXXX
]]


This component alters tabs via CSS to give them a vintage feel. It is recommended you use shorter tab titles with this component. To use it, paste the following:

[[include :scp-wiki:component:chicago-spirit]]

It should also be noted that this component was built for Sigma-9. While it still works on BHL, it doesn't look the best on it.

๐Ÿ“ŽChicago Spirit Title

GoI-001: The Chicago Spirit

This component is used to create a telegram-style title for Chicago Spirit. It has to use with Old Timey Chicago Spirit Tabs component. To use it, paste the following:

[[include component:cs-title title=TITLE]]



๐Ÿ“ŽPage Preview


This component adds invisible text at the beginning of your page for use as previews. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:preview
|text=text]]


This component allows you to import custom divs that emulate the look of paper. Despite the name, the component is only capable of emulating paper pages at the moment. To use it, paste the following on your page:

[[include :scp-wiki:component:pages
| medium=vintage-book/plain
| style=
css
| contents=
this text will appear handwritten
]]


This component is used to make a Parawatch forum post, which can be used in your GoI Formats or Parawatch SCPs. The component will only properly work if used alongside the Creepypasta or Anon themes. To use it, copy and paste the following:

[[include :scp-wiki:component:parawatch-forum-post
color=color name or #rrggbb here |
username=account name of person | โ† prefix with "๐Ÿ—ฟ " if a moderator
date=MM/DD/YY (DOW) HH:MM:SS | โ† DOW is day of week, first three letters
postno=8digitnumber | โ† should increase with time of creation
depth=0/1/2/3/4โ€ฆ | โ† how many layers deep this post is
content=The actual forum post content goes here. โ† if it spans across multiple lines, each must end with a space
]]

You can see this component in action in michael the kiler.

This component allows you to easily add Pride icons to your page. You can see this component in action at the top of this page. Please refer to the component page for instructions on how to use it.

Despite the name, Pride Highlighter works on both Sigma-9 and BHL.



๐Ÿ“ŽRatio Bar


ratio1.png

97.94%
(+142)
2.06%
(-3)
-%
(+0)
-%
(-0)

This component allows you to add a ratio bar to your rating modules, showing how many upvotes you've gotten in comparison to downvotes. To use it, paste the following:

[[include :scp-wiki:component:ratio-bar base=--]]

The above [[include]] will modify any existing rating modules to show the ratio bar. The component also has a standalone piechart that can be included without modifying any rating modules. To use it, paste the following:

[[include :scp-wiki:component:ratio-bar pie=--]]

It's recommended to put this inside info modules.



๐Ÿ“ŽRedzone Advisory


redzonehead.png

This component allows you to use the header for Redzone GoI Formats, a group closely associated with Prometheus Labs. To use it, paste the following:

[[include :scp-wiki:component:redzone-advisory
|title=Redzone RedDB Archive Asynchronous Copy Vulnerability
|id=redzone-sa-########-[shorter title]
|updated=YYYY-M-DD
|published=YYYY-M-DD
|version=version
|impact=number from 0.0 to 10.0
|worknd=true/false
|bugs=RZux#####
RZux####
|cve=CVE-YYYY-####
|cwe=CWE-###
CWE-###
]]


Sex
Height
Weight/Build
Race
Hair
Eyes
Identifying Attributes
Male
70in
Slender
Caucasian
Black
Brown/Star-shaped Pupils
Cordial disposition
Female
61in
Thin
East Asian
Black
Pale Green
Flamboyantly dressed

This component includes a custom table that formats itself to still be readable on different screen/tab sizes.

For instructions on how to use this component, please refer to its component page.

Security Clearance Level 4
Dr. Ivensky, object curator, 44-871
Store in cell 32ะ’ะ, Site 7


S

E

K

T

N

ะ


Condition-component

SCP-0000


This component serves as a header for your SCP Articles. Please read this guide for more information. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:s7-apcs
|scp-number= ####
|scp-class= see the list below
|non-standard-class = Any_value
|lineFirst = Any_value
|lineSecond = Any_value
|lineThird = Any_value
|danger-select-1 = Physical Impact
|danger-select-2 = Logical Paradox
|danger-select-3 = Extremely Low Temperatures
|danger-select-4 = Mind Control
|danger-select-5 = Sentient
|danger-select-6 = Acoustic Threat
|activation = Any_value
|threat-ind = 1-6
|contaiment-risk = see the table below
|k-class = Any_value]]


๐Ÿ“ŽSVG Header


This component serves as a header for your SCP Articles. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:svgheader
|lv=1-6
|threat=white/blue/green/orange/red/black/undefined
|item=XXXX
|oc=safe/euclid/keter/thaumiel/other
|oc2=safe/euclid/keter/thaumiel/other
|pend=true/false
]]



๐Ÿ“ŽText Style


John Jacob Jingleheimer Schmidt

Now testing messages.

Wow, really?
That's so cool!
And is this a multiline message?

You really think so?
That's great!
Yup, that has multiple lines!

Yeah!
Thanks, JaonHax!
Wait, did I break its scrolling ability somehow?

Yup.
I think you did.

Ah, well.
I guess JaonHax will just have to make sure that this thing has an infinite maximum height, huh?

Yeah, I guess so.
Anyway, we should probably let the awesome individual who's reading this move on with their day.

Bye, Awesome Person!

Yeah, bye!

This component allows you to emulate the look and feel of SMS messaging. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:text-style]]

Then, for the actual text messages, add the following:

[[div class="text-container-wrap"]]
+++ Your Sender's Name Here
[[div class="text-container"]]
[[div class="sent/recv"]]
[[span class="text"]]this is a single text[[/span]]
[[div class="sent/recv"]]
[[span class="text"]]this is a[[/span]]
[[span class="text"]]series of attached texts[[/span]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]

Note that the component currently does not support embedding files or images.


This component allows you to show a time that is converted into a user's timezone. For example:

To use it, paste the following:

[[include :scp-wiki:component:tz
| time=##:##, must be in 24 hour format
| tz=default is UTC
| date=YYYY-MM-DD, default is today
| text_before=default is ${time} ${tz} is
| text_after=default is "."
]]

Everything besides the time parameter is optional.



๐Ÿ“ŽVaf Links


This component is meant for use with the Wondertainment Theme. It adds links at the bottom for series navigation and adds a link to turn the theme on or off. To use it, paste the following:

[[include :scp-wiki:component:vaf-links
| position=middle
| previous-page=
| previous-page-name=
| next-page=
| next-page-name=
]]

You can see this component in action on ...And I Think to Myself.



1_Troll.jpg


Coal 14
โ‚malov13

bad take, u suck + ratio โ‚BottomDownOver #owned
  • ECHOES 150
  • HUMS 2.3k

25:67 31 Feburary 3 AD

This component allows you to include a div formatted to look like a post on Void. Void is an in-universe Twitter analogue used by anomalous communities. To use it, paste the following:

[[include :scp-wiki:component:void-post
|profile-pic= Recommended File Width: โ‰ค150px
|username=
|handle=
|void-msg= Suggested Length: โ‰ค280 characters; Any Length OK
|echoes= Retweets
|hums= Likes
|time-and-date= Suggested Format: H:MM AM/PM - D Month YYYY
]]



๐Ÿ“ŽWikimodule


This component allows you to display 15 random SCPs and Tales that you have posted at the bottom of your page. It is mandatory that you put this above the Licensebox and wikiwalk footers, but suggested to have it after your footnoteblock. To use it, paste the following on your page:

[[include :scp-wiki:component:wikimodule |normal= --]]]

If you want it to show ratings alongside the articles, paste the following instead:

[[include :scp-wiki:component:wikimodule |ratings= --]]]




Sigma-9




๐Ÿ“ŽCentered Header


This component centres the header at the top of the page it is used on. To use it, paste the following somewhere on your page:

[[include :scp-wiki:component:centered-header-sigma-9]]



๐Ÿ“ŽToggle Sidebar


This component enables the mobile sidebar button on a desktop-sized screen, which by extension centres the main page content. To use it, paste the following somewhere on your page:

[[include :scp-wiki:component:toggle-sidebar]]

If you're using a theme on the page, make sure that the [[include]] for this component is put in after the [[include]] of that theme.

You can see this component in action in SCP-6009.


This component allows you to add a Pride logo to your pages. To use it, paste the following:

[[include component:scp-pride]]




Black Highlighter (BHL)


centeredheaderbhl.png

This component centres the image on the page it is used on. It is highly recommended you use this Toggle Sidebar or Collapsible Sidebar. Paste the following somewhere on your page:

[[include :scp-wiki:component:centered-header-bhl]]



๐Ÿ“ŽDJK


8NGSYoT.png

This component is a personal styling component for djkaktusdjkaktus. To use it, paste the following:

[[include :scp-wiki:component:dkj]]


This component hides the sidebar behind a button on desktop, similar to how it is on the mobile version. To use it, paste the following somewhere on your page:

[[include :scp-wiki:component:toggle-sidebar-bhl]]

If you want, you can also style the button so it matches any custom themes you may be using. If so, paste the following after the [[include]]:

You can see this component in action on this very page!



๐Ÿ“ŽBHL Dark Sidebar


This component reverts the BHL sidebar to the very first one, giving it a darker tone. To use it, paste the following somewhere on your page:

[[include :scp-wiki:component:bhl-dark-sidebar]]

You can see this component in use in the Swirling Ashes Theme.



๐Ÿ“ŽRSO Component


This component is a personal styling component for RounderhouseRounderhouse. To use it, paste the following on your page:

[[include :scp-wiki:component:rso]]

This component is regularly updated and altered by Rounderhouse to implement CSS changes on his articles. Thus, it is not recommended you use it unless you're A) Rounderhouse or B) okay with your page occasionally breaking.




Technical/Staff



This component is used to warn readers of adult content on an article they're reading. To use it, paste the following, then add in the appropriate content warnings:

[[include component:adult-content warning]]



๐Ÿ“ŽHide Tags


This component hides a page's tags. This component can not be used without Tech Team approval and can only be used on the first offset page on offset articles. To use it, paste the following:

[[include :scp-wiki:component:hide-tags]]

See the Technical Content Policy for information.



๐Ÿ“ŽInterwiki Style


This component allows you to restyle the interwiki. To use it, paste the following:

[[include :scp-wiki:component:interwiki-style
| priority=X
| theme=<link to CSS stylesheet>
| css=<URI-encoded CSS>
]]



๐Ÿ“ŽLicense Box


This component allows you to properly attribute files used in your pages and lets people know how to properly attribute your page as well. To use it, paste the following at the end of your page:

[[include :scp-wiki:component:license-box]]
=====
> **Filename:**
> **Name:** (if different from filename)
> **Author:**
> **License:**
> **Source Link:**
> **Derivative of:** (If applicable)
> **Additional Notes:** (Optional)
=====
[[include :scp-wiki:component:license-box-end]]

Once you've done that, make sure to add the _licensebox tag to your page.

You can see an example of this component at the bottom of this page.



๐Ÿ“ŽS-CSS-P


This component is used to list pages that don't operate well with the S-CSS-P browser extension, which injects custom CSS into scp-wiki pages. To add your page to it, modify the component page and add the slug for your article.



๐Ÿ“ŽTheme Squares


Payne's Grey--gray-monochrome(66, 66, 72)
Rosewood--bright-accent(133, 0, 5)
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
Alto--very-light-gray-monochrome(215, 215, 215)
White Smoke--pale-gray-monochrome(244, 244, 244)
Bastille--dark-gray-monochrome(48, 48, 52)
Buccaneer--medium-accent(100, 46, 44)
Maroon--dark-accent(100, 3, 15)
Mango Tango--newpage-color(221, 102, 17)
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

This component is meant for use on theme: pages. It allows you to show off the colour palette used on your theme. To use it, paste the following for each square:

[[include :scp-wiki:component:theme-squares -=-
| color1-name=My Favourite Colour
| color1-variable=—fav-color
| color1-info=(191, 144, 0)
| color1-has-light-text=0/1
]]

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License