Comprehensive formatting guide for selfish little fucks

I don't have time to do everything around this wiki so I'll make this guide on how to do source editing stuff, how to make templates and stuff. I'm not an expert so do research on your own too.

How to make a template and insert it into a page in source editor

Make a page with a "Template:" prefix or it wouldn't work. To insert a template in source editor, write its name without the prefix in {{ brackets at both sides. Like this: {{Soygemnav}}.

How to make a navbox

There are several ways to do this. You can make it with <div>s or with <table>s, or combinations of both. Let's for example make a navbox about irrelevant namefags using tables. I will show you how to do it step by step.
There are actually two ways of making a table in the source editor: using classic <table> html tags or using the {| |} wiki table thing.
I'll show you how to do both.

Html table

header
info	info
	info

This table was made with this code:

<table class="wikitable" style="border:solid">
<tr>
<th colspan="2">header</th>
</tr>
<tr>
<td rowspan="2">info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
</tr>
</table>

Here is how the tags work:
<table></table> - necessary to make the table itself and style it.
<th></th> - this is a table header tag.
<tr></tr> - this is a table row tag.
<td></td> - devides the row.
colspan="..." - this is necessary if you want your row to span across multiple columns. Without it won't. Enter the number of columns you want the row to span onto.
rowspan="..." - same as above, but for columns spanning onto several rows.
Experiment with these tags to see how they work.

Wiki table

caption

header
info	info
	info

This table was made with this code:

{| class="wikitable" style="border:solid"
|+ caption
|-
! colspan="2"|header
|-
| rowspan="2"|info || style="background-color:green"|info
|-
| info
|}

It identical to the previous table except there's now a way to add a caption.
{| |} - necessary to make the table itself and style it.
|+ - this is a table caption tag.
! - this is a table header tag.
|- - this is a table row tag.
| - this is a row divider. To add more sections, seperate them with a ||. To style the sections, you need to write the styling tags before the table cell data, separated from it with a single |. The rowspan and colspan tags work the same, they just have to be put in that same styling section before the cell's data.

Navbox process

Now that we know how simple tables work, we can make our navbox. I'll use the wiki table tags because they're faster to type.

Usually navboxes have "(pagename) is part of a series on (something)" on top of them. To make the current page name display, use this tag: {{PAGENAME}}
Example:

Comprehensive formatting guide for selfish little fucks is a part of a series on Namefags.

Now we need a list of pages that fit our category of choice. Let's add a bunch of namefags here.

Comprehensive formatting guide for selfish little fucks is a part of a series on Namefags.
Feralteen - Gigo89 - Coswork16

Hold on, this table is too long despite having only three entries. Let's set the max width with the max-width:... style tag.

Comprehensive formatting guide for selfish little fucks is a part of a series on Namefags.
Feralteen - Gigo89 - Coswork16

It looks kind of awkward with the entries sticking to the left, let's align them at the center with the align="..." tag.

Comprehensive formatting guide for selfish little fucks is a part of a series on Namefags.
Feralteen - Gigo89 - Coswork16

Now this is passable, here's how the code looks, pay attention to tags:

{| class="wikitable" style="border:solid; max-width:300px"
|-
!'''{{PAGENAME}}''' is a part of a series on '''Namefags'''.
|-
|align="center"|[[Feralteen]] - [[Gigo89]] - [[Coswork16]]
|}

Add some flash

Now let's make the navbox look pretty! Usually navboxes have an image on the left to help you identify what it is about better. Let's add one.

Comprehensive formatting guide for selfish little fucks is a part of a series on Namefags.
	Feralteen - Gigo89 - Coswork16

(Ignore the error message about thumbnails, I do not know what is causing this.)

But what about making the sections collapsable? Special tags exist for that.

Comprehensive formatting guide for selfish little fucks is a part of a series on Namefags.
	Feralteen - Gigo89 - Coswork16

This was done by adding "mw-collapsible" to the class tag. To make it collapsed on initial load, you also need to add "mw-collapsed".

{| class="wikitable mw-collapsible mw-collapsed" style="border:solid; max-width:300px"

The code so far looks like this:

{| class="wikitable mw-collapsible mw-collapsed" style="border:solid; max-width:300px"
|-
!colspan="2"|'''{{PAGENAME}}''' is a part of a series on '''Namefags'''.
|-
|style="background-color:cyan; max-width:100px"|[[File:Born to be the sigma.png|100px]]||align="center"|[[Feralteen]] - [[Gigo89]] - [[Coswork16]]
|}

That [Expand] button is looking a little weird though. You can make your own custom button.

Comprehensive formatting guide for selfish little fucks is a part of a series on Namefags. [Button]
	Feralteen - Gigo89 - Coswork16

This was made by assigning an ID to the table. It can be done by adding this tag: id="mw-customcollapsible-(name of ID here)". Then you need to assign that same ID to whatever you want to make the toggle button. You can do this by adding this tag: class="mw-customtoggle-(name of that same ID here)". Remember to keep IDs simple and fitting.
The table code looks like this:

{| class="wikitable mw-collapsible mw-collapsed" id="mw-customcollapsible-ID1" style="border:solid; max-width:300px"
|-
!colspan="2"|'''{{PAGENAME}}''' is a part of a series on '''Namefags'''. <span class="mw-customtoggle-ID1">[<span style="color:green">Button</span>]</span>
|-
|style="background-color:cyan; max-width:100px"|[[File:Born to be the sigma.png|100px]]||align="center"|[[Feralteen]] - [[Gigo89]] - [[Coswork16]]
|}

To only collapse the contents of one cell, you assign the collapsible class to it directly.

Comprehensive formatting guide for selfish little fucks is a part of a series on Namefags.
	[Button] Feralteen - Gigo89 - Coswork16

{| class="wikitable" style="border:solid; max-width:300px"
|-
!colspan="2"|'''{{PAGENAME}}''' is a part of a series on '''Namefags'''.
|-
|style="background-color:cyan; max-width:100px"|[[File:Born to be the sigma.png|100px]]||align="center"|<span class="mw-customtoggle-ID2">'''[<span style="color:green">Button</span>]'''</span><br><div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ID2">[[Feralteen]] - [[Gigo89]] - [[Coswork16]]</div>
|}

Wait, shouldn't the navbox itself be aligned in the middle, with no elements present at its sides? That is easy to do.

Comprehensive formatting guide for selfish little fucks is a part of a series on Namefags.
	[Button] Feralteen - Gigo89 - Coswork16

Just add the margin:auto(centers it) and clear:both(doesn't allow the elements to flow next to a floating element(?))(I just remembered you don't need clear on margined elements) tags to the style tag of the table. Also to prevent the toggle button from shifting the size of the cell, you need to give it a fixed height and width.
Final code:

{| class="wikitable" style="border:solid; max-width:300px; margin:auto"
|-
!colspan="2"|'''{{PAGENAME}}''' is a part of a series on '''Namefags'''.
|-
|style="background-color:cyan; max-width:100px"|[[File:Born to be the sigma.png|100px]]||align="center" style="height:100px; width:150px"|<span class="mw-customtoggle-ID3">'''[<span style="color:green">Button</span>]'''</span><br><div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ID3">[[Feralteen]] - [[Gigo89]] - [[Coswork16]]</div>
|}

To learn better styling, you can look up documentation on the various html and css tags online.