FANDOM


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.

References Edit

Here are some good websites to use as references for colors, CSS patterns, etc.

Already created free to use CSS patterns can be found here and here. These are the two recommended websites, but there may be others that might work.

ColorHexa and HTML Color Codes are two good resources for finding colors to use in your code. ColorHexa only uses existing colors on the site and does not have every color, while HTML Color Codes has every single color and is good for picking out custom colors. If you don't find the color you want, just look up the color for the hex code, also known as the color code.

Editors Edit

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 Edit

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 Edit

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 Edit

There is an easier way to do this in visual, but here is how to make text bold, italic, etc.

<i>text</i>

This creates text in italic. For example, Pisces are said to be good writers.

<b>text</b>

This creates text in bold. For example, a dragon guards the temple.

<s>text</s>

This strikes out text. For example, something exploded.

<u>text</u>

This underlines text. For example, Lucina is a princess.

<big>text</big>

This makes text larger. For example, Dora the Explorer. Up to ten of these tags can be used.

<small>text</small>

This makes text smaller. For example, Eef.

Wikitext Edit

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 Edit

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.

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

<center> - It is recommended that a <p> or <div> tag that uses "style=""" should be used instead. Same with <font>.

<strike> - The <s> tag should be used instead.

<tt> - The <code> tag usually replaces the tag in most circumstances.

Background Edit

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.

<div style="background: (color/pattern); border: (number)px (pattern) (color); border-radius: (number)px; padding: (color)px; color: (color)">
                               text
                               </div>

For the color, you can type "red", "green", "blue", etc., but if you want to be specific, 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.

<div style="background: #CCCCFF; border: 2px solid #000000; padding: 10px; color: #000000;">
                              text
                              </div>

That code produces this:

text

Gradients and stripes can also be made by adding more hex codes.

Here is the basic gradient code. Replace the parentheses and the text inside them with the required.

<div style="background: radial-gradient((color one), (color two)); border: (number)px solid (color); padding: (number)px; color: (color);">
                            text 
                            </div>

Gradients require at least two colors. For example, let's take periwinkle (#CCCCFF) and crimson (#dc143c). We'll also make it have a solid black border.

<div style="background: radial-gradient(#CCCCFF, #dc143c); border: 2px solid #000; padding: 10px; color: #000000;">
                            text 
                            </div>

That code produces this:

text

Borders Edit

Border syntax is "border: | width | style | color".

  • Style is what the border looks like, see examples.
  • Width is how wide the border is.
  • Color is the border's color.

Here are some of the several border styles. Each has a black border of 5px.

SolidEdit

<div style="padding: 10px; border: 5px solid black;"> </div>

Dashed Edit

<div style="padding: 10px; border: 5px dashed black;"> </div>

DottedEdit

<div style="padding: 10px; border: 5px dotted black;"> </div>

GrooveEdit

<div style="padding: 10px; border: 5px groove black;"> </div>

DoubleEdit

<div style="padding: 10px; border: 5px double black;"> </div>

InsetEdit

<div style="padding: 10px; border: 5px inset black;"> </div>

OutsetEdit

<div style="padding: 10px; border: 5px outset black;"> </div>

RidgeEdit

<div style="padding: 10px; border: 5px ridge black;"> </div>

Custom InfoboxEdit

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.

Original StoryEdit

story title here
No image filler infobox picture
Story Information
Author type here
Cover type here
Setting type here
Genre type here
Protagonist type here
Antagonist type here
Other Information
Other type here
Plot type here
<noinclude>
                 {| cellpadding="4" style="border-collapse: collapse; float: right; width: 250px; margin: 0 0 7px 14px; background: #fff; border: 1px solid #999; color: #000; font-size: smaller; line-height: 1.5;"
                 |-
                 ! colspan="2" style="background: #ddd; border-bottom: 1px solid #999; text-align: center; font-size: larger;" | story title here
                 |-
                 | colspan="2" style="padding:0;" |[[Image:No image filler infobox picture.png|258px]]
                 |-
                 ! colspan="2" style="background: #ddd; border-bottom: 1px solid #999; border-top: 1px solid #999; text-align: center;" | Story Information
                 |- style="border-bottom: 1px solid #999;"
                 | '''Author'''
                 | type here
                 |- style="border-bottom: 1px solid #999;"
                 | '''Cover'''
                 | type here
                 |- style="border-bottom: 1px solid #999;"
                 | '''Setting'''
                 | type here
                 |- style="border-bottom: 1px solid #999;"
                 | '''Genre'''
                 | type here
                 |- style="border-bottom: 1px solid #999;"
                 | '''Protagonist'''
                 | type here
                 |- style="border-bottom: 1px solid #999;"
                 | '''Antagonist'''
                 | type here
                 |-
                 ! colspan="2" style="background: #ddd; border-bottom: 1px solid #999; text-align: center;" | Other Information
                 |- style="border-bottom: 1px solid #999;"
                 | '''Other'''
                 | type here
                 |- style="border-bottom: 1px solid #999;"
                 | '''Plot'''
                 | type here
                 |}

FanfictionEdit

story title here
No image filler infobox picture
Story Information
Author type here
Cover type here
Based off type here
Setting type here
Genre type here
Protagonist type here
Antagonist type here
Other Information
Other type here
Plot type here
<noinclude>
               {| cellpadding="4" style="border-collapse: collapse; float: right; width: 250px; margin: 0 0 7px 14px; background: #fff; border: 1px solid #999; color: #000; font-size: smaller; line-height: 1.5;"
               |-
               ! colspan="2" style="background: #ddd; border-bottom: 1px solid #999; text-align: center; font-size: larger;" | story title here
               |-
               | colspan="2" style="padding:0;" |[[Image:No image filler infobox picture.png|258px]]
               |-
               ! colspan="2" style="background: #ddd; border-bottom: 1px solid #999; border-top: 1px solid #999; text-align: center;" | Story Information
               |- style="border-bottom: 1px solid #999;"
               | '''Author'''
               | type here
               |- style="border-bottom: 1px solid #999;"
               | '''Cover'''
               | type here
               |- style="border-bottom: 1px solid #999;"
               | '''Based off'''
               | type here
               |- style="border-bottom: 1px solid #999;"
               | '''Setting'''
               | type here
               |- style="border-bottom: 1px solid #999;"
               | '''Genre'''
               | type here
               |- style="border-bottom: 1px solid #999;"
               | '''Protagonist'''
               | type here
               |- style="border-bottom: 1px solid #999;"
               | '''Antagonist'''
               | type here
               |-
               ! colspan="2" style="background: #ddd; border-bottom: 1px solid #999; text-align: center;" | Other Information
               |- style="border-bottom: 1px solid #999;"
               | '''Other'''
               | type here
               |- style="border-bottom: 1px solid #999;"
               | '''Plot'''
               | type here
               |}

CharacterEdit

character name here
No image filler infobox picture
Background Information
Creator type here
Infobox Image type here
Theme Animal type here
Theme Color type here
Theme Song type here
MBTI Personality type here
Character Information
Age type here
Gender type here
Orientation type here
Occupation type here
Species type here
Goal type here
Residence type here
Relatives type here
Allies type here
Enemies type here
Likes type here
Dislikes type here
Powers and abilities type here
Weapons type here
Quote type here
  <noinclude>
{| cellpadding="4" style="border-collapse: collapse; float: right; width: 250px; margin: 0 0 7px 14px; background: #fff; border: 1px solid #999; color: #000; font-size: smaller; line-height: 1.5;"
 |-
 ! colspan="2" style="background: #ddd; border-bottom: 1px solid #999; text-align: center; font-size: larger;" | character name here
 |-
 | colspan="2" style="padding:0;" |[[Image:No image filler infobox picture.png|258px]]
 |-
 ! colspan="2" style="background: #ddd; border-bottom: 1px solid #999; border-top: 1px solid #999; text-align: center;" | Background Information
 |- style="border-bottom: 1px solid #999;"
 | '''Creator'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Infobox Image'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Theme Animal'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Theme Color'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Theme Song'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''MBTI Personality'''
 | type here
 |-
 ! colspan="2" style="background: #ddd; border-bottom: 1px solid #999; text-align: center;" | Character Information
 |- style="border-bottom: 1px solid #999;"
 | '''Age'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Gender'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Orientation'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Occupation'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Species'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Goal'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Residence'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Relatives'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Allies'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Enemies'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Likes'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Dislikes'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Powers and abilities'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Weapons'''
 | type here
 |- style="border-bottom: 1px solid #999;"
 | '''Quote'''
 | type here
 |}
 </noinclude>

FontsEdit

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.

<div style="font-family: (font name);">

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:

<div style="font-family: adelon book;">

And ta da! Just put </div> at the end where you want the custom font to stop.

Collapsible WindowsEdit

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.

 <div class="mw-customtoggle-1">[[File:file name.png|center|thumb]]</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-1">
text
</div>

For example, this:

 <div class="mw-customtoggle-1">[[File:No image filler infobox picture.png|center|thumb]]</div><div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-1">
text
</div>

Produces:

No image filler infobox picture

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 Edit

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

Note: When I use __NOTOC__, I like to place it at the bottom of the page. It still works, actually. -Pokeball.

Here are some of the commonly used magic words.

__NOTOC__

This removes the table of contents.

__TOC__

This adds the table of contents (TOC) in a certain area.

__NOEDITSECTION__

This removes the edit sections.

This makes the page only editable in source mode.

Tabbers Edit

If your chapters are too long, you may not want to use headings to mark new chapters. Instead, try tabbers. They'll help prevent the page from running too long.

You can have unlimited tabs.

<tabber>Tabber Title 1=stuff
   |-| Tabber Title 2=stuff
   |-|Tabber TItle 3=stuff
   </tabber>

That code produces this:

stuff

stuff

stuff

Keep in mind that when you use tabbers, until </tabber>, where the tabbers stop, you can only edit what's inside the tabbers in Source Mode.

Conclusion Edit

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.

Community content is available under CC-BY-SA unless otherwise noted.