Site hosted by Angelfire.com: Build your free website today!


Home

Images

Hyperlink

Customizing Myspace

About Me
Customizing Your Myspace

First I’d like to recommend for you if your not already to use firefox. It’s a great explorer and is very helpful in finding out how new things you see on other peoples website works.

So you want to totally customize your page?
Well this task can be quite simple if you follow my steps and you’ll learn everything you need to know.

So first you need to start out with a basic code to cover over everything on your page except the ad. Sorry you have to leave that or you can be banned from myspace. So you’ll want to start out with the code below.

The follow code will go into your about me section:

</td></tr></table></td></tr></table></td></tr></table></div>
<style type="text/css">
body {background-color:black; background-image:none;}
td, .text, div, input {color:white !important;}
a {color:silver !important;} img {border:0px;}
table, tr, td {background:transparent; border:0px;}
img, .contactTable { display:none; }
.bbzContainer img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .bbzsc a { visibility:hidden; }
marquee { visibility:visible !important; }

.div0 {
background-color:black; color:white;
border:px solid; border-color:;
width:800px; height:150px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:0px; text-align:left;
visibility:visible;}

.div1 {
background-color:black; color:white;
border:2px solid; border-color:white;
width:150px; height:500px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-475px; margin-top:110px; text-align:center;
visibility:visible;}

.div2 {
background-color:black; color:white;
border:2px solid; border-color:white;
width:770px; height:500px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-310px; margin-top:110px; text-align:center;
visibility:visible; !important}
.bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a, .bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}

.bbzDiv {content:"Overlay Generator beta";}
</style>
<div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>
Then add this part of the code to your who I’d like to meet section: </td></tr></table></td></tr></table></td></tr></table></div>

<div class="bbzContainer">
<div class="div0">
<font size=5>Section Header 1</font>
Regular Text Goes Here
</div>

<div class="div1">
<font size=3>Section Header 2</font>
Regular Text Goes Here
</div>

<div class="div2">
<font size=5>Section Header 3</font>
Regular Text Goes Here
</div>
</div>

<div class="bbzsc"><table><tr><td><table><tr><td><table><tr><td>


</div>

</div>

<div class="bbzsc"><table><tr><td><table><tr><td><table><tr><td>


Now to get down to explaining everything about that code so you can make your spectacular page. First I’ll explain the following code:

</td></tr></table></td></tr></table></td></tr></table></div>

This text you see and you’ll see it about 4 times in the code. This is there to create, close, and hide other codes and things on the page. Do not edit this unless you truly understand it, otherwise your code will not work correctly.

Then there is the following code:

<style type="text/css">
body {background-color:black; background-image:url(“”;}
td, .text, div, input {color:white !important;}
a {color:silver !important;} img {border:0px;}
table, tr, td {background:transparent; border:0px;}
img, .contactTable { display:none; }
.bbzContainer img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .bbzsc a { visibility:hidden; }
marquee { visibility:visible !important; }


The style type is telling the system what type of coding your entering in this case it is text/css. The next line is to identify the overall pages settings. You can change the color of the background by changing where it says black, personal I like to use the html color codes so black would be 000000, then you can add a background image to your page by using a url of the image and entering it between the quotations. The next lines I would just ignore because you don’t really want to change them.

The next part of the code is the following:

.div0 {
background-color:black; text-color:white;
border:3px solid; border-color:silver;
width:800px; height:150px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:0px; text-align:left;
visibility:visible;}


The .div0 { is telling the page what the code following it is for. You can edit the background color to what ever you want. Then it says text-color and that means exactly what it says, what color do you want your text in this section to be. Next line asks what kind of border you want to use and how thick you want the border to be in px. Next is the border-color and its set for being silver. Next line asks how large you want the box to be, so you can edit the width and height to your desire. Where it says overflow:auto that is saying that any text that is on one line and isn’t told to go down to the next line to do that. Otherwise the text would just keep going on outside your box and annoy you and everyone else. Next line where it says position:absolute that means that the box is going to stay where you tell it to, otherwise you can change it to position:fixed and the box will stay in the same spot. So if your srolling down a page the box will still be in the same spot and scroll with you. Then z-index:2 is just a part of the code to help identify it. Next left:50% and top:0% you’ll want to keep the same or when you edit the next line your box will be harder to move where you want it. Next line, margin-left:-400px and margin-top:0px are telling the box where to be on the page. As you can see the margin-left is set at -400 this is telling the box to be 400 px’s from the center of the page, if you changed the px’s to 0 then the box would be in the dead middle of your page. If you take out the – and type any number the higher the number the further right the box will move and when you have the – the higher the number the further left the box will move. When your editing the margin-top you’ll want to keep all the px’s in the postitive numbers and when its set at 0 then that means the box is at the top of the page, so the higher the number the lower the box will move. Then you can change what side you want your text to align to you can change this to left, right, or center. You can try top or bottom, but this general doesn’t do anything. Next line, finally where it says visibity:visible;} this tells the page to show the box or hide it. So you can have this set to visible or hidden if you want to hide the box.

The next part of the code you’ll see on the end half of section .div3:

.bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a, .bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}

This part of the code you’ll not want to touch because it is setting up your page.

Now we’ll jump down to the following code because you’ll want to ignore everything before it:

<div class="div0">
<font size=5>Section Header 1</font>
Regular Text Goes Here
</div>


The part where it says
to close the code of that box.

This completes my little lesson on this part of the myspace tutorial website, please check out the rest of the website for more info and feel free to go to my about me section and send me a message on a question you have. I’d be more than happy to answer it for you.
Still looking for more to add to your page, then click the following linkI want more!!