SCP Foundation

Advanced Formatting and You

Greetings and salutations. If you're reading this page, you're probably here to learn how to do fancy things with wikidot coding!

This essay is intended for anyone who wants to move beyond basic bolding, italics, and collapsibles. I'll be going over those as well, however, most of this guide is intended to be used for advanced design for articles.

If you're looking for more basic formatting, see this kick-ass write up here.

Some examples of what you can accomplish with the things covered in this guide are located in several of my SCPs, such as SCP-3872 and SCP-027-J.

If you have any questions about sections of this guide, please send me a wikidot PM!

Hey, hey Magnus, this page over here has this really awesome bit of formatting and I wanna use it. teach me how!

Well, random citizen, it's easier than you think. In the lower right-hand corner of every page on the mainsite, it says "Options". Click it. A little list thingy opens. Click "View Page Source" and it'll show you the Wikidot code that generated that page. Every single bit of it.

This'll let you see whatever you wanna find on the wiki, if you don't know how to do something.

Div's are standard web containers that define a thing that holds other things. Those things can be text, other divs, spans, and other web objects. You can style them literally however you want, using properties.

Generally this is done through what's called CSS, or cascading style sheets. These will override standard wikidot formatting, which is how my collapsible above look slightly different than the ones you probably are used to.

Using Divs allows you to create boxes and various other shapes to fit the needs of your article.

For instance, if you want something to look like a text message conversation:

If you know how to write HTML, you can include it in a [[html]] [[/html]] block, and include whatever you want, including HTML and javascript inside of <script> tags.

This lets you introduce some really awesome components. One of the components I get asked frequently about is how to do double collapsibles.

These aren't too hard to make. The important part is to notice, that each level has one more space before the asterisk than the previous level.

You can also style the foldable-list-container div, but changing your module css to include elements within the div. See sections 3 and 4 to understand how to do this.

The last piece of non-wikidot code that is included in some of the more administrative pages, are iframes.

I frames are used to include the fulltext of another website in to the current page. An example is below:

The image block for SCP-027-J for example is generated with the following:

So you've seen divs, and some bits where it says "Style." These are hard-coded CSS settings, which you can define on a per-object basis if you want. Or you can include your own custom CSS settings.

This is the CSS module for the page you're looking at right now:

CSS Modules allow you to do just about anything with a page. You can even change the colors of the parent containers. You can change the color of the pages themselves, which is used extensively in GoI hubs, such as the Third Law Canon Hub. You can also store your CSS in another page, and import it, as you can see in the canon hub.

It's important to note, any attribute applied to a "parent" container also applies to its children unless overridden by a child attribute. If you center the text of a div, all text contained in any div inside of that div will be centered, unless you override it inside of the "child" div

This isn't intended to be a CSS tutorial, but the basic concepts are:

The last section is the big question: If you have something you want to fix, how the hell do I actually know what to change?

This isn't supposed to be a tutorial in web development, so this is going to be a bit sparse, but I'll give you a crash course in how to change element properties.

If you hover your mouse over a thing (literally, any part of a webpage) and right click. There should be an option that says "Inspect Element". This will open a view, that kinda looks like a giant control panel.

If you hover over the blue "text message" in section 2 above, and inspect element, you get the following properties:

element.style {
color: white;
border-radius: 25px;
background: blue;
padding: 15px;
width: 150px;
height: 100px;
float: right;
display: inline-block;
}

You can click on the right hand side of these properties, and modify any of the attributes, or click below or above them, and add an attribute. The best way to figure it out is just to experiment. If all else fails, google the attribute you want, or a general description of the thing you want to do, followed by "CSS".

Try modifying the "background: blue;" property to a different color. This only affects how YOU see the page, and will not affect anyone elses view of the page.

Alright, this one feels kinda like the great grand-daddy. Listpages is a module that wikidot provides, which allows you to search the wiki for criteria, and display results. The easiest application of this is:

This is a simple select for pages by me, DrMagnus, limit to 5 of them, don't add a line break. In the "body" of the module, you provide what you want to show. Here, I'm showing the title, rating, and creation date.

Listpages will significantly slow down your page, if you have a lot of them, and more than one is really really not recommended per page.

Below is a small number of your criteria and selectable stuff:

Do you know web development? Flaunt it.

[[html]]
<div style="display:inline-block; width = 100%">
<div id="findbalance" class="titlebox" style="float:left">
Left side!
  <Button type="button" class="inputfield" id="submit">Submit</Button><br/>
</div>
<div id="wise" style="display:none;float:right" class="titlebox" >
Strong side!
  <Button type="button" class="inputfield" id="wiseSubmit">Submit</Button>
</div>
</div>
<script>
document.getElementById("submit").onclick= function(){
document.getElementById("findbalance").style.display = "none";
document.getElementById("wise").style.display="";
}
document.getElementById("wiseSubmit").onclick= function(){
document.getElementById("wise").style.display = "none";
document.getElementById("findbalance").style.display = "";
};
</script>
<style>
.titlebox{
  border: black 1px solid;
  padding: 10px;
  width: 40%;
  background: beige;
}
.inputfield {
padding: 2px;
margin: 2px;
}
</style>
[[/html]]

I hope this has provided at least a look in to how to make some of the more advanced applications of wikidot code work. If you have any questions feel free to PM me.