[ Poll ] Beginner's Guide to Profile Coding [beta - halted]

Let's see how many votes we can get! :3

+1

100.0%

[ 1061 ]

Total Votes: 1061

[Miimic]

hello and welcome to
MIIMIC'S GUIDE TO PROFILE CODING

NOTICE: This guide is going to be redone during the summer months.

Rate this topic a thumbs up? Just for fun. o:

It's best if you read this first post, it has some helpful information before you start this guide. Here is where you can learn how to make your own profile layout, like the ones you may see on Tektek.org or Designspasm.net. It really isn't that complicated when you get the hang of it, but I must warn you, this guide takes TONS of reading and patience. If you have any questions about the guide, please private message me, if you have any questions about coding, you can post here and either me or someone else will answer you within a day or two DX. Please make sure to read the rules before you post. Keep in mind, this guide has recently been posted, so chances are, there are some typos. If you didn't find this guide helpful, there is always a list of guides in the "links" section of this guide.

Things to know:
Profile must be on classic: Go to my gaia > account settings> preferences > choose profile > classic, otherwise these codes won't work.
Step system: If you are new to coding, make sure to follow the steps, the table of contents says what steps are what, so that means, do not skip ten posts and say this guide is confusing, start at step one.
Coding box: You need a place to put all these codes, this place is either your theme box [my gaia > account settings> profile theme] or www.themes.gaiatools.com/try, make sure NO other codes are in the box when you put codes from this guide in.
Browser Compatibility: This guide was made using codes tested in Firefox, so some codes might only work in Firefox.

[Miimic]

TABLE OF CONTENT

Here is the table of contents, so you can hopefully find out where everything is easier.
1. Introduction

2. Table of Contents

3. Rules

4. Labels

5. Handy Codes

6. Editable Codes

7. Getting Started -STEP 1

8. Introduction into Coding -STEP 2

9. Before You Code -STEP 3

10. Colors -STEP 4

11. Backgrounds -STEP 5

12. Text and Links -STEP 6

13. Borders -STEP 7

14. Positioning -STEP 8

15. Sizing -STEP 9

16. Overflow -STEP 10

17. Hovering -NOT FOR BEGINNERS

18. Custom Sections -NOT FOR BEGINNERS

19. Layering -NOT FOR BEGINNERS

20. Opacity -NOT FOR BEGINNERS

21. Contact Bar -NOT FOR BEGINNERS

22. Reserved

23. Reserved

24. Reserved

25. Reserved

26. Reserved

27. Hall of Fame

28. Good List

29. Frequently Asked Questions

30. Links

[Miimic]

RULES

Please follow all of these rules, I feel you guys won't break any of these, so I won't say what I will do if you break them.


-Stay on the topic of profiles, I will be mad if this thing gets moved away from the Profile Discussion.

-No bumping, I will take care of bumping.

-Intentionally starting an argument is a big no-no, so no flaming/trolling.

-If you want something answered, make sure that it's about coding, I will not answer anything else.

-This is not a place to sell/request a profile layout, try the Personalized Graphics forum.

-Do not quote an entire post on the first two pages, if you do quote, cut everything out that you are not referring to.

-Be as detailed as possible with your questions, the more detailed you are, the more I can help you.

-Please put some effort into finding an answer for your question before posting here.

-Do not spam here.

[Miimic]

LABELS

Here are section names and what they are so you don't have to hunt them down in the future, just for reference. REMEMBER: Just for reference later on, you do NOT have to understand these right away.]


PROFILE

#profile ~ The place with your avatar, equipped items, and contact bar.

#profile h2 ~ The header of the profile section.

#bar ~ Your contact bar.

#profile .items ~ Your equipped items.

#profile .items img ~ Each individual item.

#bar #addButton ~ The add button.

#bar #ignoreButton ~ The ignore button.

#bar #msgButton ~ The message button.

#bar #onlineButton ~ The online half of online/offline button.

#bar #offlineButton ~ The offline half of the online/offline button.


DETAILS

#details ~ The place with your details on it.

#details h2 ~ The header of the details section.

#details #info ~ The half of your details with location, occupation, etc. on it.

#details #stats ~ The half of your details with the join date, last login, etc. on it.

#commonFriends ~ Your friends in common.

#commonFriends li img ~ The pictures of your friends in commons' avatars.


WISHLIST

#wishlist ~ The place where all the items you want are.

#wishlist h2 ~ The header of the wishlist section.

#wishlist .items ~ The actual items as a whole.

#wishlist .items img ~ Each individual wishlist item.

#wishlist .donated ~ What an item looks like if it has been donated.

#wishlist .questing ~ What an item looks like if it is being quested.

#wishlist .bought ~ What an item looks like if it has been bought.


ABOUT

#about ~ The about me section.

#about h2 ~ The header of the about section.

#about .links ~ The guilds, store, and posts links on the top of the about section.


FRIENDS

#friends ~ The section that displays your friends.

#friends h2 ~ The header of the friends section.

#friends .links ~ The link around the top of the friends called 'view all friends'.

#friendGroup ~ The friends themselves, the friend image and friend names.

#friends img ~ The picture of your friends' avatar.

#friends #friendGroup li ~ The annoying border between each row of friends.


JOURNAL

#journal ~ The place with all your journal entries.

#journal h2 ~ The header of the journal section.

#journal .links ~ The link around the top of the journal that says 'view journal.

#journal h3 ~ The title of your journal.

#entries ~ The three most recent entries' titles and dates.


MEDIA

#multimedia ~ The section where you put videos and flash players into.

#multimedia h2 ~ The header of the multimedia section.

#multimedia embed ~ The 'screen' of the video or flash player.

#multimedia object ~ The white area behind the multimedia, it gets really annoying.


COMMENTS

#comments ~ The section where people can leave comments on your profile.

#comments h2 ~ The header of the comments section.

#comments .links ~ The links around the top of the comments section that allows people to add or view comments.

#comments .caption ~ The odd numbered comment boxes.

#comments .caption2 ~ The even numbered comment boxes.

#comments .message ~ The text inside the boxes.

#comments .caption .message ~ The speech arrow on the odd numbered comment boxes.

#comments .caption2 .message ~ The speech arrow on the even numbered comment boxes.

#comments dl dt.avatar img ~ The commenter's avatar on the left side of the comments.

#comments dl dt.avatar2 img ~ The commenter's avatar on the right side of the comments.

#comments .date ~ The date a comment was added.

#alerts_banner ~ The 'alert me of comments' thing that only the owner of the profile can see.


SIGNATURE

#signature ~ The area where people can see your signature.

#signature h2 ~ The signature section.


HEADER

#header ~ The top picture, in the default profile, it's the picture with the houses on it.

#extendedProfileBody #header h1 ~ The background of the header.


TEXT

a:link ~ The links.

a:visited ~ The links that have been visited.

a:active ~ The links that are still active by you, so if you have the link location in a different tab or window.

a:hover ~ What the links look like when someone puts their cursor over them.

td.quote ~ The appearence of something in the quote tags.

td.code ~ The appearance of something in the code tags.


OTHER

#site ~ The entire profile itself.

body ~ The background.

#content ~ What the sections sit on.

#content #main ~ The let half of the content.

.section ~ Controls the profile, details, wishlist, about, friends, journal, multimedia, comments,
and signature sections all at once, great for font colors/sizes and borders.

[Miimic]

HANDY CODES

This is where handy codes will go, you know the ones that a lot of people ask for. Feel free to add handy codes to the collection, just private message me about it, and if I find it handy enough, I will add it here. I will immediatley put credit to you for the code unless you ask otherwise. NOTE: Depending on some settings, you might not notice some things I mention in this post, such as the "annoying light gray line". These codes may not work correctly if other codes in your theme box interfere with them. ALSO depending on what type of oldschool profile you use (classic, custom, grunny, block), some codes may be of no use to you.

This code removes that annoying light gray line through the middle of your profile: #content #main {border:none;}

This code removes that annoying black border to the right of your profile: #content {border-right:none;}

This code centers your profile: #site {margin-left:auto;margin-right:auto;}

This code puts a background on the header: #extendedProfileBody #header h1 {background:url(PUT URL HERE);}

This code removes the text that says the section's name: .section h2 {text-indent:-3000px;}

This code shows that you used my guide, just put it at the top of your code:/*MIIMIC IS AWESOME BECAUSE I USED HIS PROFILE CODING GUIDE*/

This code takes away the "interests" section in the details. #details h3,#details hr {display:none;}

This code will remove the little "find friends" thing on the top right corner of your friends list. #find_friends_banner {display:none;}

This code removes the "alert me of comments" thing in your comment section: #alerts_banner {display:none;}

People who contributed:
Miimic
Matsuri Riiko
ellens profile tester

[Miimic]

EDITABLE CODES

Anything between [these two bracket things] is the place to put your own stuff. Make sure to get rid of the brackets after you fill them in. I hope that makes sense. Everything to change is also in bold text. This section was such a pain to make, I hope it helps you. Unsure about something? At the bottom of this post, there is a little area that says what everything does.

Borders

1. [section name] { border : [width] [style] [color] ;}

Positions

1. [section name] {position:absolute;top:[number]px;left:[number]px;}
2. [section name] {margin-top:[number]px;margin-left:[number]px;}

Sizing

1.[section name] {height:[number]px;width:[number]px;}

Text

1. [section name] {font-family:[family];font-size:[number]px;text-decoration:[decoration];color:[color];}

Links

1. [section name] a:link {font-family:[family];font-size:[number]px;text-decoration:[decoration];color:[color];}

2. [section name] a:active {font-family:[family];font-size:[number]px;text-decoration:[decoration];color:[color];}

3. [section name] a:visited {font-family:[family];font-size:[number]px;text-decoration:[decoration];color:[color];}


4. [section name] a:hover {font-family:[family];font-size:[number]px;text-decoration:[decoration];color:[color];}

Hover

1. [section name]:hover {font-family:[family];font-size:[number]px;text-decoration:[decoration];color:[color];height:[number]px;width:[number]px;background:[color];}

Backgrounds

1. [section name] {background:[color];}
2. [section name] {background:url([url]) repeat:[true/false] [image position];}

Scrollbars/Overflow

1. [section name] {overflow:auto;}

2. [section name] {overflow-y:auto;}

3. [section name] {overflow-x:auto;}

4. [section name] {overflow:hidden;}

5. [section name] {overflow-y:hidden;}

6. [section name] {overflow-x:hidden;}

7. [section name] {overflow-y:auto;overflow-x:hidden;padding-right:3000px;} body {overflow-x:hidden;}



What They Do


Borders
1. Adds a border to the defined section.

Positioning
1. Uses absolute positioning to position the defined section.

2. Uses margin positioning to position the defined section.

Sizing
1. Changes the size of the defined section.

Text
1. Changes the font family, color, size, and decoration of text in the defined section.

Link
1. Changes the links that have not been visited or are not being hovered over.

2. Changes the links that are currently being visited by the viewer.

3. Changes the links that have been visited by the viewer.

4. Changes the links when being hovered over.

Hover

1. Changes tons of stuff about a section when it is hovered over. !currently not in this guide!

Backgrounds

1. Changes the color of the background of the defined section.


2. Changes the image of the background of the defined section.

Overflow/Scrollbars

1. Makes the defined section scroll left to right and top to bottom when required.

2. Makes the defined section scroll top to bottom when required.

3. Makes the defined section scroll left to right when required.

4. Hides everything that would normally go out of the defined section.

5. Makes it so that the defined section doesn't scroll top to bottom.

6. Makes it so that the defined section doesn't scroll left to right.

7. Makes a section scroll top to bottom with an invisible scrollbar.

[Miimic]

GETTING STARTED

I am not going to teach you any coding just yet. I know very well just how hard it can be learning this stuff right away. Let's just start by getting an idea for your profile. Go take a break and think of an idea for your profile. Try to stay away from copywrite stuff such as Naruto or Kingdom Hearts. It doesn't even need to have a theme, most of my profiles are simply based on colors. Take your time, me and many others believe thinking of the profile is the hardest part in profile making.

Welcome back, I see you have thought of an idea! I love it, I can't believe I didn't think of that. Now that you have an idea in that head of yours, you should begin sketching it. You could make it in an art program or just on a notebook. I prefer a notebook for no obvious reason, I just do. Here is an example of one I drew in Microsoft Paint a while back and this is a sketch I drew on a notebook especially for this guide.

Ok, so now you have a sketch of your profile, it's not a bad idea to label everything and label colors as well. Now all there is to do is learn how to code! Please follow the steps in order if you are a beginner, otherwise, you will be lost.

[Miimic]

INTRODUCTION INTO CODING

Ok, this is where it gets mildly confusing. I am about to show you the basic idea of a code. Just ignore any punctuation and read what the labels are.

section name { command : details ;}

You see, 'section name' would be something such as the body [the background]. Command would be the thing you want changed and details would be the details of the command. Sorry if that was a little confusing, here is that same code if I filled it in with examples.

body { background : white ;}

See, that wasn't so bad, now was it? That should have made the body white. Now that you know how to read a basic code, I can teach you codes easier then I would if I never taught you how to read codes.

Some section names get pretty tricky. The main section names such as about me, comments, details, etc. all have a number sign in front of them, so if you see one of those, don't panic.

There is a very important code you should know. This all mighty code allows you to remove the section you wish to remove. Here is the code.

section name { display : none ;}

If you didn't understand that, then just think about the labels. Display is how it appears, and if there is no [none] display, that means it's not there. Dandy, huh?

[Miimic]

BEFORE YOU CODE

Before you code anything, there are a few things you should know.

1. File Format
Your graphics [if you have any] are a big part of the profile. Save them to a file format meant for other types of images, and it could ruin your profile. Basic images, you know, not animated, nothing really fancy, they are generally saved as .png. This should help you find out how to do that if you don't already know how.

2. Coding Organization
It is a good idea to keep your codes organized and easy to find stuff if you are beginning. This is an example of a great beginner's coding organization. I will be typing codes in this guide like this from now on:

section name {
command : details ;
command : details ;
}

When you get better at understanding codes, feel free to do something like this:

section name {command : details ;}
section name {command : details ;}

I use the following way, it's space efficient, which means less time to code.

section name {command:details;command:details;}

Another thing about coding organization, it is a good idea to label all your stuff using codes like this.

/*ABOUT*/
#about {command:details;}
#about {command:details;}

This makes it so much easier to find stuff, anything in /*THIS*/ tag does not affect the profile in any way. These are called comment codes, but so nobody gets confused, I just call them organization tags.

While we are on the topic of finding things, maybe it's a good idea to mention F+Ctrl. If you press F and Ctrl at the same time, it brings up a little bar on the bottom of the window. If you enter something in it, it will go to the same word somewhere on the page. Great for finding a code buried in your theme override box.

3. Gaiatools
I use Gaiatools to make my profiles. Well not make profiles, it's kind of just a helping hand. It allows me to preview the code much easier. Unfortunately it is not always entirely accurate and does not allow me to preview custom sections or equipped list. Not only is it a time saver, it cuts the risk of others seeing unfinished profiles. I normally code my profiles here [make an account so you can turn on autosave] then turn on autosave while coding. When I am satisfied, I put the code on a mule, and edit any mistakes that Gaiatools may have made.

4. Keeping a Theme Box in reach
I will be asking you to try out codes throughout the guide. So, I suggest either opening Gaiatools in a new tab/window, or having a profile with the default, classic profile. In other words, have somewhere to preview codes where there is no other codes to interfere.

[Miimic]

COLORS

Colors are a huge, huge, huge part of profiles. Since I have not taught you any coding yet, I cannot give examples with colors, but I can tell you how to get colors and teach you the codes later.

To get my colors, I normally go to CoolText, it is not only a great place to find colors, but also to generate graphics. Follow these steps to find a specific color of your own.

After you have found a color you like, copy the six digit code which the last arrow points to here. After you get the six digit code, add a number sign to it, like this:

#0000FF

It is now ready to be replaced as a color tag such as 'red' or 'blue'. These codes are called HEX codes, they are used in profile coding to get more specific colors.

Choosing a color:
It is best to choose a color that doesn't hurt the eyes, here are a few things you should watch out for.

The following hurts your eyes if you stare at it enough, doesn't it?
The red llama wore out the fluffy pink socks of love on the silver pug isles.

Now take a look at this one, it is a hex code and doesn't hurt the eyes.
The red llama wore out the fluffy pink socks of love on the silver pug isles.

In the past, I have made the mistake of using colors that hurt the eyes. A horrible color combination to choose is red and blue. They clash off each other and make the profile hard to look at. Here is an example of red+blue of you do not believe me.

[Miimic]

BACKGROUNDS

You are finally ready to learn how to code yourself! First off, you might want to open this in a new tab/window. Whenever you wish to try out a code, just type it up where it says and preview. If it doesn't work, something is wrong with the code. If the link didn't work, the url goes to www.themes.gaiatools.com/try

In this section of the guide, I will attempt to teach you backgrounds. Keep in mind these are for v1 or Classic profiles only!

Backgrounds are pretty simple, especially colors. Here is an example of a background code.

section name {
background : color or HEXcode
;}

Just replace what is underlined with whatever you want. I decided to fill it in for you. Try this code out using your profile, the link I mentioned above, or a mule's profile.

#about {
background : blue
;}

Did you try it? If you didn't, it just made the about me section's background color blue. Nothing too fancy. You can make background colors on links, sections, and even the body [the background].

Now try and type up your own background code and try it out. There is a base for this code earlier in this section.

So, did you type up your own?
No you say?
Well go do it!

Welcome back, I see you typed up your own background color code. So, now that you understand the background colors, let's take a look at background images. Here is a background image code, everything underlined, you can replace with what you want.

section name {
background : url( an image's direct link ) image details
;}

First, let's talk about the second underlined part. See those little curved lines? Those are supposed to be there, don't delete them or it will ruin the code. Inside those, you just have to put the url of the image you want. Make sure it's the 'direct link' and not another type of link.

Next, I think you should learn about image details. Kk, image details are things like where the image will be on the background, and if it does that funky tile thing on your background. First, let's talking about the tile thing.

Have you ever put a picture on your desktop with the "tile" setting? Well that is what I'm referring to. If you do not know what I'm talking about, test out the following code and look at the background.

body {
background : url( http://i234.photobucket.com/albums/ee71/Rare-Floof-Penguin/PurpleandOrangeLightningBodyBackgro.png )
;}

Kk, now see how it goes everywhere on the background? Well, that is tiling, or repeat. Repeat is the default when you put a background image, so to stop it from repeating, take a look at this code.

body {
background:url(http://i234.photobucket.com/albums/ee71/Rare-Floof-Penguin/PurpleandOrangeLightningBodyBackgro.png) no-repeat
;}

Ok, now look at the underlined. That's what I added from the last code. If you put in 'no-repeat', it makes it so the image will not repeat. It is very important that you leave a space between the second ')' and the 'no-repeat'. If there is no space, the image will not be viewable in Internet Explorer.

If you are using a classic profile, changes are when you put in that code, all you saw was a white background. Well that's because the picture is covered by the header. You need to change where the picture goes to actually see it.

All you need is to add positioning to the image. It's actually pretty simple, you just add words for positioning, not those complicated coded items. Kay, so take a look at this code. I added to the last code, just look at the underlined.
body {
background:url(http://i234.photobucket.com/albums/ee71/Rare-Floof-Penguin/PurpleandOrangeLightningBodyBackgro.png) top right no-repeat
;}

Kk, now try that code out, see how it's now at the right center of the background? Well, you can add anything like that. Here is a list of what you can add instead.

top left
top center
top right
top left
left center
bottom left
center
right center
bottom left
bottom center
bottom right

I'm pretty sure the positioning has to go before the no-repeat thing. I'm not exactly sure why, but it didn't work till I put the positioning before the no-repeat.

There is a more exact way to position images, but it's a mess, at least it is to me. So forget about that.

I know this is a little late to mention, but you can make your background see through or transparent.

section name {
background : transparent
;}

I'm not sure what would happen if you put it on the background, because I don't know what's under it. I don't plan to find out any time soon. Try this out:

#content {
background : transparent
;}

See how it showed the background instead of the big white block? Well that's because you made the big white block see through.

NOTE: When you are putting image attachments such as 'no-repeat' or 'top right', make sure that it is between the ')' and the ';'. Because the ';'s divide different codes, if you were to put it on the right side of the ';', it would be out of the code with the image in it.

Kk, now there is only one thing left to cover, it is background attachments. At least, I think that's what they are called. Well anyway, they are pretty hard to explain, so take a look at the following codes.

Clear your theme override box and put in the following code.

body {
background:url(http://i234.photobucket.com/albums/ee71/Rare-Floof-Penguin/PurpleandOrangeLightningBodyBackgro.png) top right no-repeat;
background-attachment: fixed
;}

I underlined what I added from a couple codes up. In this code you DO NOT put it where the 'no-repeat' and such goes. It is a separate code from the background image. You don't need it in the same code, because it is specifically for the background image. With that code in your theme override box, scroll down your profile and look at the background. See how it stays there? That is the affect of 'background-attachment: fixed'. To get it back to normal, either delete the background attachment code to make it default, or replace 'fixed' with 'scroll'.

Wow, what a long section! I sure hope you didn't die of boredom. I'm pretty sure no other sections will be nearly this long. Remember, do not give up coding, it's hard at first, but it shall be worth it when you are selling profiles for one million gold a piece.
>:3

[Miimic]

TEXT AND LINKS

I bet by now you're wondering how to change the words do different colors, sizes, and even styles. Well, it's all pretty simple. First, let's learn how to change the color. First off, it's kind of weird because of the command name.

section title {
color : color or HEXcode ;
}

See what I mean? It's just 'color', not 'font color' or anything of the sort, just 'color'. Just so you really get the hang of colors, test out this code, then type your own color code.

#about {
color : green ;
}

What that should have done is make the text int he about green. Now type up your own color code.

You typed up a color code? Awesome, make sure that it's readable. Let's try one with a HEXcode this time.

#about {
color : #CECECE ;
}

The HEXcode gave me a more specific gray, awesome I know. Now that you have the colors under your belt, how's about font sizes? These ones are simple, just not as much.

#about {
font-size : 9px ;
}

Remember to delete any codes you still have in your theme box before previewing this. That code up there should have made your font size 9 pixels tall. There are other ways to change the size of your text. Here is an example.

#about {
font-size : 9pt ;
}

See what I did there? I changed 'px' to 'pt'. I guess now is a good time to explain those. 'Px' means pixels, it is a widely used measurement in coding. Pixels are the tiny squares you see if you look at your tv screen, computer screen, or even your MP3 player's screen. Pixels change to form shapes, which forms things like what you are reading now. 'Pt' I believe means point. I'm not completly sure, but I think it is specifically for font sizes. I've seen it in Photoshop, Microsoft Paint, Microsoft Word, etc.

I think I have explained font sizes enough. Now let's get to those font families!

Font families are a great way to add that custom factor to your profile. What is a font family? Well it is a font type. You know, like what you're reading is Times New Roman [or something like that] while there is other types that look completely different. Words cannot really describe it. Test the following code.

#about {
font-family : Chiller ;
}

Now that is a font family. If you go to Microsoft Paint or Photoshop and look at all the fonts, just take one of those names and put it in your code. I'm not sure if they all work, but I know most of them do. Take a looksie at the following code.

section title {
font-family : family name here ;
}

So just fill out what is underlined and test it out. If you do not have Microsoft Paint or Photoshop, you can always ask a friend to find a snazzy font family. I think next is the time for font weights.

I personally love font weights. Font weights are things such as bold, bolder, and boldest. This is what bold looks like. They make words more noticeable and readable in a lot of cases. This is a font weight skeleton code. Skeleton as in not filled in, a structure.

section name {
font-weight : weight here ;
}

I have decided to fill this in for you.

#about {
font-weight : bold ;
}

Test it out and see what bold looks like in your about. Unfortunately, I can't figure out how to get anything besides bold to work. It doesn't matter, every other font weight is crappy anyway.

Text decoration is a thing I think you should know. Text decoration is things like underlined or blinking text. I think the blinking text isn't very handy, but whatever, it's a text decoration. Ok, first off, test out this code.

#about {
text-decoration : blink ;
}

See what it looks like? I guess it'd be ok for small parts of the profile that need to be noticed, but not when someone is really trying to read it. There are several different text decorations that you could put instead of 'blink'. Here they are.

Underline
Blink
None
Line-through
Overline
Italic

Now let's talk about links. There are four types of links.

a:link ~ The links.
a:visited ~ The links that have been visited.
a:active ~ The links that are still active by you, so if you have the link location in a different tab or window.
a:hover ~ What the links look like when someone puts their cursor over them.

Now that you already know how to change the color, font family, sizes, etc., all you have to do is put the appropriate link title in the 'section name' part. Here is an example just for the heck of it.

a:link {
color : gray ;
font-weight : bold ;
font-decoration : none ;
font-family : Thickhead ;
font-size : 11px ;
}

A little bunched up, no? Why not space it out?

a:link {

color : gray ;

font-weight : bold ;

font-decoration : none ;

font-family : Thickhead ;

font-size : 11px ;

}

[Miimic]

BORDERS

Borders are awesome and useful for many things. So I think it's about time you learned how to use them.

Kk, borders are very simple. Just take a looky at this skeleton code.

section name {
border : width color style ;
}

Yush, as simple as that. First, let's talk about the width. The width is simply the width of the border, pretty simple, no? Here is a border width code.

#about {
border : 5px ;
}

This code makes the border 5 pixels wide. But a border won't show up till you define the color, style and width. Here is the color, it's pretty simple, pretty much like the other colors you have seen.

#about {
border : red ;
}

Ok, so if you put both of those down, you have a red border that is 5 pixels wide. But you still need a style! I will just use solid style.

#about {
border :red ;
}

To save space, it's always a good idea to put this into one line.

#about {
border : red 5px solid ;
}

There you have it, a red wide solid border. But we still need to clarify styles a bit more.

Kk, there are several types of styles, you just have to test them out yourself.

Solid
Double
Inset
Outset
Dotted
Dash
Ridge
Groove

If you want to be more specific about what borders are what, take a look at the underlined.

#about {
border-bottom : 5px red solid ;
}

This makes only the bottom border red 5px solid. It really adds a customizable affect to some things.

border-top
border-bottom
border-left
border-right

[Miimic]

POSITIONING

Positioning is awesome. It allows you to move different sections to different places in your profile. There are three types of positioning, some used more then others. First off, I shall cover the most commonly used.

The most commonly used positioning is called absolute. It means it sticks where you tell it to absolutly no matter what. Here is an example of the code.

section name {
position : absolute ;
top : __px ;
left : __px ;
}

KK, first off, let's explain the 'top : __px ;'. Basically, the higher the number you put in, the lower the section will go. The number you put in represents the space between the top and the section, if that makes it any clearer.

The 'left : __px ;' is exactly the same, except it's how many pixels to the left is, not how many pixels to the top.

Here it is filled in:

#about {
position : absolute ;
top : 100px ;
left : 100px ;
}

A less popular positioning code is margins. It's pretty much the same as absolute, but it's normally used for small parts of a section. Here is an example:

section name {
margin-top : __px ;
margin-left : __px;
}

It's a whole lot like absolute. You just add 'margin-' to the beginning of 'top' and/or 'left' then take away the 'position : absolute ;'. These things are really handy when doing things absolute sucks at, but that's a little advanced for beginners.

The last time of positioning is 'relative', but it's not like anyone uses it anyway. Maybe when I'm less lazy, I'll add it.

That's it for positioning, have a nice day and read the next section.

[Miimic]

SIZING

Ok, sizing is pretty straight forward. But first, what is sizing? How big it is, no shizzle. Sizing, like everything else in coding, is measured in pixels [px]. Ok, let's take a peek at a code.

section name {
height : __px ;
width : __px ;
}

The height is how tall the section is, the width is how fat it is. Simple enough?

Kk, well there is a common mistake in sizing coding. It is simply misspelling the word 'height'. So before you panic about your code not working, make sure everything is spelled correctly.

Here is a sizing code filled in:

#about {
height : 400px ;
width : 314px ;
}

So that should make a pretty good sized about section. I hope you understand sizing, it's the simplest thing to know. If you don't understand it, try that code out.