MySpace CSS Templates, 4 main page, 2 blog page Options

[moorepocket]

<span style='font-size:11pt;line-height:100%'>MAIN PAGE CSS (LONG VERSION)</span>

here the myspace css. If you know css, you can manipulate.

It's very easy to use.

There are /* comments */ throughout the css, so you should be able to edit without killing yourself. hehe.

CODE

<style>
{sets the default style for the body, table data, list data, divisions and text areas}
{ body, well you know what that is}
{ div, p, and xmp are classes}
{ table, tr, td, and th are table properties}
body,div,p,xmp,table,tr,td,th{
background-color:000000;
scrollbar-arrow-color:000000;
scrollbar-track-color:000000;
scrollbar-shadow-color:CCFFFF;
scrollbar-face-color:CCFFFF;
scrollbar-highlight-color:CCFFFF;
scrollbar-darkshadow-color:CCFFFF;
scrollbar-3dlight-color:CCFFFF;
font-family:tahoma;
font-size:8pt;
color:CCFFFF;
border:none;}

input, select, textarea, .textfield, .button {
font-family:tahoma;
font-size:8pt;
color:FFFFFF;
border: 1px dashed FFFFFF;
background-color:transparent;
text-align:center;}

{ TEXT DEFAULTS }
{class for the basic font for the page}
.text {
font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;text-align:justify;}

b,i,strong,em,u,s {
font-family:tahoma; font-size:8pt;color:FFFF00;font-weight:normal;cursor:help;}

{style for the number of friends you have.}
.redbtext{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF;border:0px solid FFFFFF; }

{repeat of the style for how many comments you have}
.redbtext{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF; border:0px solid FFFFFF;}

{"Blurbs", "About Me", "Who I’d like to Meet", "Friend Space", and "Friend’s Comments" style}
.orangetext15{font-family:courier new; text-transform:uppercase; font-size:11px; color:FFFF00; font-weight:bold;background:000000; border:0px solid FFFFFF;text-decoration:underline;}

{"General", "Music", "Movies", "Television", "Books", "Heros", "Status", "Here for", "Hometown", "Body Type", "Ethnicity", "Religion", "Sign", "Smoke/Drink", "Children", "Education", "Occupation", and "Income" title style}
.lightbluetext8{font-family:courier new; text-transform:uppercase; font-size:11px; color:FFFF00; font-weight:bold;background:000000;border:0px solid FFFFFF;text-align:right;}

{"In your extended network" style}
.blacktext12{font-family:courier new; font-size:16px; color:FFFF00; font-weight:bold;text-decoration: underline; text-transform:uppercase;}

{"Contacting", "Interests", "Details", and "Schools" title styling}
.whitetext12{font-family:courier new; font-size:16px; color:CCFFFF; font-weight:bold;text-decoration: underline; border:0px solid CCFFFF; text-transform:uppercase;}

{Stylizing of your name above your picture; appears you can’t change the color of your name from here. Suggestions?}
.nametext{font-family:courier new; font-size:16px; color:CCFFFF; font-weight:bold;text-decoration:underline;border:none;text-transform:uppercase;}

{date stamp on comments}
.blacktext10{font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;border:0px solid FFFFFF;}

{This is how all anchor points will be displayed; anchor points appear before all links.}
a, a:link,a:active,a:visited{font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;text-decoration:none}
a:hover{border-bottom:1px dashed FFFFFF; font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF;}

{not used on profile}
a.readmail,a.readmail:link,a.readmail:active,a.readmail:visited{font-family:tahoma; font-size:8pt; line-height:10pt; text-decoration:none;color: CCFFFF;}
a.readmail:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00;border-bottom:1px dashed FFFFFF; }

{ "View all friends" and "invite more" link style}
a.redlink,a.redlink:link,a.redlink:active,a.redlink:visited{font-family:tahoma; font-size:8pt;font-weight:bold;color:FFFFFF;text-decoration:none}
a.redlink:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00;border-bottom:1px dashed FFFFFF;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar,a.navbar:link,a.navbar:active,a.navbar:visited{font-family:tahoma; font-size:8pt;color:FFFFFF;text-decoration:none}
a.navbar:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00; border-bottom:1px dashed FFFFFF;}

{ TEXT FORMATTING
DEFAULT FONT, SIZE 8, BLACK }
{ btext used for "latest blog entry" and "USERNAME has * friends"}
.btext, .itext{font-family:tahoma;  font-size:8pt; line-height:10pt; color:FFFF00;border:0px solid FFFFFF;}

{ DEFAULT FONT, SIZE 8, COLORS }
{unused on profile}
.bwtext, .rtext, .rbtext, .subhead{font-family:tahoma; color:FFFF00;font-size:8pt;font-weight:bold;}

{ DEFAULT FONT, SIZE 8 }
{unused on profile}
.stext, .sbtext, .swtext{font-family:tahoma; color:FFFF00;font-size:8pt;}

{ DEFAULT FONT, SIZE 11 }
{unused on profile}
.head11, .text11{font-family:tahoma; color:FFFF00;font-size:8pt;}

{ TABLE COLORS }
{apparently unused?}
table.grey, tr.grey, td.grey{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.white, tr.white, td.white{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.accent_light, tr.accent_light,
td.accent_light{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.accent_dark, tr.accent_dark,
td.accent_dark{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.action, tr.action, td.action{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF; }
table.blue_light, tr.blue_light,
td.blue_light{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.blue_dark, tr.blue_dark, td.blue_dark{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}


{"Help" and "Signout" in very top in right corner}
a.man,a:link,a:active,a:visited{font-family:tahoma; font-size:8pt;color:FFFFFF; text-decoration:none;}
a:hover{font-family:tahoma;
font-size:8pt;color:FFFF00; text-decoration:none;border-bottom:1px dashed FFFFFF;}
</style>

[lbr]

I thought his would come in handy for everyone who wants to edit their blog's CSS but don't really understand what's going on.

I've used the the default, bare bones CSS from the actual blog page; nothing has been changed with the code except for the addition of ".lbr {}" to explain what each class does. If you are expecting an actual layout, this won't be it. You have to manually change each attribute to make the layout. Again, this is just a quasi-tutorial!

CODE

/* Basic page attributes*/

.lbr {overall look of your blog}
Body {
text-align:center;
font-family:Verdana;
color:#000000;
font-size:x-small;
text-decoration:none;
background-attachment:fixed;
background-color:#FFFFFF;
background-image:url();
background-position:center;
background-repeat:no-repeat;
}

.lbr {link = all links
visited = things you've clicked before
active = as you are clicking
hover = as your mouse goes over the link}
:link {
font-family:Verdana;
color:#003399;
font-size:x-small;
text-decoration:underline;
}

a:link {
font-family:Verdana;
color:#003399;
font-size:x-small;
text-decoration:underline;
}

a:visited {
font-family:Verdana;
color:#003399;
font-size:x-small;
text-decoration:underline;
}

a:active {
font-family:Verdana;
color:#003399;
font-size:x-small;
text-decoration:underline;
}

a:hover {
font-family:Verdana;
color:#003399;
font-size:x-small;
text-decoration:underline;
}




/* Blog Portion of Your Page */
.lbr {the table your ENTIRE page sits in.
to move left or right, use margins.}
table.main {
width:90%;
border:none;
}

.lbr {the cells and rows of table.main; no real need to mess with this.}
table.main TD,table.main TR {
border:none;
}

.lbr {navigation above your entries;
home | mail | rss | sign out}
table.nav {
font-family:Verdana;
color:#000000;
font-size:x-small;
}

.lbr {unless you specify a header, these won't show up.}
table.header {
width:100%;
background-color:#D5E8FB;
border:1px solid;
border-color:#000000;
}

table.header TH {
font-family:Verdana;
color:#000000;
font-size:x-large;
text-decoration:none;
font-weight:normal;
border:none;
}

table.header TD {
font-family:Verdana;
color:#000000;
font-size:x-large;
text-decoration:none;
font-weight:normal;
border:none;
}

.lbr {side module; physical aspects
use width to make smaller or larger [px]}
table.profile {
width:100%;
border:1px solid;
border-color:#B1D0F0;
background-color:#ffffff;
text-align:center;
}

.lbr {side module; how test looks}
table.profile TD {
font-family:Verdana;
color:#000000;
font-size:8pt;
text-decoration:none;
border:none;
}

.lbr {blog table; includes entries, stamps, etc;
use width to make bigger or smaller [px].}
table.blog {
width:100%;
font-size:x-small;
font-family:verdana;
color:#000000;
word-wrap:break-word;
background-color:#B1D0F0;
}

.lbr {how the time looks}
.blogTimeStamp {
font-size:x-small;
font-family:verdana;
color:#000000;
font-weight:bold;
background-color:#B1D0F0;
text-align:left;
}

.lbr {how the subject looks;
text-align will move the subject left, right, or center.}
.blogSubject {
font-size:x-small;
font-family:verdana;
color:#000000;
font-weight:bold;
background-color:#B1D0F0;
text-align:left;
}

.lbr {text in entries}
.blogContent {
font-size:x-small;
font-family:verdana;
color:#000000;
font-weight:normal;
}

.lbr {links below entries;
you should be able to use text-align to move left, right, or center}
.blogContentInfo {
font-size:x-small;
font-family:verdana;
color:#000000;
font-weight:normal;
}

.lbr {the left side w/ picture of the comment box}
.blogCommentsProfile {
width:25%;
font-size:x-small;
font-family:verdana;
color:#000000;
font-weight:bold;
background-color:#FF9933;
text-align:center;
}

.lbr {right side w/ comment of comment box}
.blogComments {
background-color:#F9D6B4;
}

.lbr {how the text will appear.}
.blogCommentsContent {
font-size:x-small;
font-family:verdana;
color:#000000;
}

.lbr {the space between entries;
if background set to same color as blog entries,
the entries will appear to only sit in one "box".}
.spacer {
height:2;
background-color:#FFFFFF;
}

.lbr {space between comments}
.commentSpacer {
height:2;
background-color:#FFFFFF;
}

I hope you don't mind that I've merged this into one of our pinned topics, as it does fit quite well there. :)
} Azarel

This post has been edited by jaeminnie: Sep 28 2008, 01:17 PM