Advanced Formatting and You
rating: +58+x

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, ghostchibi did a 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!


Section 1: Basic Wikidot Formatting Tricks


Some of the basic wikidot code itself is kind of tricky, and isn't necessarily explained perfectly. These are the two pieces I get the most questions on:

Quoteblocks


Tabs

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.


Section 2: Using non-wikidot code


This is where it starts getting interesting. Wikidot has support for all kinds of objects. They don't just have their own markup language, you can also include custom divs.

Code:
[[div id="myDiv" style="background-color: green; text-color:white;"]]
This is a div!
[[/div]]
Result:

This is a div!

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:

Code:
[[div id="myTextMessageConvoHolder" style="display:inline-block; width:100%;"]]
[[div id="myTextMessageConvoDiv" style="color:white; border-radius: 25px; background: #73AD21;padding: 15px;width: 150px; height: 100px;float:left;"]]
I like big butts, and I cannot lie.
[[/div]]
[[html]]
<br/>
[[/html]]
[[div id="myTextMessageConvoDivReply" style="color:white; border-radius: 25px; background: #blue;padding: 15px;width: 150px; height: 100px;float:right;display: inline-block"]]
Mine other brethren cannot deny.
[[/div]]
[[/div]]
Result:

I like big butts, and I cannot lie.

Mine other brethren cannot deny.


As you can see, there's a lot of things you can use this for. You can also see, I have another non-standard wikidot code section: an HTML block.

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.

Code:
[[div class="foldable-list-container"]]
* Lol collapsible
* second
* Moar
* even moar
* Test
[[/div]]
Result:

  • Lol collapsible
    • second
  • Moar
    • even moar
      • Test

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 peice 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:

Code:
[[iframe http://home.helenbot.com/tools/randomButton.php style="border: 1px black solid;" width="100%" height="25" scrolling="no"]]
Result:


This is a page from my website, where I host a lot of technical projects, which is a random button for an SCP. This takes the literal webpage, fetches it, then displays it in a smaller div here on the current page. This is how a lot of the more "Advanced" images are created for articles such as SCP-895 and SCP-027-J

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

Code:
[[div class="scp-image-block" style="width:200px; float: right;"]]
[[iframe http://home.helenbot.com/images/remote.html width="200px" height="200px" frameborder="0" scrolling="no"]]
[[div class="scp-image-caption" style="width:200px;"]]
SCP-027-J?
[[/div]]
[[/div]]
Result:

SCP-027-J?


Section 3: Divs and how to style them

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:

[[module css]]
#page-content .collapsible-block {
max-width: 100%;
background-color: #afe0ff;
text-color: black;
border-color: #b01;
border: solid 1px #b01;
padding: 5px;
}
.collapsible-block-content p {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
}
.collapsible-block-content{
text-align: left;
}

.collapsible-block-folded, .collapsible-block-unfolded{
text-align: center;
text-color: black;
}
[[/module]]


What this specifically does, is override the CSS settings for the collapsible blocks, as you can see above in the collapsible sections.

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:


Section 4: Manipulating a page for fun and profit

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 chage 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.


Section 5: Listpages

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:

Code:
[[module ListPages created_by="DrMagnus" limit="5" separate="no"]]
%%title_linked%% - %%rating%% Created On: %%created_at%%
[[/module]]
Result:

Small Town Problems: 39 Created On: 12 Sep 2017 17:35
SCP-028-J: 154 Created On: 16 Aug 2017 19:22
SCP-3686: 22 Created On: 11 Aug 2017 14:35
Restoring Harmony: 16 Created On: 28 Jul 2017 15:59
SCP-287: 54 Created On: 16 Jul 2017 01:12

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:


Section 5: The Good Stuff

Do you know web development? Flaunt it.


Conclusion

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.

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