A few weeks ago I setup a MySpace account. Initially, it was just so that I could get to the pictures & such that my Sister posted, but since then I’ve found a few old high-school friends and such. I really haven’t done much with it, since I have yeraze.com here, but I check it every now and then just to see what’s going on.

One of the neat (depending on your definition) things about MySpace is that they allow you to post full HTML in any of your blocks, so a popular thing is to post StyleSheets in your “About Me” block to change the look of the page, along with YouTube videos or other Flash-fu to make your eyes bleed. You’re limited in what you can do because you can’t edit the HTML of the page, so you’re limited just to the StyleSheets for look-n-feel. So last night I decided I would use my MySpace page for an experiment, just to see what I could do with a static-page, while all I can edit is the StyleSheet.

I was amazed. I only edited the stylesheet, but you can look at the page to see what I was able to accomplish:

  1. I Added in a background image.
  2. I disabled the white text background, making it fully transparent.
  3. I forced all the tables to fill the width of the column, created a more “uniform” look.
  4. I set all the remaining boxes to have large blue borders, but not the ones inside of them.
  5. I set all the boxes to have semitransparent backgrounds (On both Firefox & IE, surprisingly)
  6. I flipped the page left-to-right, so that my Information is on the right instead of the left.

All of this with nothing but StyleSheet mojo, and not much of it at that. For anyone interested, here it is:

body {     background: url(http://example.com/image.jpg);    background-repeat: no-repeat;    background-attachment: fixed;    background-position: top center ;    background-color: black;}
 First set the background image, and make it centered at the top. I also establish a black background color that kinda matches the image. 
table,td {    background-color: transparent;    direction:rtl;}
 Then set the main table, the large white area, to completely transparent.. the “direction:rtl” line makes columns go from right-to-left, instead of the usual left-to-right. 
table table table {    width: 100%;    direction:ltr;    border-width: 10px ;    border-color: 0000ff ;    border-style: solid;    background-color: ddddff;    filter: alpha(opacity=95);    -moz-opacity: .95;    opacity: .95;}
 Then, for tables inside of that restore the white-ish background and left-to-right behavior. Also, add in a 10pixel blue border. The “width: 100%” forces all the tables to consume the entire possible width, and the three “opacity” lines leave the areas slightly transparent. Due to browser incompatibilties, it seems all three are needed. 
table table table table {    border-width: 1px;}
 Finally, remove any borders for tables contained within the previous one.

Personally, I was impressed. I’ld always heard about how great stylesheets are and how they can “change everything” about a page, but I never realized how far you could go with it.
[tag:myspace][tag:web][tag:stylesheets][tag:css]

Be Sociable, Share!