This is time to talk about advanced wiki editing. Have you ever thought about doing more than what Fandom offers by default?
Why [[]] SOURCE EDITOR?
The answer to this question is quite simple: source editing is the plain html markup with no pre-designed tools (except for some life-saving mediawiki symbols). The amount of customization possibilities it provides is just enormous, therefore using the visual editor instead 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. This feature makes your code colorful which lets you distinguish between html tags vs. plain text vs. templates vs. tables. 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 <strong>bold</strong>? Make it <em>italic</em>? Make it a bullet list <ul>? Put it in the middle <center>? Sure, no problem. A very important detail to that, 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 my profile page would make me write something like this:
<a href="https://speedstorm.fandom.com/wiki/User:LucyKuranSKYDOME" title="User:LucyKuranSKYDOME">LucyKuranSKYDOME</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:LucyKuranSKYDOME|LucyKuranSKYDOME]], 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 deeply 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.
<span style="color: #2abd00;">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: #2abd00;">div</div>
This will give meSee 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.
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 the name for a container with your styles. This name can be absolutely anything (however, it is preferred to use something logical to make sure other editors understand what it can possibly mean). Classes and their styling are usually taken to MediaWiki:Common.css or MediaWiki:Fandomdesktop.css (both accessible only for admins) because putting all styles on the page might make it look way too long and complicated. However, nothing stops you from putting styles on the page as well (it's called inline and external CSS).
used on Disney Speedstorm wiki will give us
A small line of coding gives us a lot of styling that is hardcoded aka written beforehand on MediaWiki:Common.css page in .skill {}.
- Style is responsible for all the fancy effects we can add to our text. If skill didn't exist in MediaWiki:Common.css in Disney Speedstorm Wiki, like it does not exist on this wiki, I would need to write all the styling on the page here. It would look like this:
<div style="width: 100%; vertical-align: middle; margin: 0 auto; border-collapse: collapse; border-radius: 10px; border-style: hidden; box-shadow: 0 0 10px 1px var(--theme-link-color); 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 the 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 do not 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:
- 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.
- 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. So you use margin for fighting other cool kiddos, and padding to make sure nobody comes close to you. Let's have a look at this:
This has padding: 5px 5px 5px 30px; which makes the clock push way too hard to 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.
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) 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 is 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 rounder our border becomes. However, this property can only be used when a border is set, otherwise what will we round off? Let's take this code as an example: <div style="border: 2px solid orange; border-radius: 5px;">This is our amazing stuff</div>
And this is also our amazing stuff
PS Do not 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 will not 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:
So let's get back to our amazing stuff and its border. How about we combine everything we have 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>
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 are not 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 is 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%:
And here is exactly the same container but it has width: 40%:
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 Hammer has a small granny's monitor while Sophiedp has an UltraHD TV that is a billion inches wide. That '40%' 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 on Disney Speedstorm Wiki when they are on a small version of the page vs. when they are on the expanded version:
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;:
Gap is responsible for the space between elements. If I remove it, that's what we will get:
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:
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:
Let's try to locate 3 skill icons next to each other. The raw code we will have is this: [[File:Bomb.png|100px]]
[[File:Fire.png|100px]]
[[File:Shield.png|100px]]
We need to put them next to each other in one line.
- First we use <div style="display: grid;">;
- Then we add our first picture wrapped in grid area: <div style="grid-area: 1 / 1 / 2 / 2">[[File:Bomb.png|100px]]</div>;
- Next we do the same with 2 more but we pay attention to what numbers we should be using:
<div style="grid-area: 1 / 2 / 2 / 3">[[File:Fire.png|100px]]</div>
<div style="grid-area: 1 / 3 / 2 / 4">[[File:Shield.png|100px]]</div>
Last step: we add one more </div> to close the main container.
Here is our result:
Now that we are smart and educated, we can style the container the same way we did above. Let's add round borders, a background color and a padding:
<div style="display: grid; border: 2px solid orange; border-radius: 10px; width: 100%; height: fit-content; padding: 10px; background: #617eb9; place-items: center">
<div style="grid-area: 1 / 1 / 2 / 2">[[File:Bomb.png|100px]]</div>
<div style="grid-area: 1 / 2 / 2 / 3">[[File:Fire.png|100px]]</div>
<div style="grid-area: 1 / 3 / 2 / 4">[[File:Shield.png|100px]]</div></div>
Simple responsive design with Flex and Grid
Now that Fandom has finally enabled Mobile CSS, all the cool kids are trying to customize mobile versions of their wikis, and most of them realize that it is not that easy. Copying MediaWiki:Common.css and pasting it all into MediaWiki:FandomMobile.css simply will not work and/or will create a lot of various issues. Therefore the question arises: how do we fix it?
Flex
Flex has a lot of magical properties, and one of them allows us to define whether the elements in our container are displayed horizontally or vertically. This property is called flex-direction. It can take two main values (row, column) and two additional values if we want to display our elements in a reversed order (row-reverse, column-reverse).
What we do is the following: we create our layout for desktop and put all the elements in a container with display: flex;. The default value for the flex-direction property will be row, which means our elements will be horizontal on PC automatically. However, when we move our code to MediaWiki:FandomMobile.css, we add flex-direction: column; to our code, and voila!
MediaWiki:Common.css/MediaWiki:Fandomdesktop.css:
.class {
display: flex;
}
MediaWiki:FandomMobile.css:
.class {
display: flex;
flex-direction: column;
}
Grid
Grid is loved by lots of web-developers for a reason: it also has quite a few aces in its sleeve! For example, we do not have to use grid-area property all the time and try to be as precise as possible, we can trust Fandom to do what it does best: render the layout the way we want to see it. This is where grid-template-columns comes to save us.
- First this property asks Fandom to look at the container and check how much space it has (for example, 600px).
- Then our browser has to split this space into a few pieces that are the same size, so that all of them are fractions that have equal width.
- All that is left for us to do is to define how many fractions we want our elements to take.
- If we want 3 columns that are the same width, we simply say "give us 1fr 1fr 1fr" which is 3 columns taking 1 fraction each.
- If we want some of our columns to have a different width, we can either state it in pixels or simply say "give us 2fr 1fr 1fr" which will divide the screen into 4 equal parts where the first 2 will be taken by the first element and the other 2 will be shared between the second and the third one.
- If we want 3 columns that are the same width, we simply say "give us 1fr 1fr 1fr" which is 3 columns taking 1 fraction each.
After this is settled, we will need to tell Fandom that on mobile we must only have 1 fraction since the screen is too small, so everything else needs to go poof down below.
The magic we are performing here is the following:
MediaWiki:Common.css/MediaWiki:Fandomdesktop.css:
.class {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
MediaWiki:FandomMobile.css:
.class {
display: grid;
grid-template-columns: 1fr;
}
Job done!
Bullet lists
Now we are getting back to why using Fandom's pre-made markup is not always a good idea. How do we make a simple bullet list on Fandom? We use an asterisk * for bullet points and a hashtag # for numbered lists. A simple bullet list would look like this:
- I am one
- I am two
- I am also one
- I am also two
However, what will happen if we decide to make a nested list aka one list inside another? Let's try this code:
* A big point
*# A smaller point number one
It will give us this:
- A big point
- A smaller point number one
- A smaller point number two
It serves our purpose quite well, we have accomplished the task to create a nested bullet list. However, what do we do if we suddenly decide that the numbered list is pushed too far to the right? What if I want it to be closer to the main markup? Like this:
- A big point
- A smaller point number one
- A smaller point number two
How can we possibly do that? That is the tricky part: we cannot. MediaWiki markup is hardcoded, and using the small and helpful * and # will not let you customize anything. Then how did Lucy do it? That is where we get back to our favorite couple: HTML and CSS.
<ul></ul> tag in HTML is what tells our browser that 'now here we will have an unordered list' which is also known as a bullet list. This will be our main container at the moment. Inside the list there are list items <li></li>, each of them creates a new bullet point for us. And since we have a nested list with numbers inside bullet points, our <li></li> should contain <ol></ol> or ordered list which will create our points with numbers. Of course, we put <li></li> inside <ol></ol> as well to create numbered points. IMPORTANT: all of the tags above can be styled, that is exactly what we will be doing now!
Bullet lists in HTML can be a bit difficult to read, that's why different elements are usually split in different lines and moved to the right within the line according to the parent-child hierarchy:
<ul>
<li>A big point
<ol>
<li>A smaller point number one</li>
<li>A smaller point number two</li>
</ol>
</li>
</ul>
NOTE: the number of spaces there affects nothing, it is done simply for personal comfort and understanding where elements start and where they end.
All we need to do now is overwrite the margin in <ol>. By default it is 36px from the left which is a lot, so we need to state our own number because the styling on the page overwrites any styling written beforehand anywhere (either on Fandom by default or in your browser in general or in Common.css). We find our <ol> and add styling there: <ol style="margin-left: 20px;">. And then our code will look like this:
<ul>
<li>A big point
<ol style="margin-left: 20px;">
<li>A smaller point number one</li>
<li>A smaller point number two</li>
</ol>
</li>
</ul>
And want to have some more fun with customization? Here's my last tip: you can use <ul> with custom icons instead of bullet points, so you add <ul style="list-style-type: '❤';">, for example, and here's the code from above with the tweak:
- A big point
- A smaller point number one
- A smaller point number two
- A big point 2
- A big point 3
That's it! Have fun!