Hello![]
This is a tutorial to help you with html coding, something Wikia doesn't really teach you how to do. If you wanna costumize your pages, profile, blogs, signatures, anything you fell like, this blog will help to do so.
Choose your section.
Profile []
Platforms[]
Platforms are boxes where you can add informations, such as - texts, images, videos, galleries, or templates.
- 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 - Now you got to see which design you want to add as platform at your profile.
Design
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.
Dashed
<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
Double
<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;">
Dotted
<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.
<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[]
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)|(custom)px|link=]]
- 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 page html.
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.
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.