This is a tutorial that will help you understand just how myspace layouts are made. Once you understand you will be able to make your own custom myspace layouts by code to get exactly what you want.
Your Network Banner:
Now you can edit the height and width of it (width:430; height:200px;) and you can change the banner url ("BANNER URL GOES HERE") that's if you have an image you would like to use as a banner, if you don't then don't use the code below. Don't edit anything else!
<style type="text/css">
.blacktext12 {
visibility:visible;background-color:transparent;
background-image:url("BANNER URL GOES HERE");
background-repeat:no-repeat;
font-size:0px!important; letter-spacing:-0.5px!important;
width:430; height:200px; display:block; filter: none; cellpadding:0; }
span.blacktext12 img {display:none;}
</style>
Your Scrollbar & Background:
Below is just a basic black and white scrollbar, you can edit the colors as you go along. You can get simple color codes by going online and searching color chart. Your background should go (BACKGROUND URL HERE). Place the background there and don't edit anything else.
<style type="text/css">
body {
scrollbar-face-color:000000;
scrollbar-shadow-color:ffffff;
scrollbar-highlight-color:ffffff;
scrollbar-3dlight-color:ffffff;
scrollbar-darkshadow-color:ffffff;
scrollbar-track-color:ffffff;
scrollbar-arrow-color:000000;
background-image: url(BACKGROUND URL HERE);
background-attachment:fixed; background-repeat:repeat; background-color:FFFFFF;
}
Your Borders:
Ok, now see under all the tables it says, border style, border width etc... well the border we're talking about is one that's around all of your layout, around your about me sections, friends etc. Plus it's also your content background color. So all you need to change it the border color and background color. Or you can change border style from solid, to dashed. Again, don't edit anything else. Now below that part is says, td.text etc.. and then it gets to { border-color:ffffff; border-style:solid;}, that's the border that surrounds your friends pictures. So you can change the color code to whatever you want. so border-color:ffffff can be changed.
table, tr, td { background-color:transparent; border:none; border-width:0;}
table table { border: 0px }
table table table table{border:0px}
table table table {
border-style:solid;
border-width:1px;
border-color:000000;
background-color:ffffff;
}
td.text td.text a img { border-color:ffffff; border-style:solid;}
img { opacity:1;filter:alpha(opacity=100) }
a:hover img { filter:Fliph}
Your Fonts:
Now your fonts are important because they define all your writing on your myspace! So I have each section seperated so you can see how it works. So first I'll explain, your "font" category is your writing, just plain old writing text. Your ".text" is also your font so you wanna usually keep them the same color. Your strong text is the color you want for strong text (like where it shows your url of myspace). ".btext" is your bold text, like this. Also keep in mind with your bold text and strong text. Redtext is your friend count and comment count number. You ONLY have to change the color codes (000000) of everything, don't edit the code.
table, tr, td, li, p, div, a, p
{ font-family:arial; font-size:11; color:000000; text-transform: normal; line-height: 13px; }
font
{ font-family:arial; font-size:11; color:000000; }
.text
{ font-family:arial; font-size:11; color:000000; text-transform: normal; line-height: 13px; }
strong
{ font-family:arial; font-size:11; letter-spacing: 0pt;
color:000000; text-align:right; text-transform: lowercase;
line-height: 10px; font-weight:bold; background-color:zzzzzz;
border: 0px solid; border-color: ffffff; padding:2px;}
.btext
{ font-family:arial; font-size:11; letter-spacing: 0pt;
color:000000; text-transform: none; line-height: 10px;
font-weight:bold; background-color:zzzzzz;
border:0px solid ffffff; padding:2px;}
.redtext, .redbtext
{ font-family:arial; font-size:11; letter-spacing: 0pt;
color:000000; text-transform: none; line-height: 10px; font-weight:bold; padding:2px;}
Nametext:
Your nametext is your display name. The part right about your main picture on myspace. You can fool around with this code to get it the way you like it. Ex: the font type, color, size, etc..
.nametext
{ font-family:arial; font-size:21; letter-spacing: -1pt; color:ffffff;
text-transform: lowercase; text-align:center; line-height: 10px; font-weight:bold;
background-color:zzzzzz; border-bottom: 1px solid; border-bottom-color:000000;
display:block; padding:2px; }
Black Text:
This is your banner text so if you DONT have a network banner you can add and edit this the same way as above.
.blacktext12
{ font-family:arial; font-size:11; letter-spacing: 0pt; color:F01D97;
text-transform: lowercase; line-height: 10px; font-weight:bold; background-color:340B05;
border: 1px solid; border-color: F01D97; display:block; padding:2px;}
Books, Heroes, Orientation, Here for, etc.. Text:
Same idea with the editing as above. Blacktext 10 is the time and date on your COMMENTS and light blue text is the text for your details and interests (movies, heroes, here for, etc.)
.lightbluetext8
{ font-family:arial; font-size:11; letter-spacing: 0pt; color:9D6059; text-align:right;
text-transform: lowercase; line-height: 10px; font-weight:bold; background-color:F01D97;
border: 1px solid; border-color: 9D6059; display:block; padding:2px;}
.blacktext10
{ font-family:arial; font-size:11; letter-spacing: 0pt;
color:F01D97; text-transform: none; line-height: 14px; font-weight:bold; background-color:zzzzzz;
border:0px solid CE8FE3; display:block; padding:2px;}
About me, Who I'd like to meet, Etc..:
Same idea with the editing as above. White text is the text on the left column etc (contacting, details title) and orangetext is about me and who id like to meet titles.
.whitetext12
{ font-family:arial; font-size:21; letter-spacing: -1pt; color:F01D97;
text-transform: lowercase; text-align:left; line-height: 10px; font-weight:bold;
background-color:340B05; border: 1px solid; border-color: F01D97; display:block; padding:2px; }
.orangetext15
{ font-family:arial; font-size:21; letter-spacing: -1pt; color:F01D97;
text-transform: lowercase; text-align:left; line-height: 10px; font-weight:bold;
background-color:340B05; border: 1px solid; border-color: F01D97; display:block; padding:2px; }
Links:
Ok so these are your links, your regular set of links are at the top, that's just for regular links on your myspace you can edit the color and size etc.. of those. The redlinks are your "view all xx friends" and "view all comments". So you can edit it all to your likings.
a:active, a:visited, a:link
{ text-decoration:none; font-family:arial; font-size:11; text-transform: none; color:F01D97; }
a:hover
{ text-decoration:none; font-family:arial; font-size:11; text-transform: none; color:9D6059; }
a.redlink:active, a.redlink:visited, a.redlink:link
{ text-decoration:none; font-family:arial; font-size:11; text-transform: none; color:F01D97; }
a.redlink:hover
{ text-decoration:none; font-family:arial; font-size:11; text-transform: none; color:9D6059; }
</style>
Your Contact Table:
Last part! The only thing you edit on your contact table is the size and image. (width:300px; height:160px;) & (CONTACT TABLE IMAGE HERE). Don't edit the rest of the coding. Simple eh?
<style type="text/css">
.contactTable {
width:300px; height:160px; padding:0px;
background-image:url(CONTACT TABLE IMAGE HERE);
background-attachment:scroll; background-position:justify justify;
background-repeat:no-repeat; background-color:zzzzzz;}
.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:118px;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none;}
.contactTable .whitetext12 {display:none;}
</style>
Okay so we just went through everything that goes to making a custom coded myspace layout! So if you would like the code in full so you can take it and edit it yourself and start figuring things out right on myspace to see how it looks, copy the whole code below! Hope this helped you out.
