MySpace Custom CSS Code Sample

The following code may be inserted into your MySpace profile to create a customized look that does not suck too much. I've made no effort to implement any MS Internet Explorer hacks, I'll just wait till they get around implementing CSS properly.

Feel free to use any of the code below, or any part of the code. (It is all licensed under GPL). I do not care if your page looks exactly like mine.

You will find that customizing MySpace layout may be tricky, as it is poorly organized. I tried to document and give examples of as many hacks as I've discovered, but there is much to be desired. Consult the note fields to get an idea about the meaning of the classes. If you insert your own modifications and they do not appear to work, always try !important keyword before giving up.

<style type="text/css"> body { note: "entire page; good for default settings"; background-color: b0b0ff; font-style: normal; font-family: serif; } input, select { note: "input, select elements"; background-color: a0f0a0; opacity: 0.8; color: black; font-family: sans-serif; font-weight: bold; font-size: 9pt; } option { note: "option box"; background-color: a0f0a0; color: black; font-family: sans-serif; font-size: 9pt; } img { note: "all images, including those in the comments; this will scale them down if they are too big"; max-width: 10cm !important; height: auto !important; border-width: 0px; } img[id="ctl00_Main_ctl00_Img2"] { note: "get rid of (bugged?) image placeholder in the middle"; display: none; } p, div, td, .text, strong { note: "paragraphs, divs, table cells, etc., i.e. most normal text"; color: black !important; font-family: serif; font-weight: normal; font-size: 10pt; } a, a:link { note: "all links"; font-style: normal; font-family: serif; font-weight: normal; font-size: 10pt; color: 008000; } a:hover { note: "all links, hovered over"; text-decoration: underline; } a:active { note: "all links while being clicked"; color: white; text-decoration: none; } a:visited { note: "all visited links"; color: 303030; } a.redlink:link { note: "view all of X's friends"; color: 008000; } a.navbar, a.navbar:link { note: "navbar on top"; color: 507040; font-family: sans-serif; font-weight: normal; font-size: 7pt; } a.navbar:active { note: "navbar on top"; text-decoration: none; } a.man { note: "can't find that one"; } .blacktext10 { note: "date of the comment"; font-family: monospace; font-size: 9pt; font-weight: bold; color: 408040; } .blacktext12 { note: "X is in your extended network"; font-family: serif; font-size: 12pt; color: black; font-weight: bold; } .blacktext12:before { note: "this line goes before the X is in your..."; content: "D'oh! "; } .redtext { note: "number of comments displayed, just the number itself"; color: blue; } .btext { note: "X has Y friends"; font-family: serif; font-size: 10pt; font-weight: bold; color: black; } .redbtext { note: "number of friends, just the number"; font-family: serif; font-size: 10pt; font-weight: bold; color: blue; } .redbtext:before { note: "this goes before the number of friends"; content: "approximately "; color: blue; } .redbtext:after { note: "this goes after the number of friends"; content: ".94872+e37"; color: blue; } .orangetext15 { note: "headers on the right side: blurbs, about me, who I'd like to meet, friend space, etc."; font-family: serif; font-weight: bold; font-size: 12pt; color: black; } .lightbluetext8 { note: "categories on the left side: general, music, status, orientation, etc."; text-align: right; display: block; font-family: sans-serif; font-size: 10pt; color: black; } a.searchlinksmall:link, a.searchlinksmall { note: "links on the left: the contents of interests"; text-align: left; font-family: serif !important; font-size: 10pt !important; color: black !important; } a.searchlinksmall:hover { note: "links on the left, hovered over"; text-decoration: underline; color: blue; } .whitetext12 { note: "headers on the left side: interests, details"; text-align: center; display: block; font-style: italic; font-weight: bold; font-family: serif; font-size: 12pt; color: black; } .nametext { note: "name, above the picture on the left side"; font-family: serif; font-size: 15pt; font-weight: bold; color: black; } table, td, table tr { note: "all tables, all table cells, all table rows"; background-color: transparent; } table table table { note: "one level above inner boxes, includes headers"; width: 100%; background-color: c0e0c0; opacity: 1; border-color: c0e0c0; border-style: solid; border-width: 2px; padding: 1px; } table table table td { note: "cells containing inner boxes, headers"; border-style: none; background-color: transparent; } table table table table { note: "inner boxes, sans headers"; width: 100%; border-style: none; background-color: f0fff0; } table table table table td { note: "inner cells"; } </style>