rating: 0+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.


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(';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; }

SCP Wiki / Wikidot Ultimate Technical Usage Guide

rating: 0+x


00. Metaguide

000. What is this?

Welcome to Placeholder McDPlaceholder McD's Do-It-Yourself SCP (Wiki) Cascading Style-Sheets Frequently Asked Questions / Public Service Announcement / et cetera, For Your Information:1 The SCP Wiki / Wikidot Ultimate Technical Usage Guide.2

PhD McD's DIY SCP CSS FAQ/PSA/etc., FYI is intended to serve as a comprehensive guide to using the SCP Wiki website, from a technical perspective, for a conventional user. It is designed to be accessible to all current and prospective members of the main SCP Wiki on the Wikidot platform, and describes rules / best practices of engagement with the Wiki at various levels of technical detail.

This guide is 'technical' in that it generally does not tell the reader how they 'ought to' engage with the SCP Wiki; rather, PhD McD's DIY SCP CSS FAQ/PSA/etc., FYI intends to objectively describe all permitted actions a typical, non-staff user may take when interacting with the SCP Wiki, and supplements those descriptions with various subjective guidelines which the reader may choose to ignore. This information is derived from three broad sources:

  • Official SCP Wiki Staff documentation of SCP Wiki Rules and Policies, which must be obeyed when engaging with the SCP Wiki;
  • the Wikidot platform's documentation, whose features and technical limitations the SCP Wiki is beholden to (at time of writing);
  • Placeholder McDPlaceholder McD's subjective, personal knowledge of the SCP Wiki gained over several years of anecdotal experiences with its creative and technical aspects, which is heavily supplemented by the innovations of many others whom I will credit in the next section.

When this guide presents instructions for how to interact with the SCP Wiki, it will always attempt to indicate where said instructions are sourced from, so that the reader is well-informed about what is possible, what is impossible, and what must be obeyed. Ideally: any reader, with any level of familiarity with the SCP Wiki, should be able to learn all relevant facts of the Site and its permitted interactions from this page or the resources linked therein.

DISCLAIMER: PhD McD's DIY SCP CSS FAQ/PSA/etc., FYI is technically an 'Essay' page on the SCP Wiki, not a 'Guide.' This is because an instructional page only receives the guide tag if it is an official, staff-controlled document; PhD McD's DIY SCP CSS FAQ/PSA/etc., FYI is an unofficial instructional page created and maintained by Placeholder McDPlaceholder McD which SCP Wiki Staff bears no responsibility for. Staff makes no statement of authenticity regarding the contents of this page. If this page is in some way inaccurate, or motivates you to take actions which are in conflict with the official instructions of Staff or Site Rules, you may not blame Staff or bother them about changing this page. If you feel the page's information should be updated, please contact Placeholder McDPlaceholder McD in this page's discussion forum thread or via Wikidot private message.

001. Who are you?

Howdy! I'm Placeholder McDPlaceholder McD. I am a web fiction author, content writer, and web developer for projects on, and relating to, the SCP Wiki. As detailed in the above disclaimer, I am not a member of SCP Wiki staff, and nothing I say in this guide should be interpreted as an official statement. When I say "when you want to X on the SCP Wiki, you should do Y," you should not blindly trust me; you are encouraged to consult all linked guides and resources to see the official, authoritative rules of engagement with the SCP Wiki and the Wikidot platform.

Any errors in this guide are my own and, while I have tried my best to ensure this document is accurate and up-to-date, I am establishing at the outset that you should not follow any instructions on this page which are in conflict with the official instructions of the SCP Wiki. Unless I have made an egregious, misinformative error, I do not harbor any responsibility for what the reader may choose to do with the information provided in this text.

Okay, so now we're really extra clear about this guide being unofficial. Great! Here's all the reasons I feel qualified to make this guide:

  • I created the Retro AIAD Theme for a project in the 2021 Canon Renaissance Contest;
  • I was involved in the creation of the Penumbra Theme by EstrellaYoshteEstrellaYoshte, a general-purpose Sigma-based darkmode theme which introduced sidebox3 technology;
  • I created BLANKSTYLE CSS, a Sigma-based minimal theme which HarryBlankHarryBlank uses on nearly all of their works;
  • I was involved in the discovery of the [[ift${themesetting}gs]] variable hack technology, and the creation of theme settings which are now widely used in SCP Wiki themes;
  • I created the custom visual styling used in SCP-6500 (Inevitable) and most entries in the No Return Canon;
  • I helped revamp the AIAD Homescreen with EstrellaYoshteEstrellaYoshte's Technoblast Theme
  • I helped create and format Ihp / Locke Proposal;
  • I co-created the BASALT Theme, an alternative visual format for the SCP Wiki, as well as the Bedrock Theme framework it is built upon, with EstrellaYoshteEstrellaYoshte and LirynLiryn;
  • I co-created and manage the ADMONITION Series, a popular, high-concept SCP series with meticulous cinematic formatting, and its associated theme with LirynLiryn;
  • I helped revamp the Site-17 Deepwell Catalog Hub with LirynLiryn;
  • I am co-custodian of the Deepwell Canon;
  • I am the ~#60 SCP Wiki author by upvote count;
  • I have written a lot of CSS and have created many types of pages;
  • Nobody else is working on a guide like this (to my knowledge) and one should exist.

Here are all the people I need to thank for being way smarter and more helpful than me:

002. How's it work?

this page is divided into sections which you can navigate to using the table of contents block. if you are on a wide enough screen, the table of contents block will appear within a sidebox, a box which scrolls alongside the page content as you read it. if you are on a narrower screen, there will not be enough space for the sidebox, and so the table of contents block will display at the top of the guide. click on the links in the table of contents block to skip to the corresponding sections.


010. Joining & Rules






011. Page Creation

  • mention greenlights method up front
  • what to do
    • follow the "How to Write an SCP" Guide
    • make sure to include module Rate, licensebox, wikiwalk footer (showcase these and mention that we'll talk more about how these work later)
    • follow the Tech and Licensing Guides
  • what not to do
  • basic writing considerations
    • link writing guides and resources

012. Fiction Pages

The main type of page users create on the SCP Wiki.

SCP Articles




GoI Formats


Facility Dossiers




013. User Pages

A secondary type of page for personal usage.

Author Pages


Artist Pages


Artwork Pages



X00. Stuff


X0X. Footnotes

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