Adventure Time with Finn and Jake Wiki


HTML Guide

Homocat December 18, 2015 User blog:Homocat


This is a tutorial to help you with html coding, something Wikia doesn't really teach you how to do, or it's something too hard to find. If you wanna costumize your pages, profile, blogs, signatures, anything you fell like, this blog will help to do so.

Choose your section.



To start, I'm going to show you how to add and personalize your texts, which is one of the basic things in your profile. For this, you can choose the font, it's size and it's color.

  • Step 1 -  Open your profile editor, by clicking in the icon "Edit" under the box which shows your account information (be sure that there is nothing in your profile yet).
  • Step 2 - Next to the top of the screen, there are two icons below, "Source" and "Visual", click on "Source".
  • Step 3 -  Pay attention now, you see the code below? Copy and paste it on the editor box you just opened.
<font size="(custom)" font face="(custom)" color="(custom)">Text</font>
  • Step 4 - In the first "(custom)", remove only the parentheses and write down the font size beetween 0 to 10 (recommended). Now, with the second "(custom)" remove the parentheses and write down the text font you wish. (Wikia design can't go far from the basic so try the basic fonts on this chart, i think those will work). Finally we have the last, as you've done before but now replace "custom" with the color/htmlcolor you wish.
​You can also do some additional changes in the text on the visual editor like turning text bold, italic, linked to something , or others .

Note: I'm not sure if there are html possible codes for gradient texts, if you know it send me so I can add to this tutorial.


Platforms are boxes where you can add informations, such as - texts, images, videos, galleries, or templates.


  • Step 1 - Open your profile editor.
  • Step 2 Now you got to decide which design you want to add as platform at your profile.



Copy and paste the design (contour) code below it's name, do not change the code or it's performed text. Be patient after this step completed. For this, you can choose the box design and it's outline color.



<div style="margin:0 auto; margin-top:10px; padding:1px; border-radius:6px; border:3px dashed #F5A9F2; background:#F6CEF5; font-size:90%; width:90%; color:#0000


<div style="margin:0 auto; margin-top:10px; padding:1px; border-radius:6px; border:3px double #F5A9F2; background:#F6CEF5; font-size:90%; width:90%; color:#000000;">



Sold (no outline)

<div style="margin:0 auto; margin-top:10px; padding:1px; border-radius:6px; border:3px sold #F5A9F2; background:#F6CEF5; font-size:90%; width:90%; color:#000000;">


<div style="margin:0 auto; margin-top:10px; padding:1px; border-radius:6px; border:3px dotted #F5A9F2; background:#F6CEF5; font-size:90%; width:90%; color:#000000;">


You can also use, instead of colors, gradients on the background. 

<pre style="width:750px; background-image:-webkit-radial-gradient(pink, white); border:4px dashed pink; "><span style="font-weight:normal;font-family:Helvetica,Arial,sans-serif;line-height:21px;"><div align="(custom)"><div style="width:(custom)px; background-image:-webkit-(custom)-gradient(color1, color2); border:(custom)px (custom) (custom color); "></div></span>

Note: I think there is something wrong with the code I picked? Can someone please take a look?

  • Step 1: Copy and paste in the editor. Now pay attention, this code is quite different, replace the first "custom" with left or right depending on where you want it to show, the second "custom" defines the box size, if you want it to cover the entire page width, what I would prefer doing, replace it with 1,0000px. Next there is the third "custom" where you choose the gradient type, it can work with the following:
Linear, Radial, Repeating-Linear, Repeating-Radial (I see nothing different between linear/radial with "repeating" or without it, I don't know what it is for)
  • Step 2: Ok, now working with the fourth (color1, color2), choose the colors of the gradient, you can make it more than two colors too, just by separating the colors by comma, it's very fun! If your gradient is linear you can choose from which direction the gradient comes, use left, right, bottom, top just put it before the colors:
Ex.: "(right, red, blue)", "(top, lightgreen, yellow, orange)"

Length and Width

After selecting your box design, now you can personalize the outline you have.

  • Step 1 - In the secong text section, there will be:

​       "<div style="margin:0 auto; margin-top:(custom)px; padding:(custom)px; border-radius:(custom); border:(custom)px"

  • Step 2 - Remove the parentheses and replace the word "custom" with the choosen number (between 1 to 15 - recommended)

Colouring and Text

  • Step 1 -  As you did before, remove the parentheses and replace the word "custom" with the choosen number or html color:

      " #(custom); background:#(custom); font-size:(custom)%; width:(custom); color:#000000;"> "

  • Step 2 - Use this page to help you to find the color you want. And this one if you think it is difficult to find the ideal color by uploading a photo and selecting the color on it. But if you don't really feel like doing it with numbers, you can remove the hashtag and use the color name.

  • Important Note - "#(custom); background:#(custom);" is the platform design code and "font-size:(custom)%; width:(custom); color:#000000;"> " is the text, (tittle) code.


Floaters are images or gifs that are displayed in a page, mostly to personalize profiles, they appear out of your editor box, in the edge of the screen.

  • Step 1 - First upload the image or gif that you want in this wikia, using this page . Save your file with a certain name you can remember, if you're in trouble with uploading the file, try to rename it.
  • Step 2 - Now open the source editor in your page, and copy and paste the code below at the top or bottom of the box.
<div style="position:fixed;(custom):0px;(custom):30px;z-index:">[[File:(custom)|(custo​m)px|link=]]</div>
  • Step 3 - Replace the "(custom)" beside the code ">[[File:" with the file name, then you got to put it's format log - .png  .gif and jpg. 
  • Step 4 - Now you can edit where it is going to be displayed, and the file size. In the first one, replace it with, bottom or top, depending on your opinion, in the second you will choose the file's position, replace with "left" or "right", and in the third you will choose the file size, try from number 40 to 300 (recommended).

Username Feature

So... this feature detects who is the user visiting the page and it automatically shows their name. Remove the stars over span class and the star next to the code before you copy it. On the code below you can replace (anything) by anything because it will only appear inside your html editor.

Ex.: "Hello there you, I'm right behind your back and I'm going to eat your soul! :)"

Cool right?
<*span class*="insertusername">(anything)</span>*

Other Features for your profile

The other features may not seem as cool, but they do look good if in your profile, if you want to introduce yourself for example or display imformations about yourself you can use tables or character templates. You can find those in the box next to your editor > scroll down to templates > add other templates > character

Then you just add the informations you might like. Or if you want it more personalized, use a table template or a infobox template.

ScreenHunter 36 Dec. 18 12.52

Example.: Tavisourse Profile

Message Wall Greetings

You can create a welcome message at the top of your wall by adding content to the page "Message Wall Greeting:USERNAME"

  • Example: The page Message Wall Greeting:Wikia would contain the greeting for Message Wall:Wikia.
  • View Source: If you would like to be able to see the source code of other people's messages, you can enable View Source in your Preferences. Just go to the "Under the Hood" tab, and you'll see it under "Advanced Display Options." This will add "Source Mode" to the menu that appears on each message. On wikias where the message wall extension is disabled you cannot modify the view source on threads preference.

(text from wikia community)

There are way many more templates, you just have to learn the logic behing the html coding, and you willl become a wild beemo

Please tell me whenever there is other cool feature you want me to add to this tutorial, thank you.

Also on Fandom

Random Wiki