Making a Default Layout, Step by step Options

[*digitalfragrance*]

Do you have or know any tutorials in editing the default layout code to make it into a different style?
Because my friend makes default layouts and she has styled them and its just a little box with the picture and some writing and im like Thanks

Does it look at all like a default layout? What you describe sounds more like a DIV.

[kirraLEE]

is it possible to put writing underneith a friend and comments scroll box?
if thats possible, how?

[*Insurmountable*]

^You can make a div overlay and position it where ever you would like:

CODE

<div class="content" style="position: absolute; left:000px;  top:000px; width:000px; height:000px; overflow: auto;"><center>
CONTENT FOR DIV.
</div>

Change the width and height for how large you want the space, change the top and left to position.

To help a little more you can try looking through here:
http://www.createblog.com/forums/index.php?showtopic=142922
or here:
http://www.createblog.com/forums/index.php?showtopic=97397

[indemand]

nice.. i have been looking for one of these for a long time.. thanks.!!

[ravioli123lola]

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.

is there a way to mess with the "displaying 1 out of 0 comments" area??

[oloveshack]

great tutorial but how do I remove the gray bar that appears at the bottom of my layout? I've tried everything. thx.

[oloveshack]

will someone please tell me how to remove this?
thanks.
just click the thumbnail to enlarge

[JCLore]

what do each of these links do??

a:
a.man:
a.text:
a.redlink:
a.navbar:

i'd like to change each one individually

[candysoo18]

what do i do if i only want a skinny table for my friends and comments?.....do i put the same code down and where?

This is really tricky..usually you can post it on the comments page of your friends but for easy accessing what i do is that i go to the site called ugotbling.com. they have these tools where you can post the codes on about me page. It would work instantly...It's called customizer (http://www.ugotbling.com/customizer.php)


They also have this new holiday comment where friends can send you virtual gifts...(http://www.ugotbling.com/exclusives.php)

Hope it works for you..


below is what it looks like.

[tikichan]

Ok, I was wondering how can I make my layout like these ones:
http://www.createblog.com/layouts/code.php?id=23815
http://www.createblog.com/layouts/code.php?id=23215
http://www.createblog.com/layouts/code.php?id=22785

and not like this:
http://www.createblog.com/layouts/code.php?id=23828

It's hard to explain exactly what I'm trying to say and do. You see on the second layout the tables are individual? Like there is the "About me/ who I'd like to meet" and the Interests table, etc. Where as on the first layout example there isn't the distinct borders but really only one border around it all. Also on the second one, inbetween the tables you can see the backgrounds, where as in the first one you can't. This is probably very confusing. I'm hoping that this makes some kind of sense, sense enough for someone to help me.

Thanks.

[staryxnightx3]

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>

where do you put this code? at the beggining? becuase i get all the other stuff but i dont have a clue where to put this code to make is skinny. plese help1

[xxbreanaxx]

hey! this worked out perfectly for me! just one thing is the blacktext10 and blacktext12 you said what they are but u switched them. blacktext10-date on comments!
blacktext12-extended network text!
you put them the opposite. and one last thing....what is btext??

thank you so much
breana!

[Oooft-Crazy]

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.

I Really Want To Start Making Layout But All This Stif Confuses Me :(

[SharperMyspace]

I think this title is misleading. To me, a "default" layout is one where the tables are connected, and it resembes the structure of the myspace default layout. Lots of layouts sites also refer to that kind as a default.

But the kind in the tutorial is what most people think of as a standard layout...

but whatever...

[maynhia]

i don't get it...
i been doing it ove and over again with the same code u put up..
but it didn't work...
and i put all the thing i need in there too...

[letsgoxdisco]

i know this is stupid, but i have never been able to understand.
on the code part for the skinny tables, do i have to put anything there, or do i just place it in the style sheets?
i hope someone will help me!

[Rainbow-Pop]

hey thanks a bunch for the help im thinking about making a layout site for myspace so thanks lots

[Whimsicalness]

I got the first part of the codes right, but i cant figure out the font part. Help please?

[Friend14]

How can I add more number of friends into my myspace id.
I need to add around 1000 friends.

[Friend14]

How can I add more number of friends into my myspace id.
I need to add around 1000 friends.

[heyo-captain-jac...]

This is so much more complex than it needs to be. All that has to be done is to build a normal layout and add tr {background-color:ffffff;}.

[TwitchMorrison]

this is my first time here and this isnt helping at all

[TwitchMorrison]

I think this title is misleading. To me, a "default" layout is one where the tables are connected, and it resembes the structure of the myspace default layout. Lots of layouts sites also refer to that kind as a default.

But the kind in the tutorial is what most people think of as a standard layout...

but whatever...

do u know how to make the actual default layout the one u said
because thats what i need help on

[Twiceonsundays]

Thsnk you, for this tutorial, it really helped me :D

[musicloverrx13]

Okay, can you put an extended network banner in with that, because everytime I try; it doesn't show up...
Do you have to edit something to put it in there?