azn_cutie37
03-25-2007, 03:20 AM
Ok I've seen lots of layout sites on myspace and want to start one myself. The big problem is I only know how to do the basic codes. are there any websites that has a tutorial?? or can anyone show me how? thanx!!:)
Oh I want to make the regular myspace layouts not DIV
amygirl2992
04-01-2007, 05:28 PM
okay, you need to know basic css. (lissa has a beautiful css tutorial: http://www.lissaexplains.com/css.shtml )
for colors: http://www.december.com/html/spec/color.html
for fonts: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
other css: http://www.w3schools.com/css/css_text.asp
and you need to know the attributes.
you can leave out whatever you want to. you can experiment.
everything in [brackets] are just tips and pointers, and can be deleted
you can experiment with a generator
here: http://www.mygen.co.uk/
or here: http://www.freecodesource.com/
have fun.
<style type="text/css">
[ this is what is for the background ]
body {
background-color: [color];
background-image: url('PICTUREURL.JPG');
background-attachment: fixed/scroll;
background-position: center center/top left/bottom right/[you can guess the rest];
background-repeat: repeat/x-repeat/y-repeat/no-repeat;
}
[ and this is for the tables ]
table table {border: 0px} [<- don't change this unless you know what you are doing]
table table table table {border:0px} [<- don't change this unless you know what you are doing]
table, tr, td {background-color:transparent; border:none; border-width:0;} [<- don't change this unless you know what you are doing]
table table table {
border-style: dotted;
border-width: [any number, this will be in pixels];
border-color: [color];
background-color: [color];
}
table table table table td {filter:none;}
table table table table {border:0px;}
td.text table, td.text table td {width:300px; padding:0px;}
td.text table table table table, td.text table table table table td {width:0px;}
table table td {width:10px;}
div table table td, table table table td {width:auto;}
td.text td.text table table div, td.text td.text table table a img {height:60px; width:65px !important; border-width:0px;}
{ this is text }
.text, table, tr, td, li, p, div {
font-family:Trebuchet MS !important;
font-size: [number+px or number+pt, no spaces, eg 10px];
color: [color];
background-color: [color];
font-weight: normal/bold;
text-decoration: none/underline/overline/underline overline;
text-align: left/center/right;
border:;
}
[the following have the same text properties]
.blacktext10 {[date above comments]}
.lightbluetext8 {[Geneal, music, movies, books, heroes, status, here for, etc.]}
.redtext {[(Displaying) ___ (of) __ (comments)]}
.redbtext {[(x has) __ (friends)]}
.btext {[x's lastest blog entry, x has (__) friends]}
.orangetext15 {[x's blurbs, about me, who I'd like to meet, x's friend space, x's friend's comments]}
.nametext {[name above picture]}
.whitetext12 {[contacting x, x's interests, x's details]}
.blacktext12 {[x is in your extended network]}
.text {[headline, gender, age, location, last login]}
{ links }
a.man:link, a.man:active, a.man:visited, a:link, a:active, a:visited, a.text:link, a.text:active, a.text:visited, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.redlink:link, a.redlink:active, a.redlink:visited {[the links]}
a.text:hover, a.searchlinksmall:hover, a.man:hover, a:hover, a.redlink:hover {[links with cursor over it]}
a.navbar:link, a.navbar:active, a.navbar:visited {[navi links]}
a.navbar:hover {[navi with cursor over it]}
</style>