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

8 Pages V   1 2 3 > »   
Reply to this topicStart new topic
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
 
*My Cinderella.*
post Aug 29 2006, 10:56 AM
Post #2





Guest






If I wanted to just change the font and size of my text and links, could I just take these portions from the list?

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:;}


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:;}


Would it still work without the rest of it?
 
GREASEbaby
post Aug 29 2006, 08:21 PM
Post #3


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

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



Like just using one of those codes at a time? Sure, just be sure to use style tags.

Or if you only want one of the properties, or two or three, etc. They can be used by itself, is what I'm getting at.
 
mary45
post Aug 30 2006, 09:55 PM
Post #4


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?
 
GREASEbaby
post Aug 30 2006, 11:56 PM
Post #5


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

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



The comments should already be thin. It's probably one of your comments that's stretching out the table.
 
freeflow
post Aug 31 2006, 12:04 AM
Post #6


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270



QUOTE(luvlylayouts @ Aug 30 2006, 7:55 PM) *
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?

http://www.createblog.com/scripts/download.php?id=198

That it does them all.Including your comments table. happy.gif
 
mary45
post Aug 31 2006, 01:00 AM
Post #7


kristen
**

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



oOoh! thanks toya, _smile.gif

the code in the tutorial hadnt worked in FF for me only Ie whistling.gif
 
ZOMBIE.
post Sep 2 2006, 02:30 PM
Post #8


Cassie™
****

Group: Member
Posts: 143
Joined: Aug 2006
Member No: 459,516



Thanks for the tutorial Janette. throb.gif
 
GREASEbaby
post Sep 4 2006, 10:59 PM
Post #9


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

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



No problem :]

And luvlylayouts, what exactly isn't working for you? Will you post your coding?
 
freeflow
post Sep 4 2006, 11:05 PM
Post #10


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270



^ I think she meant the code you posted for tiny tables only worked in one of the browsers.
 
GREASEbaby
post Sep 4 2006, 11:17 PM
Post #11


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

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



Ahh. Weirdd. I don't know, it seems to work fine for me. rolleyes.gif
 
xbellaxbellax
post Sep 8 2006, 06:34 PM
Post #12


Senior Member
****

Group: Member
Posts: 115
Joined: Aug 2006
Member No: 456,141



ahh thankss so much !!
like this is the best tutorial ne one ever gave lol bc those codes all messed with my head bc i make layouts and it was so confusing !! =]
 
GREASEbaby
post Sep 9 2006, 05:03 PM
Post #13


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

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



I'm glad it helps, really. throb.gif happy.gif
 
xCUR1OUS
post Sep 9 2006, 10:42 PM
Post #14


=]
****

Group: Member
Posts: 100
Joined: Aug 2005
Member No: 202,045



this was really helpful!
but there isn't an explanation for "btext" ?

thanksss.
 
freeflow
post Sep 9 2006, 11:59 PM
Post #15


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270



Btext is usually used for REDBTEXT not just btext.
It edits the has # friends.
 
xCUR1OUS
post Sep 10 2006, 12:07 AM
Post #16


=]
****

Group: Member
Posts: 100
Joined: Aug 2005
Member No: 202,045



.btext {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}


then what's that [in red]? is that just like the same as redbtext?
 
adrivar
post Sep 10 2006, 12:07 AM
Post #17


Newbie
*

Group: Member
Posts: 1
Joined: Sep 2006
Member No: 462,656



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?
 
*Azarel*
post Sep 10 2006, 12:11 AM
Post #18





Guest






QUOTE(adrivar @ Sep 9 2006, 10:07 PM) *
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?
Have you tried this script?

http://www.createblog.com/scripts/download.php?id=374
 
freeflow
post Sep 10 2006, 12:12 AM
Post #19


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270



QUOTE(xCUR1OUS @ Sep 9 2006, 10:07 PM) *
.btext {font-family:; font-size:; color:; background-color:;text-transform:; text-decoration:; font-weight:;}
then what's that [in red]? is that just like the same as redbtext?

It edits the same coding that rebbtext does, the part that says :
"has # friends"

The main post is wrong, I'll go edit and fix it.

QUOTE
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?

You don't need all these codes unless your trying to customize it. If you just want you friends and comments skinnier (along w/ the other tables) check scripts.
 
*Azarel*
post Sep 10 2006, 12:14 AM
Post #20





Guest






QUOTE(toyo loco @ Sep 9 2006, 10:12 PM) *
It edits the same coding that rebbtext does, the part that says :
"has # friends"

The main post is wrong, I'll go edit and fix it.
Actually, I think .btext customizes the bolded text in the blog area (if my memory isn't failing me). I can't be bothered to actually go check right now, though, since I'm not at home and this resolution & monitor size makes me lazy. >_>;
 
freeflow
post Sep 10 2006, 12:16 AM
Post #21


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270



Your right. It edits:
name's latest blog entry and the has # friends. Except it doesn't edit the number.
 
myspace_addict
post Sep 10 2006, 06:45 PM
Post #22


Newbie
*

Group: Member
Posts: 5
Joined: Sep 2006
Member No: 463,313



I used this code and did everything and everything works except the background won't show up? do u know why?
 
freeflow
post Sep 10 2006, 06:53 PM
Post #23


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270



^ Post the background part of the code.
 
myspace_addict
post Sep 11 2006, 02:48 PM
Post #24


Newbie
*

Group: Member
Posts: 5
Joined: Sep 2006
Member No: 463,313



^I did post the background part and put in the url and everything. i put everything in the background just won't show up. But all the fonts and everything work. cry.gif
 
flaymzofice
post Sep 11 2006, 02:53 PM
Post #25


Senior Member
*****

Group: Member
Posts: 547
Joined: Dec 2005
Member No: 337,439



I think toyo loco meant post your actual code, here, at CB, so they can take a look at what you've actually put into your coding.
 

8 Pages V   1 2 3 > » 
Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members: