HTML has always plagued me. Why all the funny brackets and number signs? Fear not my fine friend. Here is my tutorial for making your OWN MySpace layouts.
To make a MySpace layout you need three things. (1) A background (2) A Contact Table and (3) a Network banner and that last one can be left blank. If you choose to leave it blank then it will just say [your name is in your extended network]. Nobody knows what this is even for; like an appendix, it seems to serve no purpose but it is fun to spruce up.
To find a background, contact table, and maybe an extended network banner, you will have to look around unless you’re like me and you have collections of them on your hard-drive. But since most of you probably have lives, you should peruse the lovable WWW for some good ones. Two of my favorite sites are www.freecodesource.com and www.myspaceprodesigns.com.
Note: you should try to get the three things in some type of color-scheme or theme. My MySpace (myspace.com/hauntedhyena) is currently purple. I found the background first and then found a nice contact table to match. I chose to leave my extended network banner blank, because I’m a minimalist and also it was late and I was tired.
OK. So now you have your background, a contact table and (maybe) an extended network banner. The contact table and extended network banner each have very small and easy codes that go at the end of your HTML. First we have to do the basic (main) part of the layout itself and fill in all the blanks. Here is the basic HTML:
.bbzs1 {content:”Body Properties”;}
body {
background-color:000000;
background-image:url(‘URL_OF_BACKGROUND_PIC’);
background-repeat:repeat;
background-attachment:fixed;
scrollbar-arrow-color:000000;
scrollbar-track-color:000000;
scrollbar-shadow-color:9F9F9F;
scrollbar-face-color:9F9F9F;
scrollbar-highlight-color:000000;
scrollbar-darkshadow-color:000000;
scrollbar-3dlight-color:9F9F9F;
}
.bbzs2 {content:”Table and Section Properties”;}
table, tr, td {background:transparent; border:0px;}
table table table {background-color:000000;}
table table table {
border-width:?px;
border-color: FFFFFF;
border-style:?;
}
table table table table {border:0px;}
.bbzs3 {content:”Text and Link Properties”;}
input {background-color:ffffff !important;}
td, span, div, input, textarea, a, table td div div font,
div table tr td font {font-family:Tahoma !important;}
td, span, div, input, textarea, table td div div font,div table tr td font {color:9F9F9F !important; font-size:9pt !important;}
.nametext {color:ffffff; font-family:Tahoma; font-size:11pt;} .whitetext12, .lightbluetext8, .orangetext15, .blacktext12 {color:9F9F9F !important;} .blacktext12 span {color:000000 !important;} .redtext, .redbtext, .blacktext10 {color:9F9F9F !important;} .btext {color:ffffff !important; font-size:9pt !important;}
a {color:ffffff !important; font-family:Tahoma !important; font-size:8pt !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
The top part of the HTML deals with the background pic and its properties and then the scrollbar colors. Feel free to leave the scrollbar code out if you just want a plain, non-colored scrollbar but that does look boring. You will need to upload your background pic, contact table, and extended network banner to any one of the numerous free image hosting sites. My personal favorite is www.photobucket.com because it lets you have your own account and keep track of all your pics. However, there are restrictions to the size of images you can upload. For fast non-account image uploading you can try a site like www.tinypic.com. Once you have the three URL’s of your pics, you’re set to fill in the blanks on the HTML.
Where it says URL_OF_BACKGROUND_PIC, paste the URL of your background image. Please make sure you do not remove the half-quotes or the parenthesis from around the URL. Note where it says “repeat”. If you want your image to be tiled, you should leave that as is. If not, change that to “no-repeat” (but without quotes). Then look where it says “fixed”. If you want your background image fixed (this means that it will not scroll when your page is scrolling) then leave that alone. If not, remove it and leave it blank, and your background will scroll by default. Personally, I like a fixed background. It makes the actual page seem like it is apart from the background and gives it a prettier look. But that’s just my opinion.
Next we do the scrollbar. To see some HTML color codes go to http://cedesign.net/colors.htm and click on “The Original Color Chart” up at the top. That is my favorite website for picking out color codes. There are tons of them, all arranged according to hue. Once you’ve found some good colors, replace the HTML in the code as needed. The code for a color is a 6-digit code with letters, numbers, or both. Make sure to put ONLY the code (no # sign like in the old days), and make sure that you DO NOT erase the colon which precedes the color code, or the semi-colon which comes after it. These are both necessary for the HTML to work. The code I have pasted above in bold has default colors of 000000 (black) and 9F9F9F (gray). You will need to erase those codes before putting your own in.
Next we move down to Table and Section Properties. The background color of the table in the above code has been set to black by me, but feel free to change that to any other color code, or if you want it to be transparent, simply write “transparent” (without the quotes) but again, make sure to spell it correctly and do not erase the colon or semi-colons. The border width, color, and style are next. Your border width is simply how thick your borders are. If you do not want any borders, as some people do, then set the number to 0. An average size is around 2 or 3px. The “px” is already there in the above code, so simply replace the question mark with whatever number you wish. Test it out on your page and then change it to a higher or lower number accordingly, based on what you want. Your border color should match, in some way, to your color-scheme. Or not. Go wacky. On my page I made my borders purple. In the above code the border color is set to FFFFFF (white). Erase the F’s and make it a color of your choosing. But again, do NOT erase the colon, or semi-colons. Next we come to Border Style. The border style is important ONLY if you want a border. You can write “solid” or “dotted” or “dashed” — whichever you like the look of best. Try them out one by one, replace the question mark, and make sure you do not erase the colon or semi-colons. (I know I am repeating myself, but the thing with HTML is that these little tiny seemingly unimportant punctuation marks are imperative for your code to work).
Our next section, if you follow along above, is Text and Link Properties. I have set the “font family” to “Tahoma” which is a nice font. Erase where I wrote Tahoma and choose your own font but try to choose a popular and easy to read one so that others can see your page easily. A good way to replace all of my codes with your own codes/words without editing the wrong thing is to use the Find feature in Microsoft Word. If you simply copy and paste the entire HTML into a blank Word document and then press CTRL F, the find feature will appear. You can replace “Tahoma” with, say, “Arial” and then click “Replace ALL” and it will erase everywhere Tahoma is written and replace it with Arial. It is a nice feature for editing HTML when there are a lot of replacements to be made and very neat and seamless editing is necessary. Things that follow, like Font-size and font-weight are self-explanatory. Size should be a readable normal size like I have 9 as the default. Font-weight is “normal” but if you like you can change it to italic or bold. The colors are all the different words and links on your MySpace. You may have to play around with them to find out which is which but once you have it set, you’re done. This sign [!important] is simply an HTML code to keep things from changing automatically. Leave them all in place. Note that “nametext” is the way (font/size/color) that your MySpace display name appears. You may want your name to be bigger than the rest of the writing on your page. So that’s why I have made the NameText 11 when the rest of the text is sized at 9. But feel free to replace those numbers with your own.
Now we come to Contact Table. The code for this is below.
.contactTable {width:300px ; height:150px ; padding:0px
;background-image:url(URL_OF_CONTACTTABLE); background-attachment:scroll;
background-position:center center;background-repeat:no-repeat; background-color:000000;}.contactTable table,
table.contactTable td { padding:0px ;border:0px; background-color:transparent;
background-image:none;}.contactTable a img {visibility:hidden; border:0px ;}.contactTable a {display:block;
height:28px; width:115px;}.contactTable .text {font-size:1px ;}.contactTable .text, .contactTable a, .contactTable img
{filter:none ;}.contactTable .whitetext12 {visibility:hidden;}.bbzV:after { content: “Hybrid Generator”; }
This code is easy. Although there are a lot of things here, change nothing except where it says URL OF CONTACT TABLE. Paste the URL of where you have your Contact Table pic uploaded. Remember not to erase the parenthesis.
Next we have the Extended Network Banner code, which is below:
table table table td {vertical-align:top ! important;} span.blacktext12 { visibility:visible ; background-color:000000;
background-image:url(“URL_OF_NETWORK_BANNER”); background-repeat:no-repeat; background-position:center center; font-size:0px; letter-spacing:-0.5px; width:??px; height:??px; display:block ; } span.blacktext12 img {display:none;}
Here you must change 2 things. The URL of course (leave the quotes and parenthesis alone, and only paste the URL of your banner) and the next thing is important. You must edit the question marks next to where it says width and height. To find the width and height of your banner, simply look at the “dimensions” in the tool-tip when you hover over the picture in Windows. If you can’t do this, then open your pic in MS Paint, and look for the attributes. This is necessary so that the extended network space can fit to the size of your image. Replace the question marks with the correct corresponding numbers. Again, do not erase the colon or semi-colons.
And you are done. Copy and paste each section of code in your ABOUT ME section of your MySpace (remember to erase any existing layout HTML codes first).
Note that the layout I have given you here is very basic. If you want to do fancy things like special hover codes or border codes, visit this website which has excellent codes for cute MySpace extras: http://www.myspace-codes.com.
Once you familarize yourself with what every part of the HTML code does, you realize that 90% of the code doesn’t get changed. Just little numbers and letters here and there. Save a “default” layout (without any of the codes filled in) as a document or text file on your hard-drive, this way whenever you want to change your layout the next time, you can come back to it and just fill in the blanks. Doing that makes everything a whole lot easier.
