FANDOM


Okay, so, I'll try to explain the basics of coding. I don't really learn about this in real life, and I just able to do it because I tinker with codes... a lot... Oh God... the endless nights I spent tinkering with codes... *shivers*

Well... here goes nothing.

First, I'll explain how to make the background. When you open the source code of a page that you want to copy the design of, this code is usually the first bunch of codes that you will find.

So, if you look at the codes, you will find it in this form:

<div style="width:95%; border:3px solid #000000; background-color:#FFFFFF;
color:#000000; -moz-border-radius:3ex; border-radius:3ex; -moz-box-shadow: 0 0 10px
3px #000000; -webkit-box-shadow: 0 0 10px 3px #000000; box-shadow: 0 0 10px 3px
#FFFFFF; padding:15px; padding-bottom:15px;"></div>


I know, it's a jumble of nonsense, right? I thought so too when I first look at it. But then I realize that the semicolons (;) divide the code into smaller parts, and when I divided it, it somehow makes a little more sense. It will look like this:

<div style="width:95%;
border:3px solid #000000;
background-color:#FFFFFF;
color:#000000;
-moz-border-radius:3ex;
border-radius:3ex;
-moz-box-shadow: 0 0 10px
3px #000000;
-webkit-box-shadow: 0 0 10px 3px #000000;
box-shadow: 0 0 10px 3px #FFFFFF;
padding:15px;
padding-bottom:15px;">
</div>


And, after countless trial and error, I was able to understand the functions of most of the parts of the codes, though I still don't understand some of it. This is the meaning of each part that I already understand.

<div style="
width:95%; (the width of the background box)

border:3px solid #000000; (the "3px" denotes how thick you want the border of the
box to be, and the #000000 is the code for the color you want to use)

background-color:#FFFFFF; (this is the color for the background, #FFFFFF is the
code for the color 'white')

color:#000000; (this is the color for the letters, #000000 is the code for the
color 'black')

-moz-border-radius:3ex; (I don't know what this is)

border-radius:3ex; (this part makes the corner of the box it curved appearance, if
you change the "3ex" to "0ex", the corners of the box will become a right-angle
kind of corner)

-moz-box-shadow: 0 0 10px 3px #000000; (I don't know what this is)

-webkit-box-shadow: 0 0 10px 3px #000000; (I don't know what this is)

box-shadow: 0 0 10px 3px #FF55A3; (the code for the shadow of the background box.
The 10px and 3px defines how thick the shadow will be)
 
padding:15px; (this is how far you want the space between the upper part of the
box and the the first line of words inside it)

padding-bottom:15px;">

</div> (the code that you want the box to end, and everything else typed after
this code will be free of the code you made after the "<div style=" at the start
of the whole code)


So, if you put in the code, you will get this kind of background box:


If you want to put text inside the box, you have to put it before the </div> part of the code. Example:

<div style="width:95%; border:3px solid #000000; background-color:#FFFFFF;
color:#000000; -moz-border-radius:3ex; border-radius:3ex; -moz-box-shadow: 0 0 
10px 3px #000000; -webkit-box-shadow: 0 0 10px 3px #000000; box-shadow: 0 0 10px
3px #FFFFFF; padding:15px; padding-bottom:15px;">Hi! Hello! Testing testing, one,
two, three.</div>


And you will have it looking like this:

Hi! Hello! Testing testing, one, two, three.


So, that was the basic of coding. The key is, when you find a code that you want to copy, just divide it first at the semicolons (;) and try to understand the meaning of each part of the code. It will take time, but you'll get the hang of it once you're hooked with coding. LOL

For the list of codes for the colors that you can use, you can look for it at:

http://en.wikipedia.org/wiki/List_of_colors:_A-M

and

http://en.wikipedia.org/wiki/List_of_colors:_N-Z

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.