Guide

Template:Ambox

This is time to talk about advanced wiki editing. Before reading this guide, make sure you know everything written here by Spoletta. Here I will try to explain complicated things with simple words so buckle up, Lucy is on the line.

# Why [[]] SOURCE EDITOR?

File:Syntax highlighting.png
The answer to this question is quite simple: source editing is the plain html markup with no pre-designed tools. The amount of customization possibilities it provides is just enourmous, therefore using the visual editor strips you of all custom colors, layouts, sizes and more. The source editor is your best friend when it comes to editing a wiki.

To make your life easier, enable syntax highlighting in your source editor. For that you need to find settings in the right corner.

# Basics of html needed for Fandom

HTML is a way to layout text on a page. It is basically a way to say 'hey, Fandom, please display my picture under my text, thank you'. But how do we explain what exactly we need to put here or there? HTML tags are coming your way.

## Tags

Tags are small words or even letters wrapped in <> that define how exactly Fandom needs to deal with this piece of text. Make it bold? Make it italic? Make it a bullet list? Put it in the middle? Sure, no problem. A very important detail to that is Fandom needs to know where to start and where to end, therefore tags always come in pairs: <start here></end here>. Have you noticed the / before end? That is vital because it makes your tag closed, and Fandom will see it as 'here I stop applying the style, okay'.

## MediaWiki and HTML

Fandom uses MediaWiki markup, it is a special way to use symbols to make editing slightly easier and shorter. For example, you would like to create a link. HTML uses <a> tag for links, so creating a link to Spoletta's profile page would make me write something like this: <a href="http://fractured.fandom.com/wiki/User:Spoletta" title="User:Spoletta">Spoletta</a> where <a is the link tag, href="" is a parameter used for URLs, title="" is what you see when you hover your mouse onto the link, and the text before the closing </a> is what you see on the page itself. Pretty complex, huh? That's where Fandom's help comes in: you only need to write [[User:Spoletta|Spoletta]], and that whole long HTML code will be generated on the background automatically. Seems cool, right? Well, yes and no. It might be cool indeed with links, but there are some other replacements that will cut your customization possibilities once again. I will mention this again later on.

## CSS text styling logic

CSS is what advanced wiki editors are in love with. To put it simply, if HTML is about *where* to put your elements, CSS is about *how* you want them to look. This part is all about fancy colors, different fonts and text sizes, adding frames around and making your elements change when you hover your mouse on them.

### div and span

These two fellas are your main comrades when you want your wiki to be stylish. They are both HTML tags therefore they are both written in <>: <div></div> <span></span>. Let's start with the difference.

* Span is an inline tag which means it affects only the text that is written in 1 line with no breaks. It is best suited for styling separate words and sentences, the same way I've been doing since the beginning of this guide adding colors to separate words and symbols.

For example, writing
```
<span style="color: green;">div</span>
```

will give me div.
* Div is a block element which means its styling applies to a square ⬜, a block of text that is wrapped in it. The easiest example would be a paragraph, that would be a block element. IMPORTANT: everything outside of your div will go to a separate line. Let's rebuild the same code with a div wrapper:

```
<div style="color: green;">div</div>
```

This will give me div.
See that my div is suddenly on a new line? That is because we used a block element, and it has taken all the space in that line.

File:Div block.png

The main attributes that come with divs and spans are class and style. Their logic with both divs and spans is the same, however, span might be slightly more limited.

* Class is a name for a container with your styles. This name can be absolutely anything (however, it's preferred to use something logical to make other editors understand what it can possibly mean). Classes and their styling is usually taken to MediaWiki:Common.css because putting all styles on the page might make it look way too long complicated. However, nothing stops you from putting styles on the page as well (it's called internal and external css).

For example, this wiki has a class called text-obtained-from which is responsible for a header on skill pages that goes before the list of creatures this skill can be received from. It has a background color, text color, width, font, font-size, some of the angles are round, and the text inside should go in the middle.

```
<div class="text-obtained-from">Hello</div>
```

will give us
Hello
A small line of coding gives us a lot of styling that is **hardcoded** aka written beforehand on MediaWiki:Common.css page in .text-obtained-from {}.
* Style is responsible for all the fancy effects we can add to our text. If text-obtained-from didn't exist in MediaWiki:Common.css, for example, I would need to write all the styling on the page here. It would look like this:

```
<div style="width: 100%; color: white; border: 1px solid var(--theme-border-color); background: var(--theme-body-dynamic-color-2); padding: 10px; border-radius: 10px 10px 0 0; font-weight: bold; font-family: Cambria; font-size: 150%; text-align: center;">Hello</div>
```

Looks scary, right? That is why in most cases it's much better to write all the text beforehand and then only use the class where necessary. Imagine you have 10 paragraphs that all need to be styled? Writing this list each time will make the page code enormous!

**Also note that each style needs a ; at the end of it, otherwise other styles won't be understood!**

## Most common text style properties

Now that is the fun part! Here is what we can do to make our text look awesome.

* color: That is the one you must have gotten used to by now. It changes text color the way you need. Browsers understand some basic colors like 'red' or 'black' or 'blue' (and the list is quite big). But you can also use a color picker to get a code for a specific shade. For example, 'white' stands for '#fff', 'black' is usually '#000', and red is '#aa0000', etc.
* background: This property can do different things but if we don't go into full wiki design and only care about styling our tables, for example, we use it the same way as color: we just add the color for background the way we want it to be.

The next 2 properties are hard to understand but easy to use and always help in layout.

* margin: This property pushes your element away from other elements. Imagine 2 kids that don't want to play with each other and push each other away left or right - that is what our margin here does. It has 4 possible places to push: top, right, left, bottom. If only one place is needed, you can always use margin-top, for example, but if all 4 directions need a push, then there are 2 ways of doing it:
	1. If your element needs to be pushed from all directions equally, you simply put margin: 10px;. When no specification is given, it is assigned to all sides.
	2. If you want to have all 4 sides differently, you write the pixels one after the other starting with top and then clockwise: margin: 1px 2px 3px 4px; will give us 1px on top, 2px on the right, 3px on the bottom and 4px on the left 🕝.
* padding: This property works exactly the same way as margin in terms of sides and pixels, however, it pushes the content inside the container. If you are claustrophobic and you feel like walls, floor and ceiling are too close, padding is your super power that can make the room bigger. Let's have a look at this:

⏰

This has padding: 5px 5px 5px 30px; which makes the clock push way too hard on the left and equally on the other 3 sides of the container. How is it different from margin?

Let's imagine we have 3 clocks like this inside a bigger container.

 one ⏰
 two ⏰
 three ⏰

Oh no, clock number three, where did you go? "I pushed away from clock 2 by using margin-left: 100px;", says clock number three.

* border: This property is used to create a frame around your text. There must be 3 values written: width, style and color. As for the width, it is usually stated in pixels, the style can be different (dotted, dashed, etc) but the most common one is solid. Thus a usual code would look like this: border: 2px solid yellow.

Using this code with span style here I can add a border around this piece of text. Can you see that the border is kind of too close to the text? That's where we remember about padding and push this border away from us!

<span style="border: 2px solid yellow; padding: 5px;">Shoo shoo!</span>

* border-radius: this is a very simple property that gives us round borders. The bigger the number of pixels here is, the more round our border becomes. However, this property can only be used when a border is set, otherwise what will we round off? Lets take this code as an example: <div style="border: 2px solid orange; border-radius: 5px;">This is our amazing stuff</div>

This is our amazing stuff
And this is also our amazing stuff

PS Don't forget that div takes up the whole line, it means that our border will take up the whole line as well! Unless we set up the next property.

* width: This property is a lifesaver in many cases but especially with tables. The most common way to use it on Fandom is percentage, this way we won't have to care about different screen sizes as it will adjust to all of them, whether it is an old grandma's monitor or a huge 4k display. Check out these different tables:

```
{| style="width: 10%"
```

```
{| style="width: 50%"
```

```
{| style="width: 90%"
```

So let's get back to our amazing stuff and it's border. How about we combine everything we've learnt so far? We need border for our yellow frame, border-radius to make it round, we need width to make sure it doesn't take up all space on the page, we need padding to push the border away from the text and let it breathe a little, and we can also add margin to create some space between 2 similar containers. And how about we also give them different background color and text color!

<div style="border: 2px solid yellow; border-radius: 5px; width: fit-content; padding: 5px; margin-bottom: 50px; background: #999; color: black;">This our first amazing stuff</div>

<div style="border: 2px solid yellow; border-radius: 5px; width: fit-content; padding: 5px; background: brown; color: white;">This our second amazing stuff, no margin needed here as we already added it to the first one, it's enough</div>

This our first amazing stuffThis our second amazing stuff, no margin needed here as we already added it to the first one, it's enough

Have you noticed something I didn't mention? It is width: fit-content. This magical guy can make sure your container is stretched enough to fit all the content inside of it. This way you won't have to measure how big you need to make your container, it will set the width automatically!

## Scary layout properties: flex and grid

Spooky scary flexboxes send shivers down your spine! There are 2 more properties that need understanding to make your editing life more enjoyable:  display: flex and display: grid. These two fellas aren't visible on the page but they are responsible for how you display things on your page.

### Flex

No single guide can embrace everything this little word can do, there are so many details that would need a couple more separate wikis for it. That's why we will focus on the basics.

 display: flex; makes the elements in our container float in the air while staying in 1 place. Here is our container that has width: 100%:

SpolettaLord SkykalLucyKuranSKYDOME

And here is exactly the same container but it has width: 30%:

SpolettaLord SkykalLucyKuranSKYDOME

Can you see what happened? There was not enough space for all of them to fit in inline, therefore they started pushing some extra weight to the bottom automatically. Where can it be useful? Let's say Skykal has a small granny's monitor while Spoletta has an UltraHD TV that is a billion inches wide. That '30%' will surely look different for them, right? Hiding the right rail or expanding the page will have a similar effect. Take a look at our lovely buttons on the main page when they are on a small version of the page vs. when they are on the expanded version:

File:Buttons small.png File:Buttons big.png

To make sure everything works correctly here, there are at least 3 properties you need to pay attention to: display: flex; flex-wrap: wrap; gap: 50px;. Flex-wrap will be responsible for ensuring that all your items are inside the container and don't go out of it. Here is what it will look like **without** flex-wrap: wrap;:

SpolettaLord SkykalLucyKuranSKYDOME

Gap is responsible for the space between elements. If I remove it, that's what we will get:

SpolettaLord SkykalLucyKuranSKYDOME

### Grid

Grid is something that is both easier and more difficult than flex. It serves a similar purpose, however, everything is located exactly the way you expect it to be, no adjustments to different screen sizes and flying elements.

 display: grid; is like a table without borders, if you want to locate your elements right next to each other or on the same height, grid is your best friend here. The layout is a bit more complex here because you would need to use more than one div styles: one for  display: grid; and a few more for each element that is located in some  grid-area. Grid-area is a short way of writing the locations, it uses 4 digits, two of them stand for the beginning, two stand for the end. You need to tell Fandom which position on the page your element is taking:

File:Grid-helper-small.png
The code for the element taking the cell above would be the following: <div style="display: grid;"><div style="grid-area: 1 / 1 / 2 / 2"></div></div>. The location starts from top left and ends with bottom right. Here is a bigger table to use as a helper:

File:Grid-helper.png

Let's try to locate 2 skill icons next to each other. The raw code we will have is this: [[File:Icon\_Nimbleness.png|100px]]

[[File:Icon\_TrueStrike.png|100px]]

[[File:Icon\_CrystalShackles.png|100px]]

We need to put them next to each other in one line.

1. First we use <div style="display: grid;">;
2. Then we add our first picture wrapped in grid area: <div style="grid-area: 1 / 1 / 2 / 2">[[File:Icon\_Nimbleness.png|100px]]</div>;
3. Next we do the same with 3 more but we pay attention to what numbers we should be using:

File:Grid-helper-middle-size.png

<div style="grid-area: 1 / 2 / 2 / 3">[[File:Icon\_TrueStrike.png|100px]]</div>
<div style="grid-area: 1 / 3 / 2 / 4">[[File:Icon\_CrystalShackles.png|100px]]</div>

1. We add one more </div> to close the main container.

Here is our result:

File:Icon Nimbleness.png
File:Icon TrueStrike.png
File:Icon CrystalShackles.png