Customizing Myspace with CSS and DIV Overlays

Myspace is one of the biggest social gatherings on the internet. There are literally millions of people involved with Myspace. With member numbers growing almost daily there is no end in sight to the monster that is Myspace. Before I get into how to fully customize Myspace I have something that I think I should get off my chest about it first.

There has been quite a bit of controversy surrounding Myspace. Mostly questions of safety and security topic. From sexual predators to people just flat out getting addicted to finding and adding new friends, we are all too aware of the potential problems of Myspace. Myspace seems too been labeled as an unsafe or 'bad' place on the net. There is so much negativity surrounding Myspace that one would think people wouldn't keep joining. So why do people join then? I am sure each and every person has their own reasons for joining. Whether it is for dating, social connectivity or just simply sheer boredom, the fact remains that no matter how much negative publicity Myspace gets, it will continue to gain members.

My initial thoughts about Myspace were much like everyone else's. After looking at a few peoples Myspace pages I felt that it was a completely ridiculous and unsafe idea putting all your information for the world to see. However, after spending some time there and getting a really unique page up, I changed my mind. While I still believe that users should not be listing all their information on Myspace, I still think that Myspace can be of significant use. I think, due to people's ignorance they don't see Myspace for what it really is; free hosting. Using your own CSS code, your own styles, your own content and your own anything one can pretty much turn Myspace into anything they want. Here are just a few things you can do with Myspace:

- Advertise services or products.
- Create and Maintain online events.
- Turn it into a news page.
- Turn it into a forums centralized on a specific topic.

These are just a few ideas, the possibilities are almost limitless. My advice to anyone thinking about getting a Myspace page, don't just post all your information and change the background and a few colors, use Myspace for a higher purpose; such as one of those listed above.

I am an aspiring writer. What I do with Myspace is I create a story and cast roles of the characters to those who want to participate in the story. Those people who have been caste in the story are entitled to 'privileged' information about their character and how they affect the outcome of the story. This is just one of the several things you can use Myspace for, it's easy and the advertising is free!

Anyway, the default Myspace page was clearly not going to work for what I wanted to do with it. So I did some research and figured out how to completely change the look of Myspace to virtually anything I wanted. The learning curve was a bit steep, as I had almost no previous web design experience, but I learned rather quickly. The wonderful world of CSS and DIV overlays will give you the power to change Myspace to whatever it is you can imagine!

CSS, cascading style sheets, is a scripting language. Even simpler, it purpose is to format something to consistently stay the same. For example, take a paragraph and say you want the text to be red throughout the whole document. With html you could just start with the good old tag and close it when you finished with text. But that could cause some problems if you have nested tags or just simply lost track of all the tags. With CSS you only need to declare the font color 1 time and each time you use the code associated with the format style, it applies the changes. Let's get down to coding! In this article we are going to completely cover up your Myspace page!

First you want to start with the required tag, the style tag. The purpose of this tag is to tell Myspace that you are writing CSS code. Without it, it would be either ignored or posted to the section you type it in. I recommend cut/paste everything in all your boxes and save them as a backup.

After you have cleared out all your boxes type in this code (in your about me section). Then reload and preview your page. I will explain it later when you see the results of what it does:

If you did this correctly you should see a small box near the top corner of your page. By looking at the code above, if you wanted to change it you could safely make the assumption that changing the text 'green' by background-color to a different color, would respectively change the color of your page. That one is easy at first glance, but let's look at the more complicated stuff.

.main
I first want to start off by saying that anything after the period can be anything you want. You can change the word main to anything your heart desires but you MUST place the period before it or it will not work.

{
This is an open bracket. It basically tells Myspace that everything from that point on is going to be a part of the same format. Everywhere you use this format, all things declared inside the { and } will affect the outcome. This is required also.

Position:abosolute;
This tells your browser that you want the height, width and position to be absolutely what you tell it based on the entire webpage. This is optional however it wise to use it. Without using it you couldn't effectively position anything on your page. The main keyword here is 'position'. The word absolute can be one of several different words, which we will not get into right now.

Left:0%; - Top:0%;
These two separate lines work hand in hand. The values for them can range from 0-100%. They govern the position of anything using this format. The %'s are based on your browser size. Since we left ours at 0%, our height, width and margin settings will be based at the very top corner of the page. If we changed left to 50%, everything would start at the center of our screen. Go ahead, change these settings. Save and preview your page to see its effect on it.

Margin-top:0px; - Margin-left:0px;
This is almost self explanatory. Keep in mind that these numbers are based on your %'s you set in the previous field we talked about. If you have left or top set to anything other than 0% you may not get the results you expected. So, after you're done toying with the % from above, make sure you put them back to 0%. Margin-top is exactly what it sounds like, the position you want your top margin to start at. This can range in any value, almost infinite, and be either positive or negative. The px after the number is a unit of measurement, it stands for pixels. There are several different forms of measurement you can use but pixels are the most precise unit of measurement when it comes to webpage's. Let's change the 0 to 200, save and view your profile. You will notice that the box moved down approximately 200 pixels. You can do the same for your left margin, except it will move it to the left instead of down. Play with these numbers and watch the effect it has on the box.

Height:200px; - Width:500px;
These two lines will dictate how large the box is. Right now, as you can see, it's 200 pixels tall and 500 pixels wide. Feel free to change the values and see the effects of it. The number values can be anything you want but they have to be positive numbers.

Border: 6pt ridge; - border-color:red;
These two lines will change the border around the box you created. It uses a different unit of measurement, pt (point). This value can be anything you want as well, but the larger the border to uglier it gets. Typically, smaller borders look better. After the point size you see the word ridge. This is a border type. For a full list of border types go here http://www.tizag.com/cssT/border.php . The format they use here is a bit different. We are actually using a truncated form for listing the border type. Just pay attention the last word before the closing bracket ( }). If you scroll down some more it will even show you what the different types look like. The border-color is self explanatory. It can be any color you want. Go ahead and change these attributes as well and get the feel of the differences.

Background-color:green;
By simply changing the word green to another color you can change the color of the box. Pick a color that suits your style.

Color:orange;
This will be telling you what color your text will be. Once again, you can change it to whatever you want.

z-index:1;
One of the most appealing features to CSS is the ability to stack things on top of one another. You can't do that with normal HTML. With enough practice you can create some really neat effects with text, pictures or the boxes you are making. Keep track of how high your z-index gets. If you lose track, and are stacking things, you may not be able to see your newly created box if you z-index is lower than the previous index. This isn't to say that you need to increase the number with each box you make. You will only need to increase the number if you plan on stacking things, which we will be doing.

Close all that with the closing bracket ( } ) and you will have created your first box! A few things to keep in mind:

- Only change text that is after the : symbol and before the ; symbol.
- End each line with the ; symbol;
- Make sure to place all code between tags.
- Different browsers will display your page differently.
- Proofread your code! It's easy to forget something or make a typo.

Now that you know how to create a box, were going to talk about putting something inside the box. This will be standard HTML code and is a lot easier than using CSS. I would suggest placing all this text in a different field, place it all in the 'I'd like to meet' section of your edit profile page.

Now that we have a box we are going to add some text to it. Start by using the following code:

Whatever you want to show in the box you made goes here

And it's as simple as that! If you want to totally customize your Myspace just increase the height and width of your box to cover your entire page, it may take some experimenting to get it completely covered. After that you can either just use that or you can add more boxes! I would recommend adding more boxes so you can move things around easier. Just remember, if you create another box it has to have a higher z-index than the box that is covering your page.