Youth Venture

January 30, 2008 - 9:48pm — Totem

Formatting your Profile: Cool Backgrounds

In the fist guide, we learned the basics of CSS and profile formatting. In this tutorial, we will do some pretty cool stuff with backgrounds.

Here is the base code we will work with. Put it in your "other goals" section*.
*It really doesn't matter which section you put the CSS in, it is just useful to keep consistent, so I always use "other goals".

<style type="text/css">
body {
background-image: url('http://static3.filefront.com/images/personal/t/totemgufler/120996/prmiwbcape.jpg');
background-repeat:repeat
}
</style>

background-image: url('http://static3.filefront.com/images/personal/t/totemgufler/120996/prmiwbcape.jpg') sets the background image to the image at the url in the single quotes.
background-repeat:repeat makes the background image tile across the whole screen. The image itself is really small. Just look at this.

There, save that and see how it looks. Pretty cool, huh? You can replace that url with any urn that you know of. You will notice that mine is hosted on filefront, though it it a little tricky to get the url for images hosted there.

So that's pretty exciting, a custom background. Here are some other possibilities for background-repeat:

background-repeat:repeat
background-repeat:no-repeat
background-repeat:x-repeat
background-repeat:y-repeat

What if we want to be able to scroll our profiles, but have the background stay still? This is really easy!
So, to do this, simply put a semicolon after background-repeat:repeat and add background-attachment:fixed to the end. The updated code is as follows:

<style type="text/css">
body {
background-image: url('http://static3.filefront.com/images/personal/t/totemgufler/120996/prmiwbcape.jpg');
background-repeat:repeat;
background-attachment:fixed
}
</style>

background-attachment:fixed simply says, don't have the background move AT ALL. Why add the semicolon to the end of background-repeat:repeat? To be able to tell all of the "characteristics" apart, you must put a semicolon after each one except for the last. If there is only one, don't use a semicolon at all.

January 28, 2008 - 11:32am — Totem

Formatting your Profile: Introduction

Have you ever wanted to make your profile look awesome? Have you seen those people with cool background and you want one for yourself? There are lots of ways of doing this, and a lot of people just go to places like http://www.freemyspacebackgrounds.net/ and just copy the code they give you. It is relatively easy, however, do do this yourself. Just take a look at my profile and see what can be done with some simple code.

Changing the way your profile looks it done with CSS. CSS is a scripting language that allows you to customize the look and feel of html web pages.

I will only provide the basics of CSS so you can do some simple profile formatting, but w3schools has an excellent guide: http://w3schools.com/css/default.asp.

Let's start off with an example.

Copy and paste this code into the "other goals" section of your profile:

<style type="text/css">

body {
background-color:#0000FF;
color:#FF0000;
}
</style>

So what does this code do? Everything is within the <style type="text/css"> and </style>. These are called tags and they mean that everything within them is CSS. Without them, the code won't do anything. Then you see a block of code between body { and }. Everything within these affects everything on the page - the body (for the most part). The background-color:#0000FF; sets the background color to blue. color:#FF0000; sets the font color to red. the six digit numbers are called hex codes. There are representations of actual colors. Take a look at this page: http://www.developingwebs.net/tools/color.php