Wikidot Troubleshooting Cheatsheet

Link to article: Wikidot Troubleshooting Cheatsheet.

/*collab:wikidot-syntax-footguns*/#page-content a[target="_blank"] {
  position: relative;
}

#page-content a[target="_blank"]:hover::after {
  position: absolute;
  top: 150%;
  left: 50%;
  background-color: #eee;
  border: 1px solid #666;
  padding: 7px;
  content: "Note: This link opens in a new tab.";
  max-width: unset;
  color: black;
  width: max-content;
  transform: translateX(-50%);
  z-index: 2;
}

h2 {
  margin-top: 2lh;
  border-bottom: 1px solid #333;
}

.big {
  font-size: 400%;
  text-align: center;
}

#toc {
  background: none;
  border: none;
  font-size: 150%;
}

@media (max-width: 768px) {
  #toc {
    font-size: 120%;
  }
}

#toc #toc-list > div::before {
  content: "• ";
  width: 1em;
  display: inline-block;
}

#toc #toc-list > div {
  text-indent: 1em hanging;
  margin-bottom: 0.5lh;
}

:root:has(.collapsible-toggle .collapsible-block-folded[style*="none"])
:not(.collapsible-toggle) > * > .collapsible-block-unfolded {
  display: block !important;
}
:root:has(.collapsible-toggle .collapsible-block-folded[style*="none"])
:not(.collapsible-toggle) > .collapsible-block .collapsible-block-link {
  display: none !important;
}

.collapsible-toggle .collapsible-block {
  position: fixed;
bottom: 0;
left: 0;
background-color: white;
border-top: 1px solid black;
border-right: 1px solid black;
padding: 20px;
box-shadow: 5px solid #0006;
}

tt {
  background-color: #eee;
  border-radius: 5px;
}

div#toc {
  width: 100%;
  max-width: 100%;
  border: none;
  background-color: transparent;
}

#page-content div.output-box {
  border: 1px solid black;
  background-color: white;
  box-shadow: 0 0 20px #0005;
  position: relative;
  padding: 2rem;
  margin-inline: auto;
  max-width: 25rem;
}

div.fancy-box {
  position: relative;
  padding: 0 0.5rem;
  padding-left: 70px;
  margin-top: 2.3rem;
  color: var(--fg);
  background-color: var(--bg);
  margin-left: 1rem;
  margin-right: 1rem;
}

div.fancy-box::before {
  content: " ";
  display: block;
  width: 50px;
  height: 100%;
  position: absolute;
  left: 10px;
  top: -15px;
  mask-position: center;
  margin-right: 1em;
  margin-top: 1em;
  mask-repeat: no-repeat;
  background-color: var(--fg);
  mask-image: var(--icon);
}

div.fancy-box::after {
  position: absolute;
  top: -1.4rem;
  left: 0;
  width: 100%;
  height: 1.4rem;
  content: var(--header-text) / var(--header-text);
  padding-left: 0.3em;
  box-sizing: border-box;
  font-weight: bold;
  font-family: monospace;
  background-color: var(--header-bg);
}

div.bad {
  --bg: #fbb;
  --fg: #422;
  --header-bg: #e88;
  --header-text: "Bad:";
  --icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHRpdGxlPmNsb3NlPC90aXRsZT48cGF0aCBkPSJNMTksNi40MUwxNy41OSw1TDEyLDEwLjU5TDYuNDEsNUw1LDYuNDFMMTAuNTksMTJMNSwxNy41OUw2LjQxLDE5TDEyLDEzLjQxTDE3LjU5LDE5TDE5LDE3LjU5TDEzLjQxLDEyTDE5LDYuNDFaIiAvPjwvc3ZnPg==");
}

div.good {
  --bg: #afa;
  --fg: #242;
  --header-bg: #7e7;
  --header-text: "Good:";
  --icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHRpdGxlPmNoZWNrPC90aXRsZT48cGF0aCBkPSJNMjEsN0w5LDE5TDMuNSwxMy41TDQuOTEsMTIuMDlMOSwxNi4xN0wxOS41OSw1LjU5TDIxLDdaIiAvPjwvc3ZnPg==");
}

div.output {
  --bg: #ddd;
  --fg: #333;
  --header-bg: #bbb;
  --header-text: "Output:";
  --icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHRpdGxlPmFwcGxpY2F0aW9uLW91dGxpbmU8L3RpdGxlPjxwYXRoIGQ9Ik0yMSAySDNDMS45IDIgMSAyLjkgMSA0VjIwQzEgMjEuMSAxLjkgMjIgMyAyMkgyMUMyMi4xIDIyIDIzIDIxLjEgMjMgMjBWNEMyMyAyLjkgMjIuMSAyIDIxIDJNMjEgMjBIM1Y2SDIxVjIwWiIgLz48L3N2Zz4=");
}

.sidebyside {
  display: flex;
}

@media (max-width: 768px) {
  .sidebyside {
    flex-direction: column;
  }
}

h2:target {
  animation: blink 1s;
  animation-delay: 0.5s;
}

.mono {
  font-family: var(--mono-font);
}

@keyframes blink {
  0% { color: rgb(var(--basalt-main-text-color)); }
  50% { color: red; }
  100% { color: rgb(var(--basalt-main-text-color)); }
}

td {
  background-color: white;
}

.annotated {
  display: flex;
  flex-direction: row;
}

@media (max-width: 800px) {
  .annotated {
    flex-direction: column;
  }
}

@media not (max-width: 800px) {
  .annotated > * {
    width: 50%;
  }

  .annotated {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}

/*collab:wikidot-syntax-footguns*/.clearbug .blockquote {
  overflow: visible;
}

.clearbug {
  overflow: auto;
}

.clearbug .scp-image-block.block-right {
  clear: none;
}

```
display: none;
```
```
background-color: #b01; color: white;
```
```
background-color: #272; color: white;
```
```
background-color: #b01
```
```
width: 250px;
```
```
color:red;
```
```
color:#a00;
```
```
color:#a00;
```
```
color:#a00;
```
```
color:#a00;
```

```
collapsible-toggle
```
```
annotated
```
```
fancy-box
```
```
good
```
```
big
```
```
annotated
```
```
fancy-box
```
```
bad
```
```
big
```
```
annotated
```
```
fancy-box
```
```
bad
```
```
mono
```
```
annotated
```
```
fancy-box
```
```
good
```
```
mono
```
```
annotated
```
```
fancy-box
```
```
bad
```
```
mono
```
```
annotated
```
```
annotated
```
```
annotated
```
```
fancy-box
```
```
bad
```
```
mono
```
```
annotated
```
```
fancy-box
```
```
good
```
```
mono
```
```
annotated
```
```
fancy-box
```
```
bad
```
```
mono
```
```
blockquote
```
```
annotated
```
```
output-box
```
```
clearbug
```
```
blockquote
```
```
annotated
```
```
fancy-box
```
```
good
```
```
mono
```
```
blockquote
```
```
annotated
```
```
output-box
```
```
clearbug
```
```
blockquote
```
```
annotated
```
```
output-box
```
```
annotated
```
```
fancy-box
```
```
bad
```
```
mono
```
```
annotated
```
```
output-box
```
```
annotated
```
```
fancy-box
```
```
good
```
```
mono
```
```
annotated
```
```
fancy-box
```
```
bad
```
```
mono
```
```
annotated
```
```
fancy-box
```
```
bad
```
```
mono
```
```
wiki-content-table
```
```
blockquote
```
```
blockquote
```
```
fancy-box
```
```
bad
```
```
mono
```
```
fancy-box
```
```
good
```
```
mono
```
```
fancy-box
```
```
bad
```
```
mono
```
```
fancy-box
```
```
good
```
```
mono
```

[[include :scp-wiki:theme:basalt]]

[[module css]]
/*collab:wikidot-syntax-footguns*/#page-content a[target="_blank"] {
  position: relative;
}

#page-content a[target="_blank"]:hover::after {
  position: absolute;
  top: 150%;
  left: 50%;
  background-color: #eee;
  border: 1px solid #666;
  padding: 7px;
  content: "Note: This link opens in a new tab.";
  max-width: unset;
  color: black;
  width: max-content;
  transform: translateX(-50%);
  z-index: 2;
}

h2 {
  margin-top: 2lh;
  border-bottom: 1px solid #333;
}

.big {
  font-size: 400%;
  text-align: center;
}

#toc {
  background: none;
  border: none;
  font-size: 150%;
}

@media (max-width: 768px) {
  #toc {
    font-size: 120%;
  }
}

#toc #toc-list > div::before {
  content: "• ";
  width: 1em;
  display: inline-block;
}

#toc #toc-list > div {
  text-indent: 1em hanging;
  margin-bottom: 0.5lh;
}

:root:has(.collapsible-toggle .collapsible-block-folded[style*="none"])
:not(.collapsible-toggle) > * > .collapsible-block-unfolded {
  display: block !important;
}
:root:has(.collapsible-toggle .collapsible-block-folded[style*="none"])
:not(.collapsible-toggle) > .collapsible-block .collapsible-block-link {
  display: none !important;
}

.collapsible-toggle .collapsible-block {
  position: fixed;
bottom: 0;
left: 0;
background-color: white;
border-top: 1px solid black;
border-right: 1px solid black;
padding: 20px;
box-shadow: 5px solid #0006;
}

tt {
  background-color: #eee;
  border-radius: 5px;
}

div#toc {
  width: 100%;
  max-width: 100%;
  border: none;
  background-color: transparent;
}

#page-content div.output-box {
  border: 1px solid black;
  background-color: white;
  box-shadow: 0 0 20px #0005;
  position: relative;
  padding: 2rem;
  margin-inline: auto;
  max-width: 25rem;
}

div.fancy-box {
  position: relative;
  padding: 0 0.5rem;
  padding-left: 70px;
  margin-top: 2.3rem;
  color: var(--fg);
  background-color: var(--bg);
  margin-left: 1rem;
  margin-right: 1rem;
}

div.fancy-box::before {
  content: " ";
  display: block;
  width: 50px;
  height: 100%;
  position: absolute;
  left: 10px;
  top: -15px;
  mask-position: center;
  margin-right: 1em;
  margin-top: 1em;
  mask-repeat: no-repeat;
  background-color: var(--fg);
  mask-image: var(--icon);
}

div.fancy-box::after {
  position: absolute;
  top: -1.4rem;
  left: 0;
  width: 100%;
  height: 1.4rem;
  content: var(--header-text) / var(--header-text);
  padding-left: 0.3em;
  box-sizing: border-box;
  font-weight: bold;
  font-family: monospace;
  background-color: var(--header-bg);
}

div.bad {
  --bg: #fbb;
  --fg: #422;
  --header-bg: #e88;
  --header-text: "Bad:";
  --icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHRpdGxlPmNsb3NlPC90aXRsZT48cGF0aCBkPSJNMTksNi40MUwxNy41OSw1TDEyLDEwLjU5TDYuNDEsNUw1LDYuNDFMMTAuNTksMTJMNSwxNy41OUw2LjQxLDE5TDEyLDEzLjQxTDE3LjU5LDE5TDE5LDE3LjU5TDEzLjQxLDEyTDE5LDYuNDFaIiAvPjwvc3ZnPg==");
}

div.good {
  --bg: #afa;
  --fg: #242;
  --header-bg: #7e7;
  --header-text: "Good:";
  --icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHRpdGxlPmNoZWNrPC90aXRsZT48cGF0aCBkPSJNMjEsN0w5LDE5TDMuNSwxMy41TDQuOTEsMTIuMDlMOSwxNi4xN0wxOS41OSw1LjU5TDIxLDdaIiAvPjwvc3ZnPg==");
}

div.output {
  --bg: #ddd;
  --fg: #333;
  --header-bg: #bbb;
  --header-text: "Output:";
  --icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHRpdGxlPmFwcGxpY2F0aW9uLW91dGxpbmU8L3RpdGxlPjxwYXRoIGQ9Ik0yMSAySDNDMS45IDIgMSAyLjkgMSA0VjIwQzEgMjEuMSAxLjkgMjIgMyAyMkgyMUMyMi4xIDIyIDIzIDIxLjEgMjMgMjBWNEMyMyAyLjkgMjIuMSAyIDIxIDJNMjEgMjBIM1Y2SDIxVjIwWiIgLz48L3N2Zz4=");
}

.sidebyside {
  display: flex;
}

@media (max-width: 768px) {
  .sidebyside {
    flex-direction: column;
  }
}

h2:target {
  animation: blink 1s;
  animation-delay: 0.5s;
}

.mono {
  font-family: var(--mono-font);
}

@keyframes blink {
  0% { color: rgb(var(--basalt-main-text-color)); }
  50% { color: red; }
  100% { color: rgb(var(--basalt-main-text-color)); }
}

td {
  background-color: white;
}

.annotated {
  display: flex;
  flex-direction: row;
}

@media (max-width: 800px) {
  .annotated {
    flex-direction: column;
  }
}

@media not (max-width: 800px) {
  .annotated > * {
    width: 50%;
  }

  .annotated {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}

[[/module]]

[[>]]
[[module Rate]]
[[/>]]

[[div_ class="collapsible-toggle"]]

[[collapsible show="Show All Collapsibles" hide="Hide All Collapsibles"]]
[[div_ style="display: none;"]]
@@ @@
[[/div]]
[[/collapsible]]

[[/div]]

This is a troubleshooting guide for when your Wikidot page simply isn't working and you don't know why. Because there are a massive number of different ways in which Wikidot pages can break, many of the steps below are highly situational. As a result, this document is divided into several sections, each of which are particular to certain use cases.

//Note that this is a living document, intended to be contributed to by members of the community as new issues arise.//

[[toc]]

++ General Issues

**Complex formatting appears broken? Do NOT use the "Preview" Button**

[[collapsible show="+ Detailed Info"]]
Wikidot's "Preview" button does not properly display complex formatting. Never use it for anything technically complex.

Instead, use the "Save" and "Edit" buttons; or, to save yourself some time, use the {{Ctrl+S}} and {{Ctrl+E}} keyboard shortcuts.
[[/collapsible]]

**Not sure how (X thing) works? Check the Documentation!!! (Find it [[a href="https://www.wikidot.com/doc-wiki-syntax:start" target="_blank"]]HERE[[/a]])**

[[collapsible show="+ Detailed Info"]]
If you're at a loss as to how to do something, always always //always// consult the documentation. It will, in all likelihood, contain the answer you need.
[[/collapsible]]

**Bold/Italic/Underline/etc not working? Wikidot has its own custom syntax. Do not use Discord, Markdown, HTML, etc. syntax**

[[collapsible show="+ Detailed Info"]]
Don't use {{*this*}} for italics -- Wikidot uses {{@@//this//@@}}, which renders as //this//. See [[a href="https://www.wikidot.com/doc-wiki-syntax:inline-formatting" target="_blank"]]here[[/a]] for how to style text in more ways.
[[/collapsible]]

**Formatting broken on mobile?**

[[collapsible show="+ Detailed Info"]]

Does your entire page appear to just be completely broken, similar to this image?

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/mobilecache1.png]]

This is actually an iOS specific Wikidot issue involving your browser cache, and can only be fixed by clearing the cache on your mobile browser. Instructions to fix this can be found below:

On your Apple iPhone:

# Go to Settings > Apps > Safari.
# Scroll down and tap Clear History and Website Data.
# Confirm the timeframe you want to clear, then tap Clear History.

More information on this can be found on [https://support.apple.com/en-gb/105082 Apple support].


[[/collapsible]]


++ I copied my text from an external editor and it isn't working! (e.g. Google Docs, Microsoft Word, LibreOffice, etc.)

**Check for "Smart Quotes", if Copying and Pasting from an External Editor (e.g. Google Docs, MS Word)**

[[collapsible show="+ Detailed Info"]]
[[div_ class="annotated"]]
[[div]]
This is a quotation mark. These will work in Wikidot elements such as {{@@[[div]]@@}} blocks and the like.
[[/div]]

[[div class="fancy-box good"]]
[[div_ class="big"]]
"
[[/div]]
[[/div]]
[[/div]]

[[div_ class="annotated"]]
[[div]]
These, on the other hand, are so-called "smart quotes". These will **not** work in said aforementioned Wikidot elements.
[[/div]]

[[div class="fancy-box bad"]]
[[div_ class="big"]]
“ ”
[[/div]]
[[/div]]
[[/div]]

External editors like Google Docs and Microsoft Word are often configured to automatically convert quotation marks into smart quotes, leading to them breaking your article in unpredictable ways.
[[/collapsible]]

++ My page contains {{@@[[div]]@@}}s and isn't working!

**Ensure every {{@@[[div]]@@}} has exactly one (and only one) corresponding {{@@[[/div]]@@}}, alongside other such Wikidot elements.**

[[collapsible open="+ Detailed Info"]]
When writing advanced Wikidot syntax you will very frequently encounter [[a href="https://www.wikidot.com/doc-wiki-syntax:block-formatting-elements#custom" target="_blank"]]{{@@[[div]]@@}} blocks[[/a]]. One common thing people often don't realize about these {{@@[[div]]@@}} blocks is that every {{@@[[div]]@@}} must have //exactly one// (and only one!) corresponding {{@@[[/div]]@@}}; not following this rule will lead to your article //breaking in extremely unpredictable ways//.

If you're wondering why this is the case, think of {{@@[[div]]@@}}s like opening parentheses, and {{@@[[/div]]@@}}s like closing parentheses, as if you were writing a complicated math equation. Each {{@@[[div]]@@}}-{{@@[[/div]]@@}} pair "contains" a section of code, which can include //other// divs!

You can easily verify that you're matching {{@@[[div]]@@}}s to {{@@[[/div]]@@}}s by using {{Ctrl+F}} -- search for {{@@[[div@@}} and {{@@[[/div@@}}[[footnote]]Notice that I omitted the {{@@]]@@}} -- this is because there is almost always something between the {{@@[[div@@}} and the {{@@]]@@}}.[[/footnote]], and see if the number of each of them in the Page Source is equal. (make sure to subtract instances of {{@@[[div@@}} and {{@@[[/div@@}} outside of Page Source, since these can sometimes erroneously show up if your formatting is broken!)

Note that this also applies to most other similarly-notated elements -- for example, every {{@@[[collapsible]]@@}} needs exactly one corresponding {{@@[[/collapsible]]@@}}, every {{@@[[span]]@@}} needs a corresponding {{@@[[/span]]@@}}, et cetera. 

However, also note that this does //not// apply to other elements, such as {{@@[[image]]@@}} and {{@@[[module Rate]]@@}}. This is because these elements do not "contain" other user-specified textual content -- you aren't ever going to put a paragraph of text in an image or a rating module.
[[/collapsible]]

**Ensure that every {{@@[[div]]@@}} and every {{@@[[/div]]@@}} is the //only// thing on their respective lines. __This includes spaces after the {{@@[[div]]@@}} or {{@@[[/div]]@@}} on the same line.__**

[[collapsible show="+ Detailed Info"]]

[[div_ class="annotated"]]
[[div]]
If you're a programmer succumbing to your urge to neatly inline everything, this will unfortunately not work:
[[/div]]

[[div class="fancy-box bad mono"]]
@@[[div]]hi![[/div]]@@
[[/div]]
[[/div]]

[[div_ class="annotated"]]
[[div]]
Instead, you'd want to notate it like this:
[[/div]]

[[div class="fancy-box good mono"]]
@@[[div]]@@
@@hi!@@
@@[[/div]]@@
[[/div]]
[[/div]]

[[div_ class="annotated"]]
[[div]]
Another much more insidious footgun with {{@@[[div]]@@}} happens when you mistakenly include spaces after it on the same line, as seen in the example here.

The problem here is that there are invisible trailing spaces after the opening {{@@[[div]]@@}}; I've highlighted the entire line in red to make this clear. Remove these invisible trailing spaces, and it will work. If you want to see if these spaces exist at a glance, try selecting the chunk of text you suspect has the problem, and look for invisible selected text at the end.

[[/div]]

[[div class="fancy-box bad mono"]]
[[span style="background-color: #b01; color: white;"]]@@[[div]]    @@[[/span]]
hi!
@@[[/div]]@@
[[/div]]
[[/div]]

All of the same counterintuitive behavior applies to many other elements Wikidot gives you access to, such as {{@@[[collapsible]]@@}} and {{@@[[include]]@@}}. However, bizarrely, there are a few it //doesn't// apply to -- notably, {{@@[[span]]@@}} and {{@@[[a]]@@}}.
[[/collapsible]]

++ I can't save my work!

**Wikidot stuck on "Saving..." and you can't copy and paste your work elsewhere? Paste the following code into your browser console (open the collapsible below)**

[[collapsible show="+ Detailed Info"]]
Press {{Ctrl+Shift+I}}, click on the "Console" tab, paste in the following code, and hit ENTER:

[[code type="javascript"]]
var btn = document.createElement("button");
btn.style = `position: fixed; top: 50%; left: 50%; translate: -50% -50%; font-size: 400%; z-index: 100000000; color: black; background-color: white;`;
btn.innerText = "Click to Copy Article";
btn.onclick = async () => {
  await navigator.clipboard.writeText(document.getElementById("edit-page-textarea").value)
     .then(e => btn.innerText = "Copied!")
     .catch(e => btn.innerText = "Failed to Copy :(")
     .finally(e => setTimeout(() => btn.parentElement?.removeChild(btn), 2000));
}
document.body.appendChild(btn);
[[/code]]

Once you paste in the code, a button should appear. When clicked, the current contents of the editor should be pasted into your clipboard, allowing you to paste it into an external editor (e.g. Google Docs, Notepad, etc.) for safekeeping.

**Obligatory Warning: Don't paste code from a source you don't trust into the browser console. The code above is harmless, but it is possible for someone to create code that is __not__ harmless.**

[[/collapsible]]

**Non-code solution:**

[[collapsible show="+ Detailed Info"]]
[[div_ class="annotated"]]
[[div]]
Press {{Ctrl+Shift+I}} or {{F12}}. Then, click on the "Elements" tab (if on Chrome, Edge, Brave, or another Chromium browser) or the "Inspector" tab (if on Firefox).

Find the following three elements in the list, they should be at the bottom:
[[/div]]

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/cantsave1.png]]
[[/div]]

[[div_ class="annotated"]]
[[div]]
Right click each of these three elements, and click "Delete element".
[[/div]]

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/cantsave2.png]]
[[/div]]

You should now be able to drag select everything in your edit box and copy it ({{CTRL+C}}). You can now paste this into an external editor (e.g. Google Docs, Notepad, etc.) and refresh the page, moving it back into your sandbox when ready.

[[/collapsible]]

++ My images aren't working!

**SVGs not loading properly? See [[a href="https://scp-wiki.wikidot.com/forum/t-13344795/uploading-svgs#post-4655686" target="_blank"]]here[[/a]].**

[[collapsible show="+ Detailed Info"]]
[[a href="https://scp-wiki.wikidot.com/forum/t-13344795/uploading-svgs#post-4655686" target="_blank"]]Again, see here.[[/a]]

Why is this happening? Long story short, Wikidot does not always use the file extension (in this case {{.svg}}) to determine what kind of file it thinks you've uploaded -- in the case of SVGs, it checks for a bunch of specific text at the beginning of the file. And many SVG generator tools do not add that text to the beginning of the file. So, as a result, Wikidot doesn't think you have an SVG file, and, as such, neither it nor browsers treat it as if it were an actual image.
[[/collapsible]]

**Images displaying as low-resolution, low-quality, opaque JPEGs? Use the full image link instead of just the image name.**

[[collapsible show="+ Detailed Info"]]

[[div_ class="annotated"]]
[[div]]
If you only use an image's //file name// in an {{@@[[image ...]]@@}}, {{@@[[component:image-block ... ]]@@}}, et cetera, it will automatically convert the image into a low-resolution version. 
[[/div]]

[[div class="fancy-box bad mono"]]
@@[[image example.png]]@@
[[/div]]
[[/div]]

[[div_ class="annotated"]]
[[div]]
If you don't want Wikidot mangling your images, include the //full URL to the image// in your {{@@[[image ...]]@@}}, {{@@[[component:image-block ... ]]@@}}, et cetera, instead of just the image's file name. So, for example, if I were to try to include an image on this page with the name {{example.png}} like in the previous example, then I would do this:
[[/div]]

[[div class="fancy-box good mono"]]
@@[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/example.png]]@@
[[/div]]
[[/div]]

You can find the image's URL by:
# Navigating to the "Files" option you used to upload the image.
# Finding the file you want to grab the URL of under the "File Name" column.
# Right-clicking the link, and clicking "Copy Link" or "Copy Link Address"

So, why is this happening? Long story short, Wikidot tries to be "smart" when you include images, and will convert them into the JPEG format at a lower resolution and lower quality so that they can be loaded over the network faster, so that your page loads faster. In most cases this is an acceptable trade-off. However there are several circumstances in which this will cause noticeable loss in quality:
* Transparent images. Because JPEG does not support transparency, any transparent portions of the image will instead display as white.
* Large, detailed images, which Wikidot will often compress too much, to the point where artifacts are visible.
* Clip art, SVGs, and other images with sharp, precise lines, which JPEG cannot compress easily.
[[/collapsible]]

**Can't fit images into the [[a target="_blank" href="https://scp-wiki.wikidot.com/technical-content-policy"]]mandatory 800kB size limit?[[/a]] Use [[a target="_blank" href="https://scp-wiki.wikidot.com/image-resize-widget"]]Image Resize Widget[[/a]] or another tool to switch to {{.webp}} and reduce the resolution.**

[[collapsible show="+ Detailed Info"]]
The [[a target="_blank" href="https://scp-wiki.wikidot.com/technical-content-policy"]]SCP Wiki Technical Content Policy[[/a]] mandates that all uploaded images be less than 800kB in size. While shrinking them might appear to be an insurmountable task for some images, there is usually a clear reason why the image is so big. The [[a target="_blank" href="https://scp-wiki.wikidot.com/image-resize-widget"]]Image Resize Widget[[/a]] provides a good baseline for images in most articles, and is likely sufficient for your use case. However, if it isn't sufficient, here are some more actionable guidelines you can follow to decrease file sizes:

__Do not use {{.png}}.__ {{.png}} files use what is called "lossless" compression, in which every single bit of detail of the image is encoded such that it can be recovered later without losing //any// information. This makes {{.png}} the obvious choice if you want to preserve 100% of the detail of an image -- for example, if you are still editing the image, or are uploading detailed art; however, this also makes {{.png}} file sizes //very large// in comparison to {{.jpg}}s and //especially// {{.webp}}s, making them unsuitable for uploading on websites. As a rule of thumb, switch to {{.webp}}.

__Decrease the image's resolution.__ Many image-creating tools generate images with resolutions far higher than what is necessary for use on a website, resulting in images that might contain //dozens of times as many pixels// as they actually realistically need. For a frame of reference, [[a href="https://scp-wiki.wikidot.com/scp-682" target="_blank"]]SCP-682[[/a]]'s image is only 945 pixels wide and 630 pixels tall. By contrast, modern cameras and document scanners often generate images in excess of 5000 pixels wide and 5000 pixels tall. This is [[$ \frac{5000\cdot5000}{945\cdot630} = ~42 $]] times as many pixels as necessary!

All of this said, however, it is often better to make an image //a few times bigger// than its actual on-screen dimensions. This is because a single "pixel" in the browser often corresponds to multiple "pixels" in the actual physical screen's hardware, //especially// on mobile phones. For example, a "200px"-wide image might actually be 600 physical pixels wide. As such, a 200-pixel-wide image will appear blurry or pixelated, because it isn't taking advantage of the full 600 pixels of horizontal resolution the device //actually// offers.

__Decrease the image's quality.__ If switching to {{.webp}} and reducing resolution didn't get your image down to a suitable size, try decreasing the "quality" value on your {{.webp}} exporter, if it is provided. The lower the quality, the smaller the file size will be, at the expense of some visual quality.

__Be wary of {{.svg}} files.__ SVGs are stored fundamentally differently from other common image types like {{.png}}, {{.jpg}}, and {{.webp}}. Rather than representing the image as a two-dimensional grid of pixels, an SVG will represent the image as a combination of lines and shapes. This makes SVGs extraordinarily effective for images with fairly simple layouts (e.g. clip art, logos, and icons) because the lines and shapes can be scaled to an arbitrarily large size while still retaining crisp edges. 

However, because of this "lines and shapes" system, it is much harder to conclusively predict how large any given SVG will be when compared to other formats -- for instance, an SVG that appears to consist of a single circle, which you'd expect to only be a few hundred bytes in size, might actually contain the code for 10000 additional circles stacked underneath it. I've genuinely seen SVGs on the wiki where 90% of their file size is taken up by invisible content.

[[/collapsible]]

**Image escaping its container? Add {{~~~~}} to the bottom of the container on its own line.**

[[collapsible open="+ Detailed Info"]]

[[module css]]
/*collab:wikidot-syntax-footguns*/.clearbug .blockquote {
  overflow: visible;
}

.clearbug {
  overflow: auto;
}

.clearbug .scp-image-block.block-right {
  clear: none;
}
[[/module]]

[[div_ class="annotated"]]
[[div]]
Say you have a setup like this:
[[/div]]

[[div class="fancy-box bad mono"]]
@@[[div class="blockquote"]]@@
@@[[include :scp-wiki:component:image-block name=header-logo.png | width=150px]]@@
@@Example text here.@@
@@[[/div]]@@
[[/div]]
[[/div]]

[[div_ class="annotated"]]
[[div]]
Then it will display like this, which is not what you want -- as you can see, the image is overflowing the blockquote:
[[/div]]

[[div class="output-box clearbug"]]
[[div class="blockquote"]]
[[include :scp-wiki:component:image-block name=https://scp-wiki-cdn.nyc3.cdn.digitaloceanspaces.com/theme/en/sigma/images/header-logo.svg | width=150px]]
Example text here.
[[/div]]
[[/div]]
[[/div]]

[[div_ class="annotated"]]
[[div]]
To fix this, add {{~~~~}} to the bottom of, //but still inside of//, the blockquote:
[[/div]]

[[div class="fancy-box good mono"]]
@@[[div class="blockquote"]]@@
@@[[include :scp-wiki:component:image-block name=https://scp-wiki-cdn.nyc3.cdn.digitaloceanspaces.com/theme/en/sigma/images/header-logo.svg | width=150px]]@@
@@Example text here.@@
[[span style="background-color: #272; color: white;"]]@@~~~~@@[[/span]]
@@[[/div]]@@
[[/div]]
[[/div]]

[[div_ class="annotated"]]
[[div]]
You will get this result:
[[/div]]

[[div class="output-box clearbug"]]
[[div class="blockquote"]]
[[include :scp-wiki:component:image-block name=https://scp-wiki-cdn.nyc3.cdn.digitaloceanspaces.com/theme/en/sigma/images/header-logo.svg | width=150px]]
Example text here.
~~~~
[[/div]]
[[/div]]
[[/div]]

Note that some themes, such as Basalt, have an alternative fix for this already implemented.

[[/collapsible]]

++ I can't find, view, or edit my page!

**Page broken? Append {{/norender/true}} to the page's URL, and refresh.**

[[collapsible show="+ Detailed Info"]]
If you //really// messed up with CSS and made your article unviewable, you can always regain access to the editor by adding {{/norender/true}} to the end of the URL, and refreshing. This will load a version of the page where all the page content, including the offending CSS, has been removed, allowing you to revert or edit the broken code. [[a href="https://scp-wiki.wikidot.com/scp-173/norender/true"]]See SCP-173's page with {{/norender/true}} enabled![[/a]]
[[/collapsible]]

**Forgot the URL? Click your profile picture in the top right corner of the screen to view your Recent Contributions under your {{wikidot.com/user:info/USERNAME}} page.**

[[collapsible show="+ Detailed Info"]]
If you forgot the URL to your page altogether and want to remember where it is, don't worry! Simply click the image of your profile picture in the top right corner of the page. This will take you to your your "User Info" page, which should have the URL {{wikidot.com/user:info/USERNAME}}, where {{USERNAME}} is your username. 

Then, click on "Recent Contributions", and you should see a full list of every edit you've made to any Wikidot page. You can then filter this list by the type of edit (e.g. only showing newly-created pages).
[[/collapsible]]

++ My Fonts are Broken!

**Use {{@import}} for fonts in a CSS module, not {{<link>}}.**

[[collapsible show="+ Detailed Info"]]
When importing fonts from a font provider -- most notably Google Fonts -- do //not// use the {{<link>}} option, which is selected by default. Instead, select {{@import}}, and copy and paste the {{@import}} statement into the //top// of a [[a href="https://www.wikidot.com/doc-modules:css-module" target="_blank"]]CSS module[[/a]]. 
[[/collapsible]]

**Make sure the {{@import}}(s) are the //first// things in the CSS module.**

[[collapsible show="+ Detailed Info"]]
The CSS {{@import}} specification requires that all imports are at the //start// of every CSS stylesheet. As such, if the {{@import}} is not at the start of the CSS module, it will not work.
[[/collapsible]]

**Each font should get its own {{@import}}; do not combine multiple fonts into one {{@import}}, even if the provider claims to support it.**

[[collapsible show="+ Detailed Info"]]
Font provider services -- notably Google Fonts -- often allow you to {{@import}} multiple fonts using a single URL to speed up website load times. However, this will not work properly in Wikidot CSS modules. Only select one font at a time in Google Fonts, and use multiple {{@import}} statements instead of just one.

Why does this happen? Well, you probably don't need to know this, as it's rather technical, but if you're curious nonetheless, here's why: 

This happens because all CSS modules in Wikidot have their CSS //inlined//, meaning that, rather than separating the content of the CSS modules into their own file(s), Wikidot CSS is bundled into the same file as the webpage. And because this webpage is written in HTML, a text-based format where certain characters have special meaning, the CSS has to be "escaped" so that if it contains any of these special characters, they're converted to a version that won't interfere with the HTML. For example, every {{&}} is replaced with {{&amp;}} 

Unfortunately, this {{&}} character is the same character that Google Fonts uses in its URLs to separate a list of multiple fonts. And, unfortunately, after it's converted to {{&amp;}}, Google Fonts will have no idea what it's looking at.
[[/collapsible]]

**My {{.ttf}}, {{.woff}}, {{.otf}} etc. won't work when I upload it to Wikidot!**

[[collapsible show="+ Detailed Info"]]
First of all, //if at all possible//, switch to a reliable external font provider like [[a href="https://fonts.bunny.net/" target="_blank"]]Bunny Fonts[[/a]][[footnote]]We recommend the use of Bunny Fonts over Google Fonts due to its better privacy practices.[[/footnote]].

If that's not possible, there //is// an alternative fix -- albeit, a rather janky one: Rather than attaching the font file directly, you'll need to embed all of the font's data into what's known as a "Data URL," and copy and paste that Data URL into an attached CSS file, which you can then {{@import}}. A Data URL is essentially just a URL which contains all of the data in the font file.

[[a href="https://radian628.github.io/r628/demos-build/font-inliner" target="_blank"]]Here is a tool that, given a font file, will generate a .css file you can {{@import}} to use that font.[[/a]] The name you should use for the font's {{font-family}}, in this case, is just the name of the file you uploaded to the tool, without the file extension.

So... why is all of this actually happening?[[footnote]]This section isn't really necessary for understanding how to fix this, but if you're doing more advanced stuff, it's useful information to know.[[/footnote]] For this, we have to understand a bit about web security. Long story short, every piece of content loaded over the web is associated with what's called an "origin" -- this is generally the domain name, plus subdomain, from which it is loaded. For example, this page has an origin of {{scp-wiki.wikidot.com}}. Conversely, every file you attach to an SCP Wiki page has an origin of {{scp-wiki.**wdfiles**.com}} (emphasis mine). Even though these files can //technically// be accessed via an {{scp-wiki.wikidot.com}} URL, this URL just redirects to an {{scp-wiki.wdfiles.com}} URL, so it doesn't count as having an {{scp-wiki.wikidot.com}} origin.

Fonts (alongside most other web resources) abide by what is known as the "Same-Origin Policy" -- essentially, because the origin of your uploaded font files, {{scp-wiki.__wdfiles__.com}}, is //different// from the origin of the main page, {{scp-wiki.__wikidot__.com}}, your browser will, by default, refuse to load the font files when they're loaded on the main page.

This is an intentional design choice on the part of browser developers. Why? Well, imagine you create a website. You host a few custom fonts on the website to make it look nicer. If fonts did not abide by the Same-Origin Policy, then in theory, someone else could create a website and, instead of hosting fonts themselves, they could link to the fonts hosted on //your// website. And because services for hosting websites often charge money based on the amount of data transferred, by serving fonts from //your// site, they are costing //you// money.

Wait so, if this is the case, how does Google Fonts load fonts? Well, whenever your browser requests a font file (or, really, any other file), the server it's requesting from can optionally specify what origins are "allowed" to load those files, effectively overriding the Same-Origin Policy. {{scp-wiki.wdfiles.com}}, for whatever reason, doesn't specify any allowed origins for font files[[footnote]]If you ask me, it really //should//, but that's neither here nor there.[[/footnote]]. Google Fonts, on the other hand, allows //every// origin, alongside every other font provider specifically designed to link to other sites.

As an aside, if you're wondering why attached //images// can load despite being hosted on a different origin, images do //not// have to abide by the Same-Origin Policy by default.
[[/collapsible]]

++ My Tables Aren't Working!

**All line breaks in "standard" tables must be denoted with an underscore {{_}} character.**

[[collapsible show="+ Detailed Info"]]

[[div_ class="annotated"]]
[[div]]
Say you want to generate this table:
[[/div]]

[[div class="output-box"]]
|| Hello || Line _
Break ||
[[/div]]
[[/div]]

[[div_ class="annotated"]]
[[div]]
If you try to do it like //this//:
[[/div]]

[[div class="fancy-box bad mono"]]
@@|| Hello || Line@@
@@Break ||@@
[[/div]]
[[/div]]

[[div_ class="annotated"]]
[[div]]
You'll get something like //this//, which is not what you want:
[[/div]]

[[div class="output-box"]]
|| Hello || Line
Break ||
[[/div]]
[[/div]]

[[div_ class="annotated"]]
[[div]]
Instead, you'll want to put a space followed by an underscore character {{_}} //immediately// before the line break, like so:
[[/div]]

[[div class="fancy-box good mono"]]
@@|| Hello || Line _@@
@@Break ||@@
[[/div]]
[[/div]]

Note that there are several ways to mess this up. 

[[div_ class="annotated"]]
[[div]]
DO NOT omit the space before the underscore. This won't work:
[[/div]]

[[div class="fancy-box bad mono"]]
@@|| Hello || Line_@@
@@Break ||@@
[[/div]]
[[/div]]

[[div_ class="annotated"]]
[[div]]
DO NOT put a space after the underscore. This won't work either (space highlighted in red):
[[/div]]

[[div class="fancy-box bad mono"]]
@@|| Hello || Line _@@[[span style="background-color: #b01"]]@@ @@[[/span]]
@@Break ||@@
[[/div]]
[[/div]]
[[/collapsible]]

**Can't put X, Y, or Z in your table? Can't change the color of individual cells? Use the [[a href="https://www.wikidot.com/doc-wiki-syntax:tables#advanced" target="_blank"]]"Advanced" Table Syntax[[/a]]**

[[collapsible show="+ Detailed Info"]]
Wikidot tables can be a hassle (or even completely impossible) to get working with various complex formatting elements; use [[a href="https://www.wikidot.com/doc-wiki-syntax:tables#advanced" target="_blank"]]Wikidot's "advanced" table syntax[[/a]] instead for these cases.

Do note that "advanced" tables will not look the same as regular tables by default. This is because a regular table's underlying {{@@[[table]]@@}} element has the {{wiki-content-table}} class, while an "advanced" table's underlying {{@@[[table]]@@}} element does not. This is a deliberate design choice to allow web developers to apply their own styles to the table without interference from built-in styles associated with {{wiki-content-table}}.

If you want to retain the default styles, replace {{@@[[table]]@@}} with {{@@[[table class="wiki-content-table"]]@@}} in your advanced table.
[[/collapsible]]

++ My CSS Isn't Working!

//IMPORTANT NOTE: A lot of what's referred to as "CSS" colloquially in the SCP community is not CSS. When editing Wikidot pages, you will **only** be directly editing CSS when editing a CSS module (i.e. the content between {{@@[[module CSS]]@@}} and {{@@[[/module]]@@}}) or in the {{style}} attribute of a {{@@[[div]]@@}}, {{@@[[span]]@@}}, or other such element. As such, this section will only cover these narrow definitions.//

**Is something earlier in the CSS file breaking it? Check for typos early-on in the CSS module.**

[[collapsible show="+ Detailed Info"]]
Some seemingly trivial typos can "trick" the CSS engine into parsing the entire remaining portion of the CSS module incorrectly. Pay particular attention to the following:

* Mismatched curly braces -- for example, a {{@@{@@}} with no corresponding {{@@}@@}}.
* Mismatched parentheses -- for example, a {{@@(@@}} with no corresponding {{@@)@@}}
* Mismatched quotes -- this applies to both single {{'}} and double {{"}} quotes. Ensure you are not using "Smart Quotes" which are denoted as {{“}} and {{”}}.
* Missing semicolons, //especially// in the same CSS rule.
* {{@import}} statements anywhere except the beginning of the file ({{@import}} should only be at the beginning!)

If you //really// aren't sure what's breaking your CSS, paste it into an external CSS editor with proper error checking.
[[/collapsible]]

**Is your CSS selector actually matching anything?**

[[collapsible show="+ Detailed Info"]]
Make sure the CSS selector you wrote is actually matching something that exists. For example, if you meant to type {{.blockquote}}, but instead typed {{.blcokquote}}, it won't appear to do anything.

There are several things you can do to rule this out as a cause. The simplest is just to put an extremely obvious, noticeable style on the element -- e.g. {{background-color: red !important;}}[[footnote]]The {{!important}} marker forces style to override most other styles. It's great for troubleshooting, but do __not__ use it in production unless absolutely necessary![[/footnote]] -- and then save the page to see if anything happens.
[[/collapsible]]

**Do your CSS rules have enough specificity?**

[[collapsible show="+ Detailed Info"]]
Multiple CSS rules can set the same property on the same element. If one of //your// CSS rules is doing this to a property on an element that's //already been set// by another stylesheet (e.g. Sigma Theme's stylesheet), then your CSS rule might not appear to work, because it's getting overridden by that stylesheet.

While this is by no means guaranteed to work, you //should// be able to resolve most specificity issues by either:
* Prepending {{:root}} one or more times before your CSS selectors. For example, if you have a rule with the selector {{.blockquote}} which is getting overridden, you might be able to fix it by changing it to {{:root .blockquote}}, {{:root:root .blockquote}}, {{:root:root:root .blockquote}}, et cetera.
* Appending each declaration (not selector) you want to individually use to override all others with {{!important}}, before the semicolon. So, for example, {{color: red;}} would become {{color: red !important;}}. Note that {{!important}} is //not// recommended, //especially// for any reusable theme or component, as using it makes it difficult for others to override //your// styles, if such a thing is ever necessary.

Under the hood, CSS engines use a variety of complicated rules to determine //which// style //actually applies//. This system is known as //CSS Specificity//. The specific details of how this system works are out-of-scope for this document -- if you want to learn more, you can do so [[a href="https://www.w3schools.com/css/css_specificity.asp" target="_blank"]]here[[/a]]. That said, in broad strokes, the more "specific" a CSS rule's selector is, the more "power" it will have to override other rules (hence the name "specificity"). This makes sense, because, you often have a generic rule you want to apply to all elements of a certain type (e.g. "all links should be red"), with specific exceptions carved out for a subset of those elements (e.g. "out of all links, all //visited// ones should be purple").

Do be warned that, in general, if you are increasing the specificity of a CSS rule purely to override another rule, you should increase the specificity as little as possible (e.g. if {{:root .blockquote}} suffices, do not use {{:root:root .blockquote}}). This is because these high-specificity selectors can get annoying and unwieldy the more people contribute to them -- imagine someone has to override your code, and tack on //another// {{:root}}?
[[/collapsible]]

**Check Developer Tools! (AKA DevTools)**

[[collapsible show="+ Detailed Info"]]
While I hesitate to recommend DevTools to nontechnical users, they are really //the// tool for debugging weird CSS issues, but only if you know what to look for.

DevTools can be opened in one of two ways:
* By right-clicking on something on the page, and hitting "Inspect" or "Inspect Element", you will open DevTools pre-focused onto the thing you clicked. This is useful if you know a specific thing on the page isn't how you expect it to look.
* By using the shortcut {{Ctrl+Shift+I}}, {{Cmd+Shift+I}}, or {{F12}}.

Once you've opened DevTools, you should see a new window appear. Several options for tabs will appear at the top:

* If you're on Firefox, you'll want to click on "Inspector", if you aren't already there.

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/devtools2.png]]
* If you're on Chrome or Edge, you'll want to click on "Elements", if you aren't already there.
[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/devtools1.png]]

Once you've done that, you should see the following screen, or something similar:

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/devtools3.png]]

So uh. What the heck are we even looking at?

This section over here with all the weird angle brackets contains what's called "HTML" -- it essentially describes all the content on the page, formatted as a series of nested lists:

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/devtools4.png]]

Now, if you click on one of the individual parts of the HTML window, you should see //this// section appear -- well, if it hasn't appeared already:

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/devtools5.png]]

This section describes all the CSS rules that are getting applied to the element you just clicked, along with crossed-out rules that //would// be applied if it weren't for errors or specificity issues.

You should also see this row of tabs in the CSS section:

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/devtools8.png]]

Try clicking on the "Computed" tab, and you'll see this section:

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/devtools6.png]]

As the name suggests, this contains a list of the actual computed values of every single CSS property set on the element. Every element of this list is expandable; try expanding one, and you can see every single rule that modifies that CSS property on that element:

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/devtools7.png]]

This is a wealth of useful information for debugging CSS, because, if your CSS rule isn't working, you can see, at a glance, if it's listed here. If it isn't, then you know that the rule itself is broken; if it is, then you know it's a specificity issue, or some other issue, such as a child element overriding the property.

[[/collapsible]]

++ My ListPages aren't working!

//Note: If you haven't set up ListPages/Offsets yet and aren't sure where to begin, check out 
[[a target="_blank" href="https://scp-sandbox-3.wikidot.com/essay"]]NICO'S GUIDE TO OFFSETS (EZ MODE)[[/a]].//

**Have you set the parent on each of the fragment pages?**

[[collapsible show="+ Detailed Info"]]

Assuming you have set everything up correctly, you should have:  
* The parent page (On Sandbox this will be {{collab:your-slug-here}})
* Your fragment pages ({{fragment:your-slug-here-0}}, {{fragment:your-slug-here-1}}, etc etc)

On each of the fragment pages, make sure you have set the parent page as the parent of those pages.

...I understand that might be a confusing sentence, so here is a step by step:

First of all, a quick way to check if a page has a parent is the breadcrumbs, which will be present at the top of the screen if a parent has been set:

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/listpages1.png style="width: 250px;"]]

If absent, you probably haven't set the parent, scroll to the bottom of the page and click {{+Options}}

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/listpages2.png]]

And then {{Parent}}

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/listpages3.png]]

And in the textbox, paste the exact slug of your parent page

[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/listpages4.png]]

Make sure you have done this for all of your fragment pages, it is easily missed!

[[/collapsible]]

**Is your parent page and, by extension, your ListPages module set up correctly?**

[[collapsible show="+ Detailed Info"]]
Your parent page should only have the following content:
* Rating module
* Any includes you'd like to apply to all pages (such as a theme)
* ListPages module and commented fragments
* License box

Below is an example:
[[image https://scp-wiki.wikidot.com/local--files/wikidot-troubleshooting-cheatsheet/1542.png]]

Your module should be exactly as seen below:

[[code]]
[[module ListPages category="fragment" parent="." order="created_at" limit="1" offset="@URL|0"]]
%%content%%
[[/module]]
[[/code]]

> A common mistake I see people do is change {{@URL}} to their actual page URL, **don't do this**, again keep it exactly as typed above.

[[/collapsible]]

**Are you linking to the offsets correctly?**

[[collapsible show="+ Detailed Info"]]

Offsets, or "your other pages", should be linked to exactly as below:

[[code]]
[[[/your-slug-here/offset/1 | Link to next page here]]]
[[/code]]

Or on the sandbox:

[[code]]
[[[/collab:your-slug-here/offset/1 | Link to next page here]]]
[[/code]]

* {{offset/1}} will link to fragment 1 (Your second page of content)
* {{offset/2}} will link to fragment 2 (Your third page of content)
So on and so forth.

**Do not** link to your other pages with the URL of the fragment:

> **BAD:** @@https://scp-sandbox-3.wikidot.com/fragment:your-slug-here-0@@

This bypasses the listpage module entirely and just links to your fragment page, which isn't how this works.

[[/collapsible]]

**If all else fails -- refreshing the cache**

[[collapsible show="+ Detailed Info"]]

The ListPage module uses its own cache, but all you really need to know is it updates at a slower pace than the actual page.

If everything seems to be right, and one of your fragments still just refuses to work, the module simply may not have updated yet.

In this case, it is worth manually updating the cache, which is a lot easier than it sounds. Simply edit your parent page, and update the ListPage module as seen below:

**BEFORE:**
[[div class="blockquote"]]
@@[[module ListPages category="fragment" parent="." order="created_at" limit="1" offset="@URL|0"]]@@
@@%%content%%@@
@@[[/module]]@@
[[/div]]

**AFTER:**
[[div class="blockquote"]]
@@[[module ListPages category="fragment" parent="." order="created_at" limit="1" offset="@URL|0"]]@@
@@%%content%%@@
[[span style="color:red;"]]**>**[[/span]]
@@[[/module]]@@
[[/div]]

This very simple addition of a "{{>}}" forces the module to update, and should now account for any stray pages that weren't in the cache.

Once updated, you can remove the "{{>}}", or you can leave it, as it doesn't really do anything.

[[/collapsible]]

//If you want to learn more about how ListPages works under-the-hood, check out [[a target="_blank" href="https://scp-wiki.wikidot.com/listpages-magic-and-you"]]ListPages Magic and You[[/a]] for a full explanation.//

++ My ACS isn't working!

**Are your options lowercase?**

[[collapsible show="+ Detailed Info"]]

All the options on your ACS include should be **lowercase.** 

The below won't work, as all the options are capitalised:

**BAD:**
[[div class="fancy-box bad mono"]]
@@[[include :scp-wiki:component:anomaly-class-bar-source@@
|item-number= XXXX
|clearance= #
|container-class= [[span style="color:#a00;"]]**E**[[/span]]uclid
|secondary-class= [[span style="color:#a00;"]]**N**[[/span]]one
|disruption-class= [[span style="color:#a00;"]]**V**[[/span]]lam
|risk-class= [[span style="color:#a00;"]]**W**[[/span]]arning
]]
[[/div]]

Change them all back to lowercase:

**GOOD:**
[[div class="fancy-box good mono"]]
@@[[include :scp-wiki:component:anomaly-class-bar-source@@
|item-number= XXXX
|clearance= #
|container-class= euclid
|secondary-class= none
|disruption-class= vlam
|risk-class= warning
]]
[[/div]]

[[/collapsible]]

**Are your options valid? Only a few pre-set containment/disruption/risk classes are supported out-of-the-box!**

[[collapsible show="+ Detailed Info"]]

A common mistake is inputting custom classes into ACS, standard ACS only accepts the pre-set options.
The available options and their icons are listed on [https://scp-wiki.wikidot.com/component:anomaly-class-bar the component page,] though I will also list them below:

**Containment Class:**
* safe
* euclid
* keter
* neutralized
* pending
* explained
* esoteric

**Disruption Class:**
* dark
* vlam
* keneq
* ekhi
* amida

**Risk Class:**
* notice
* caution
* warning
* danger
* critical

**Secondary Class:**
* apollyon
* archon
* cernunnos
* decommissioned
* hiemal
* tiamat
* ticonderoga
* thaumiel
* uncontained

If you wish to use custom classes, you will need to incorporate [https://scp-wiki.wikidot.com/component:customizable-acs-guide Customizable ACS.]


[[/collapsible]]

**Customizable ACS: Is it positioned correctly?**

[[collapsible show="+ Detailed Info"]]

Your Customizable ACS needs to be **above** your standard ACS.

**BAD:**

[[div class="fancy-box bad mono"]]
@@[[include :scp-wiki:component:@@**anomaly-class-bar-source**
|item-number= 0000
|clearance= 6
|container-class= esoteric
|secondary-class= apollyon
|secondary-icon= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/apollyon-icon.svg
|disruption-class= amida
|risk-class= yggdrasil
]]

@@[[include :scp-wiki:component:@@**customizable-acs**
|risk-class= yggdrasil
|risk-image= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Yggdrasil.svg
|risk-color= 0,0,255
|inc-risk= --]]]
[[/div]]

**GOOD:**

[[div class="fancy-box good mono"]]
@@[[include :scp-wiki:component:@@**customizable-acs**
|risk-class= yggdrasil
|risk-image= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Yggdrasil.svg
|risk-color= 0,0,255
|inc-risk= --]]]

@@[[include :scp-wiki:component:@@**anomaly-class-bar-source**
|item-number= 0000
|clearance= 6
|container-class= esoteric
|secondary-class= apollyon
|secondary-icon= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/apollyon-icon.svg
|disruption-class= amida
|risk-class= yggdrasil
]]

[[/div]]

[[/collapsible]]


++ Want to contribute to this guide?

This guide is open for contributions from anyone who's experienced a problem with editing Wikidot pages and has reason to believe they're not the only one. That said, there are a few guidelines to follow when contributing:

**Put more common issues first.** Wikidot is a complicated platform with hundreds of failure modes; in principle, we could document all of them here. However, with guides like these, the larger they become, the less useful they become, because the specific information a user is looking for will become buried amongst information they //aren't// looking for. To mitigate this, put issues you believe are most common near the beginning, and issues you believe are rare near the end.

**Focus on //solutions to specific problems//, not on "tips and tricks".** Contextless series of tips and tricks are hard to remember unless the user actually has to immediately apply them toward an actual problem they have. By focusing on actual problems users face, they immediately get to apply what they learn.

**Organize your issues by section.** Many Wikidot issues are highly situational; as such, this page begins with a prominent table of contents to allow users to select the problem they are dealing with, so they can jump straight to the relevant section instead of sifting through irrelevant info.

**Problem, then Solution, then Explanation.** Users tend to naturally tunnel-vision into finding the solution for their //specific// problem, at the exclusion of all others. Consequently, they might skim over important sections of this document that might be useful to them if you are not cutthroat in prioritizing what information comes first. As such, every section you add should start with a brief description of the problem and its solution so an experienced user realizes what they can do at a glance; meanwhile, if a less experienced user needs //more// help, they can expand the collapsible for a more detailed explanation. Even within the collapsible, prioritize putting //actionable solutions// first, before explaining //how// those solutions work. We're trying to fix bugs, not make people web developers.

**Shoot [[*user radian628]] or [[*user wackdog]] a DM if you have any questions or requests.** While we're happy to answer any questions, also feel free to DM [[*user radian628]] if you need any files uploaded to this page, since only I as the original page creator can do this.

Wikidot Troubleshooting Cheatsheet

Module Styles

Inline Styles

Includes

CSS Classes

Page Source