Log In · Register

 

Help Topic Rules and Requirements


For a list of all requirements and guidelines pertaining to posting a new Help topic, please click here.

This Month's Contests | Hosts Looking for Hostees | Hostees looking for Hosts | Big Book of Resources

Submission Guidelines

Making a Default Layout, Step by step
GREASEbaby
post Jul 26 2006, 12:45 AM
Post #1


What's my name? Janette. and ily. <3
******

Group: Member
Posts: 2,139
Joined: Apr 2006
Member No: 391,911



For Myspace 2.0:
QUOTE(anzbex @ Nov 23 2008, 02:32 AM) *
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 _smile.gif

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
 
 
Start new topic
Replies
mary45
post Aug 30 2006, 09:55 PM
Post #2


kristen
**

Group: Member
Posts: 23
Joined: Aug 2006
Member No: 449,121



hmm... good tutorial but the code for thin tables only makes my about me, blog, and extended network sections thin, is there a code you add to that to make the comments thin as well?
 

Posts in this topic
I own yourr face.   Making a Default Layout   Jul 26 2006, 12:45 AM
My Cinderella.   If I wanted to just change the font and size of my...   Aug 29 2006, 10:56 AM
GREASEbaby   Like just using one of those codes at a time? Sure...   Aug 29 2006, 08:21 PM
luvlylayouts   hmm... good tutorial but the code for thin tables...   Aug 30 2006, 09:55 PM
toyo loco   QUOTE(luvlylayouts @ Aug 30 2006, 7:55 PM...   Aug 31 2006, 12:04 AM
GREASEbaby   The comments should already be thin. It's prob...   Aug 30 2006, 11:56 PM
luvlylayouts   oOoh! thanks toya, the code in the tutorial...   Aug 31 2006, 01:00 AM
ZOMBIE.   Thanks for the tutorial Janette.   Sep 2 2006, 02:30 PM
GREASEbaby   No problem :] And luvlylayouts, what exactly isn...   Sep 4 2006, 10:59 PM
toyo loco   ^ I think she meant the code you posted for tiny t...   Sep 4 2006, 11:05 PM
GREASEbaby   Ahh. Weirdd. I don't know, it seems to work fi...   Sep 4 2006, 11:17 PM
jessiicaa   ahh thankss so much !! like this is the b...   Sep 8 2006, 06:34 PM
GREASEbaby   I'm glad it helps, really.   Sep 9 2006, 05:03 PM
xCUR1OUS   this was really helpful! but there isn't a...   Sep 9 2006, 10:42 PM
toyo loco   Btext is usually used for REDBTEXT not just btext....   Sep 9 2006, 11:59 PM
xCUR1OUS   .btext {font-family:; font-size:; color:; backgrou...   Sep 10 2006, 12:07 AM
toyo loco   QUOTE(xCUR1OUS @ Sep 9 2006, 10:07 PM) .b...   Sep 10 2006, 12:12 AM
Azarel   QUOTE(toyo loco @ Sep 9 2006, 10:12 PM) I...   Sep 10 2006, 12:14 AM
adrivar   what do i do if i only want a skinny table for my ...   Sep 10 2006, 12:07 AM
Azarel   QUOTE(adrivar @ Sep 9 2006, 10:07 PM) wha...   Sep 10 2006, 12:11 AM
toyo loco   Your right. It edits: name's latest blog entry...   Sep 10 2006, 12:16 AM
_addicted_   I used this code and did everything and everything...   Sep 10 2006, 06:45 PM
toyo loco   ^ Post the background part of the code.   Sep 10 2006, 06:53 PM
~* MiRaNdA*~   QUOTE(toyo loco @ Sep 11 2006, 10:53 AM) ...   Dec 12 2006, 08:20 PM
_addicted_   ^I did post the background part and put in the url...   Sep 11 2006, 02:48 PM
flaymzofice   I think toyo loco meant post your actual code, her...   Sep 11 2006, 02:53 PM
_addicted_   ^ooo gotcha body { background-color: ffffff; ba...   Sep 11 2006, 03:26 PM
GREASEbaby   Wait, I'm thinking you want to change your fon...   Sep 11 2006, 06:48 PM
_addicted_   no, it's not the font i'm having the troub...   Sep 11 2006, 08:47 PM
This Confession   ^change your background properties to this instead...   Sep 11 2006, 08:49 PM
toyo loco   ^ W/o the style tags, thats already part of a full...   Sep 13 2006, 09:32 AM
_addicted_   ok thank you so much!   Sep 13 2006, 07:23 PM
i HEART MY BOYFRiENDxoxo   This is uber helpful, but how do I center the mysp...   Oct 19 2006, 06:25 AM
Infinite.   ^Seems like many are having this problem, can I ha...   Oct 19 2006, 03:34 PM
jessiica   yeah im having the same problem as addicted... i h...   Nov 11 2006, 08:37 PM
Infinite.   For background properties use this: CODE<styl...   Nov 11 2006, 10:50 PM
jessiica   ughh it still doesnt work.... i think i have sumth...   Nov 12 2006, 09:37 AM
Disgraceful_misconceptions   I tried to use the bg code and put no repeat and t...   Nov 23 2006, 02:37 PM
toyo loco   ^ Post the code to the background part only.   Nov 23 2006, 03:26 PM
dork_love   awesome hehe thanks for this tutorial im gonna try...   Nov 25 2006, 08:57 PM
snuffles   i have a question...how do you get a screenshot???   Nov 26 2006, 03:33 PM
toyo loco   ^ Post a topic next time or search. http://www.cr...   Nov 26 2006, 04:59 PM
i love fall out boy   this is kinda confusing   Dec 10 2006, 09:55 PM
StanleyThePanda   ^ What part is confusing you?   Dec 11 2006, 01:28 PM
toyo loco   ^ Change: body{background-image:url('http://la...   Dec 13 2006, 01:13 AM
~* MiRaNdA*~   reason for quoting is... i dun no how to use this ...   Dec 13 2006, 06:38 PM
~* MiRaNdA*~   QUOTE(toyo loco @ Sep 11 2006, 10:53 AM) ...   Dec 13 2006, 02:10 AM
toyo loco   I'm lost your quoting something rather old. Di...   Dec 13 2006, 09:45 AM
Intercourse   ^What program?   Dec 28 2006, 01:13 AM
Intercourse   ^I'll help you, whats your problem? Did you ...   Jan 13 2007, 11:16 PM
Heath21   Wow, html and all that stuff is confusing as hell   Jan 17 2007, 05:29 PM
Intercourse.   ^Ah its not to hard once you get use to it If you...   Jan 18 2007, 02:25 AM
Hamx3   so... if i just copy the codes and edit the codes....   Jan 24 2007, 11:22 PM
Intercourse.   ^yep, pretty much   Jan 25 2007, 03:03 AM
natalieferrol   i have two problems if anyone can solve them 1. i...   Jan 27 2007, 04:18 PM
Intercourse.   ^screenshot please then   Feb 2 2007, 08:25 PM
Candy-addict   Is there a code I can insert to change the line he...   Feb 3 2007, 11:48 PM
toyo loco   QUOTE(Candy-addict @ Feb 3 2007, 8:4...   Feb 3 2007, 11:58 PM
Candy-addict   QUOTE(toyo loco @ Feb 3 2007, 10:58 PM) ...   Feb 4 2007, 12:01 AM
hannahbanana1111   omg someone help me, i really need help!   Feb 4 2007, 12:06 AM
Candy-addict   QUOTE(hannahbanana1111 @ Feb 3 2007, 11:0...   Feb 4 2007, 12:11 AM
toyo loco   QUOTE(Candy-addict @ Feb 3 2007, 9:0...   Feb 4 2007, 12:42 AM
kyns   just out of curiousity and whatnots. is there a wa...   Feb 5 2007, 10:14 PM
Intercourse.   ^If you put some of your links in the top of your ...   Feb 6 2007, 11:40 PM
thecolorofromance   How would i put an image pattern in the tables? pl...   Feb 25 2007, 02:07 AM
toyo loco   ^CODEtable table table {border: 1px solid; bor...   Feb 25 2007, 11:17 AM
Tirral   Hello, i was wondering if somebody could help me. ...   Feb 25 2007, 11:17 AM
toyo loco   ^ Stop posting this all over the place. Read the F...   Feb 25 2007, 11:33 AM
DiscotechhTaylor   Most helpfullest tutorial everr :) i've been t...   Mar 3 2007, 03:18 PM
colorfulbee   CODE<style> body { background-color...   Mar 17 2007, 12:16 PM
Intercourse.   ^Whats your problem? Or do you even have a problem...   Mar 17 2007, 04:02 PM
momo way   ok i keep trying but my layouts dont come out rght...   Mar 17 2007, 09:57 PM
toyo loco   QUOTE(momo way @ Mar 17 2007, 7:57 PM) ok...   Mar 24 2007, 01:37 AM
Pac.Man   My image isn't showing up, any help?   Mar 19 2007, 05:41 PM
Intercourse.   ^ myspace link? and can we have a link to your ima...   Mar 20 2007, 03:46 PM
hii   umm is there a way to have two images in one? lik...   Mar 28 2007, 07:51 PM
toyo loco   ^Image rollovers. Check scripts.   Mar 28 2007, 07:59 PM
hii   hmm okey thnak you :] QUOTE(toyo loco @ Mar ...   Mar 28 2007, 08:13 PM
toyo loco   As I already said its image rollovers. http://www....   Mar 28 2007, 08:15 PM
stephhy :)   k, so how do you actually make a "default...   Mar 29 2007, 03:14 PM
digital.fragrance   ^ Follow this tutorial step-by-step. You aren...   Mar 29 2007, 03:29 PM
hii   is there a code to remove the ad space above ur pr...   Apr 1 2007, 03:15 PM
toyo loco   ^ We do not support ad removal.   Apr 1 2007, 03:59 PM
hii   oh okey :] nvmt lol   Apr 1 2007, 05:19 PM
UHH   does anyone have the code to hide the orange text?...   Apr 2 2007, 06:50 PM
ladycrusader #14   CODE<style>.orangetext15{display:none;...   Apr 7 2007, 05:04 PM
chloe_rawr_xD   ah! You're a life saver! This helps s...   Apr 23 2007, 09:05 PM
hii   is there a code to change the background color of ...   May 11 2007, 11:04 AM
toyo loco   QUOTE(hii @ May 11 2007, 9:04 AM) is ther...   May 12 2007, 04:58 PM
hii   mmhmm :3   May 14 2007, 09:32 PM
miszxjojo   CODEfont, body, table, td, div, h1, h2, br, a, p {...   May 25 2007, 08:21 AM
freeflow   Don't replace anything. For font family add th...   May 26 2007, 12:26 AM
miszxjojo   haha, thanksss<3 i would've never figured i...   May 28 2007, 12:56 PM
liverysnap   very nice and thurough   May 31 2007, 12:40 PM
heatherliis   Is there anyway to move your headline quote around...   Jun 18 2007, 01:37 PM
jay-f-baybe   that creates a regular layout do you know how to m...   Jun 19 2007, 06:19 PM
fcukxl0ve   name goes here's Latest Blog Entry name goes h...   Jun 20 2007, 07:27 PM
fcukxl0ve   uhm the one like four pages back..i just changed t...   Jun 20 2007, 09:59 PM
xbellaxbellax   im having some trouble with the bottom links. it s...   Jun 22 2007, 05:44 PM
karmakiller   ^ Would you mind sharing your link?   Jun 22 2007, 06:38 PM
2 Pages V   1 2 >


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: