Coding Guide

You can use this guide to learn the basics of HTML and CSS.

If anything is wrong such as an error, shoot me a message and I'll fix it.

'''Please do not tamper with anything on this page, such as going into edit mode and changing the code. This is copy and paste code only and you do not need to go into edit mode to get the code.'''

Editors
There are two types of editors on FANDOM: Source Editor and VisualEditor. Some prefer to go with Visual, some go with Source. It doesn't matter which type of editor you use, as they both have options where you can edit the source, and where you put in the HTML and CSS.

Source Editor
Source Editor, known as the classic editor, was the original FANDOM editor. They have two tabs: visual and source. Source is where you paste the code in and visual is where you can see it and make edits on it. However, complex code allows visual to be disabled, so it isn't recommended for beginner coders, as they should probably see the code. Preview, however, allows to see what it's like, but the whole editing process from there on must be from the source tab, and beginners may get messed up on where to insert the text.

VisualEditor
VisualEditor mostly focuses on the visual, allowing you to see and edit with source mode still being allowed to be pulled up. When using the VisualEditor, to open source mode, click the three lines with a down arrow next to "Cancel" and "Save page". You will get five options to choose from: options, categories, help, keyboard shortcuts, and source editor. Click source editor to display the page's code, and you can put your HTML and CSS there. Putting in HTML and CSS doesn't work in the visual part, so Source Editor must be used to put in the code.

HTML Tags
There is an easier way to do this in visual, but here is how to make text bold, italic, etc. text This creates text in italic. For example, PIsces are said to be good writers. text This creates text in bold. For example, a dragon guards the temple. text This strikes out text. For example, something exploded. text This underlines text. For example, Lucina is a princess. text This makes text larger. For example, Dora the Explorer. Up to ten of these tags can be used. text This makes text smaller. For example, Eef.

Wikitext
Wikitext is another way of writing HTML tags. Wikitext is what the editor uses when you click bold or italic buttons. text This makes text italic. text This makes text bold. text This makes bold and italic text.

Obsolete Tags
Here are some tags that should avoid being used. These may still work in some browsers, but can be removed at any time and should avoid being used.

 -  A span tag that uses "font-size:" should be used instead.

 - It is recommended that a or tag that uses "style=""" should be used instead. Same with.

 - The tag should be used instead.

  - The tag usually replaces the tag in most circumstances.

Background
Here is a tutorial for some basic backgrounds.

Here is a template with everything needed to make a background. Replace the parentheses and the text inside them with the required.  text For the color, you can't type "red", "green", "blue", etc. It doesn't work that way. You are going to need the hex code, also known as the color code.

For example, let's say you want the background to be periwinkle. You can just search up "periwinkle hex code" and it will pull up the hex code for periwinkle. The hex color for periwinkle is #CCCCFF, so you're going to need that.

For the number, it's how the size will be. Borders are recommended to be 5px or 2px.

Here is an example of a solid black border with a periwinkle background. text That code produces this: text Gradients and stripes can also be made.

Here is the basic gradient code. Replace the parentheses and the text inside them with the required.  text Gradients require two colors. For example, let's take periwinkle (#CCCCFF) and crimson (#dc143c). We'll also make it have a solid black background.  text That code produces this:  text

Borders
Border syntax is "border: | width | style | color". Here are some of the several border styles. Each has a black border of 5px.
 * Style is what the border looks like, see examples.
 * Width is how wide the border is.
 * Color is the border's color.

Custom Infobox
If the infobox doesn't seem right to you or you want the color of the infobox changed, use this custom infobox. There are three types of infoboxes here: original story, fanfiction, and character.

Fonts
Any font can be used, but there is slight limitations. The only font installed on the wiki is Adelon Book, but any font installed on your computer can be used. However, if the font is not installed on the viewer's device, then they cannot view the font.

Two fonts installed on the wiki are Georgia and Adelon book.

To add a font, add this code to where you want the font to start taking effect on the page. Be sure you're in source mode.  Replace "(font name)" with the name of the font. It must be in all lowercase. It also must be a font wiki-installed or a font installed on your device.

For example, if I wanted the font to be Adelon Book, this is what I would type: And ta da! Just put  at the end where you want the custom font to stop.

Collapsible Windows
This allows you to click an image and it opens text.

You can replace the file settings with text or nothing and it will still work. text For example, this: text Produces: text When you click the image, then it will show the text. In the code, replace "text" with what you want it to show when it is clicked, and ta da!

Magic Words
These are special words that have some effects to your page. All except for TOC should be placed at the top of the page.

Here are some of the commonly used magic words. This removes the table of contents. This adds the table of contents (TOC) in a certain area. This removes the edit sections, __NOWYSIWYG__ This makes the page only editable in source mode.

Conclusion
This should help you learn some HTML coding basics. If there are any errors on this page or you have a question, feel free to leave a message at my wall and I can help you with it.