Making a Default Layout, Step by step Options

[GREASEbaby]

For Myspace 2.0:

Just thought i would share this with all. I requested a tutorial in another forum Myspacemarketplace for a myspace 2.0 tutorial & with many many thanks Nora from SKEEDIO kindly set about & wrote a tutorial . Its easy to follow

Myspace 2.0 tutorial by Nora SKEEDIO

Hope this helps some of you out ;)

Making a Layout 101:


Here's how to make a layout. There's a pinned post with stylesheets that you can also use.

Okay, to make a layout, you need to use a stylesheet, or css.


But what exactly is a stylesheet?

A stylesheet is code that tells your web browser (i.e. internet explorer, mozilla firefox, safari) what the page should look like. It has text commands and table commands that tells the browser what color, size, and style should be for whatever you're specifying.


How do I make a stylesheet?

All stylesheets, whether it's myspace, xanga, or just a website, start out with <style> OR <style type="text/css">. Most commonly, the background information is the first to be specified.

CODE

body {
background-color: ######;
background-image: url('URL HERE');
background-attachment:;
background-repeat: repeat;
background-position:;
}

Then, if you want skinny tables, you can add

CODE

TD TD {text-align: center;}
TD TD TD {text-align: center;}
TD TD TD TD {border-top: 0px solid; width: 1%; text-align:left;}
TD TD TD TD TD {border-top: 0px solid black; text-align:right;}
TD TD TD TD TD TD {border: 0px solid;}
TABLE, TD {padding: 0px; text-transform: none; width:350px;}
TABLE TABLE {padding: 0px; text-transform: none;}
TABLE TABLE TABLE {padding: 0px; text-transform: none;height: .01%; width: 100%;}
TABLE TABLE TABLE TABLE {padding: 0px; text-transform: none;}
TABLE TABLE TABLE TABLE TABLE {padding: 0px; text-transform: none;}
TABLE TABLE TABLE TABLE TABLE TABLE {padding: 0px; text-transform: none;}
table td div div font {visibili-ty:hidden;di-splay:none;}
table table table table {border: 0px; text-align: justify; padding: 0px;}
table table table table table {border: 0px; text-align: justify; padding: 0px;}
table table table table table table {border: 0px; text-align: justify; padding: 0px;}

The text properties:

CODE

font, body, table, td, div, h1, h2, br, a, p {font-family:; font-size:; color:; background-color: text-transform:; text-decoration:; font-weight:;}
.orangetext15 {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}
.whitetext12 {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}
.lightbluetext8 {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}
.text {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}
.nametext {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}
.blacktext12 {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}
.blacktext10 {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}
.btext {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}
.redtext {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}
.redbtext {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}

Then the links:

CODE

a:link, a:active, a.man:link, a.text:link, a.redlink:link, a.redlink:active, a.navbar:link, a.navbar:active {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}
a:visited, a.man:visited, a.text:visited, a.redlink:visited, a.navbar:visited {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}
a:hover, a.man:hover, a.text:hover, a.redlink:hover, a.navbar:hover {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}

Uhh, this stylesheet makes absolutely no sense.

Okay, then I can explain it.

Background Color: the color for your background. You can put white, black, or a hex code. A hex code is a six digit code consisting of numbers and letters that makes up a color. For example, ff6666 makes a certain shade of pink, while c0c0c0 is a light grey. There is a good hex chart at http://webmonkey.com/webmonkey/reference/color_codes/.

Background Image: your background image. If you have it already saved onto your computer, go to tinypic.com or imageshack.us to get the URL for your background. Paste it in place of URL HERE.

Background Attachment: Use "scroll" or "fixed" (without the quotation marks). Scroll will move the background along with your tables. Fixed will keep the background steady and only move the tables (recommended)

Background Repeat: use "repeat" or "no-repeat" (still without the quotation marks). no-repeat will only have your background image appear once on your page, while repeat will have it repeated throughout.

Background Position: Mandatory if you have a no-repeat image. If you don't, still position it, but it doesn't really matter.
You can use:
top left
top center
top right
left
center
right
bottom left
bottom center
bottom right


font, body, table, td, div, h1, h2, br, a, p: the basic font on your page.

Font Family: the font of your page. (Arial, Courier, Georgia, Times New Roman, Small Fonts, Century Gothic, Verdana)

Font Size: the size of your font. use px or pt.
For example:

7px (perfect for small fonts)
8px
9px
10px
21px
64318623816318px (hehe)

You can do just about any size, but the most a size can be is 1002 (trust me! hah.)

Color: use hex code. color for the font.
Background Color: use hex code. background of the font. If not needed, just put "none" (without the quotes)
Text Transform: Make all the text uppercase, lowercase, or normal.
Text Decoration: Put underline if you want it that way. If not, just put none.
Font Weight: makes it bold. If you want it bold, put bold. If you don't, put none.
Orangetext15: About Me and Who I'd Like to Meet text
Whitetext12: Interests, Contacting, Details, and Schools text.

Lightbluetext8: General, Music, Movies, Television, Books, Heroes, Status, Here for, Hometown, Ethnicity, Zodiac Sign, Smoke/Drink, Education, and Occupation

Text: Your headline, Age, that stuff.
Blacktext12: Date on comments
Blacktext10: Extended network text.
Redtext: Amount of friends and number
Redbtext: Has # friends and name's latest blog entry.


Hope this helps!<3

edit//
edited skinny code. this one is more fuctional and doesn't mess up your friends/contact table. :]

CODE

<style type="text/css">
b {background-color: a23b66;
     color: cccccc;
     font-family:Georgia;
     font-size:8pt;
     letter-spacing:0pt;
     font-weight:bold; }
i,em{
    background-color: a29ed3;
     color: a23b66;
     font-family:Georgia;
     font-size:8pt;
     letter-spacing:0pt;
     font-weight:normal;  }
u{
     background-color: e18b76;
     color: cccccc;
     font-family:Georgia;
     font-size:8pt;
     letter-spacing:0pt;
     font-weight:normal; }
</style>

This is to edit your underline, bold, and italics text.
B to edit your bold text.
I to edit your italics text.
u to edit your underlined text.


Added by GrrDesign Putting a Banner above your page

CODE

<style type="text/css">
body { margin-top:400px; }
.topban { width:800px; height:400px; position:absolute; top:0; left:50%; margin:0 0 0 -400px; }
</style>
<div class="topban"><img src="IMAGE LINK" /></div>

similar, to put a banner below the myspace advertisement, above your profile:

CODE

<style type="text/css">
body table { margin-top:400px; }
body div table, body table table { margin-top:0; }
.topban { width:800px; height:400px; position:absolute; top:0; left:50%; margin:135px 0 0 -400px; }
</style>
<div class="topban"><img src="IMAGE LINK" /></div>

subsequently, you can put whatever you want within the div. images, text, links, whatever. it's like a div layout sitting above a standard layout.

the rest of that layout is simply made by using images within the already applied tables that myspace provides. (they just removed to contact table and header text and put their own header images and information.)

This post has been edited by karmakiller: Nov 24 2008, 12:00 AM

[deleted-account]

I followed the directions but for the bgColor/bgUrl doesn't show. It's all black. But for other places like the profile space it's all black so when it said "background" color for each text thingies I put black.
Did I do the code wrong?. If so tell me how to fix it.

[tralalax]

i need the code to turn a regular layout into a default layout. i accidentally deleted all my profile codes and i typed in the link, text, & hide codes but its all transparent. help? :D heres my coding:

CODE

<style type="text/css">
{TABLE FORMATTING CODES. do not edit.}
body {padding-bottom: 0px; text-align:center;} background-image: url(); }
.profileinfo a img {width:auto; height:150px;}
table, td, tr {padding: 0px;}
.friendsComments{display:none;}
img{border:0px!important;}
.profileinfo, .contacttable, .interestsanddetails {width:300px;}
table {width: 670px; background-color:transparent;}
tr {background-color:ffffff;}
table.friendspace tr td table tr td img
{width:auto; height:70px; !important;}
.navigationbar tr td{font-size:0px;}
.navigationBar, .navigationbar td { text-align:center; word-spacing: -2px; width:auto;height:10px;}
.navigationBar table {
width: 670px; height:10px; border:0px solid black; padding-left: 5px; background-color:;}
.navigationBar, .navigationBar table, .navigationBar td{height:10px; width: 685px;}
table table table {width:100%; background-color:;}
tr td tr td tr td tr td tr td {width: 0px!important;}
.credit{myspace.com/sugardippedadvice}
.contacttable, .interestsanddetails , .profileinfo{width:300px;}
table {width: 670px; background-color:auto;}
table.navigationbar td{font-size:1px; font-color:000000 !important;}
table, td, tr {height: 0px;}
br{line-height:0.5px;}


{TEXTCODES. edit if you want.}
table.text, .text, .lightbluetext8, .blacktext10, .blacktext12, .btext, a:active, a:visited, a:link, font, body, table, td, div, h1, h2, br, a, p {font-size:11px; line-height:10px!important; text-transform:lowercase!important; font-family:verdana;}
.whitetext12 {font-family:;text-transform: lowercase;font-size: 15px;letter-spacing: -2px;text-decoration: none;line-height: 13px;font-weight: bold;}
a:hover {font-family:tahoma; font-size:11px; line-height:10px; text-transform: uppercase !important; letter-spacing:-1px; color:000000; font-weight:bold; text-decoration:none; }
a.navbar:active, a.navbar:visited, a.navbar:link {font-family:;text-transform: lowercase;font-size: 11px;letter-spacing: 0px;text-decoration: none;line-height: 10px;font-weight: normal; color:ffffff;}
.credit{myspace.com/sugardippedadvice;}
.dont remove credit{if you do:jockers list for you;}
a.navbar:hover {font-family: tahoma;text-transform: uppercase;font-size: 11px;letter-spacing: -1px;text-decoration: none;line-height: 10px;font-weight: bold; color:ffffff;}

{HIDING CODES. edit if you want.}
.UserProfileURL {display:none;}
.userProfileDetail {display:none;}
.nametext{display:none;}
.latestBlogEntry {display: none;}
.extendedNetwork{display:none;}
.orangetext15{display:none;}
</style><style>
br{line-height:0.5px;}
td{background-color:transparent;}
</style>

[tralalax]

i need the code to turn a regular layout into a default layout. i accidentally deleted all my profile codes and i typed in the link, text, & hide codes but its all transparent. help? :D heres my coding:

CODE

<style type="text/css">
{TABLE FORMATTING CODES. do not edit.}
body {padding-bottom: 0px; text-align:center;} background-image: url(); }
.profileinfo a img {width:auto; height:150px;}
table, td, tr {padding: 0px;}
.friendsComments{display:none;}
img{border:0px!important;}
.profileinfo, .contacttable, .interestsanddetails {width:300px;}
table {width: 670px; background-color:transparent;}
tr {background-color:ffffff;}
table.friendspace tr td table tr td img
{width:auto; height:70px; !important;}
.navigationbar tr td{font-size:0px;}
.navigationBar, .navigationbar td { text-align:center; word-spacing: -2px; width:auto;height:10px;}
.navigationBar table {
width: 670px; height:10px; border:0px solid black; padding-left: 5px; background-color:;}
.navigationBar, .navigationBar table, .navigationBar td{height:10px; width: 685px;}
table table table {width:100%; background-color:;}
tr td tr td tr td tr td tr td {width: 0px!important;}
.credit{myspace.com/sugardippedadvice}
.contacttable, .interestsanddetails , .profileinfo{width:300px;}
table {width: 670px; background-color:auto;}
table.navigationbar td{font-size:1px; font-color:000000 !important;}
table, td, tr {height: 0px;}
br{line-height:0.5px;}
{TEXTCODES. edit if you want.}
table.text, .text, .lightbluetext8, .blacktext10, .blacktext12, .btext, a:active, a:visited, a:link, font, body, table, td, div, h1, h2, br, a, p {font-size:11px; line-height:10px!important; text-transform:lowercase!important; font-family:verdana;}
.whitetext12 {font-family:;text-transform: lowercase;font-size: 15px;letter-spacing: -2px;text-decoration: none;line-height: 13px;font-weight: bold;}
a:hover {font-family:tahoma; font-size:11px; line-height:10px; text-transform: uppercase !important; letter-spacing:-1px; color:000000; font-weight:bold; text-decoration:none; }
a.navbar:active, a.navbar:visited, a.navbar:link {font-family:;text-transform: lowercase;font-size: 11px;letter-spacing: 0px;text-decoration: none;line-height: 10px;font-weight: normal; color:ffffff;}
.credit{myspace.com/sugardippedadvice;}
.dont remove credit{if you do:jockers list for you;}
a.navbar:hover {font-family: tahoma;text-transform: uppercase;font-size: 11px;letter-spacing: -1px;text-decoration: none;line-height: 10px;font-weight: bold; color:ffffff;}

{HIDING CODES. edit if you want.}
.UserProfileURL {display:none;}
.userProfileDetail {display:none;}
.nametext{display:none;}
.latestBlogEntry {display: none;}
.extendedNetwork{display:none;}
.orangetext15{display:none;}
</style><style>
br{line-height:0.5px;}
td{background-color:transparent;}
</style>

omg wow that was really stupid... nevermind i got it
i put td at the end instead of tr. sry :p

[mypanicdisorder]

Okay this is very helpful but i have just a few questions,

one, is it possible to put pictures in the extended network part and behind the message add links?

two, is it possible to out up borders around the sections?

three, how do i change the color of the links as they are hovered by the mouse?

thanks<3

[beboplayouts08]

how to i just make a regular table with a picture on the contact box and how do i make the background like where your information is a color if i already have a background

[jasonblue]

Please, no advertising - Thomas

[Antonio]

im trying to make a layout but im trying to make the color of the inside of the default a different color like it just stays white and i cant find the code to change the color of it .

the part i colored black is the part im talking about im trying to change the color of it .

Attached File(s)

 kafnla.jpg ( 74.43K ) Number of downloads: 8

 

[iluvpurple25]

thanx for this...i'm barely starting and this will help me a lot

[Pixelerator]

This is very good tutorial ..
But i have various Question ..
How we know the tag name apart from standard one "THE name"
Like .lighttext12 and so on ..
and how we know how many element tag in the myspace document..
I am new please tell me!!

[IceCream4U]

hahaha,people are freakin out cause some of the codes don't work:P
look at the date: Jul 25 2006. thats more than two years ago[x

[Dleedude]

Uhh, i have one little question. is there a way to like.... take the lines of color out? Like... In my opinion the "I'd Like to meet" section is useless. I dont like it, I hate the little orange titles over about me and stuff. But i havent found a code that does this. Basically...

How do i get rid of the orange title bars in About me, and stuff.

Oh, and btw, GREAT tutorial, you teeched meh how to make layouts :O... i looked everywhere too

[schizo]

^ Try this:

CODE

<style>
.blurbs td.text, .orangetext15 {display:none;}
</style>

That should hide the text and the bars.

[LOWERY]

can someone please help me

[schizo]

^We can't help you unless you tell us exactly what you need help with.

[meekers89]

Oookay..
I'm not sure if I'm doing any of this right honestly
So there'll probably be many questions as I go.

As I'm making this,
I'm looking at a lyt previewer.
And when I enter this:

CODE

<style type="text/css">
table, td {background-color:FFFFFF; border:none; border-width:0;}
body {
background-color: ;
background-image: url(http://img.photobucket.com/albums/v610/micah101/BlendBackground.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
background-position:bottom center;
}</style>

The background image appears in the red box shown
for a split second before the page loads



but i'd want the image on the outside of the box.

[Mickey]

Click here for a great tutorial on how to play around with the look of your new 2.0 profile!

[dilligrout]

Oookay..
I'm not sure if I'm doing any of this right honestly
So there'll probably be many questions as I go.

As I'm making this,
I'm looking at a lyt previewer.
And when I enter this:

CODE

<style type="text/css">
table, td {background-color:FFFFFF; border:none; border-width:0;}
body {
background-color: ;
background-image: url(http://img.photobucket.com/albums/v610/micah101/BlendBackground.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
background-position:bottom center;
}</style>

The background image appears in the red box shown
for a split second before the page loads



but i'd want the image on the outside of the box.

The image isn't wide enough to stretch to both sides. Make at least a 500px stretch between the to images. Hope that helps!

But heres the code to make it show up:

CODE

<style>
body {
background-color: FFFFFF;
background-image: url('http://img.photobucket.com/albums/v610/micah101/BlendBackground.jpg');
background-attachment:fixed;
background-repeat: no-repeat;
background-position: bottom-center;
}
</style>

Preview:

click to enlarge

[hackinnathan]

I'm not exactly sure if this has been specified yet, but how do we make the tables black?

[digitalfragrance]

^use this:

CODE

<style>
table table table {background-color: 000000;}
</style>

[hackinnathan]

Thank you!

[blueragedesigns]

TD TD {text-align: center;}
TD TD TD {text-align: center;}
TD TD TD TD {border-top: 0px solid; width: 1%; text-align:left;}
TD TD TD TD TD {border-top: 0px solid black; text-align:right;}
TD TD TD TD TD TD {border: 0px solid;}
TABLE, TD {padding: 0px; text-transform: none; width:350px;}
TABLE TABLE {padding: 0px; text-transform: none;}
TABLE TABLE TABLE {padding: 0px; text-transform: none;height: .01%; width: 100%;}
TABLE TABLE TABLE TABLE {padding: 0px; text-transform: none;}
TABLE TABLE TABLE TABLE TABLE {padding: 0px; text-transform: none;}
TABLE TABLE TABLE TABLE TABLE TABLE {padding: 0px; text-transform: none;}
table td div div font {visibili-ty:hidden;di-splay:none;}
table table table table {border: 0px; text-align: justify; padding: 0px;}
table table table table table {border: 0px; text-align: justify; padding: 0px;}
table table table table table table {border: 0px; text-align: justify; padding: 0px;}

I really don't get it? To me it seems it's just "table" with it properties, repated, but with an extra "table" in front.

[Mickey]

Those properties are there for a reason. Each one edits a certain part of a whole table. MySpace puts lots of tables within tables, y'see.

[blueragedesigns]

So "table table table" means the third table that's inside the second table, which is in the first table. Heh. Okies then.

[Mickey]

Exactly.

[blueragedesigns]

oh. Ah. Explains it I guess. :L