MySpace

You caught me. I have a MySpace page, but please, let me explain.

In an episode of commandN Amber MacArthur made a statement along the lines of "Let's face it, all MySpace pages are ugly!" (I'm paraphrasing here). So I took it as a challenge. I signed up to MySpace and started my quest to beautify it. The design I settled on originally, or a reasonable facsimile, can be found here. Now I just keep the page as an example of what can be done with carefully crafted CSS techniques.

Technical Challenge

MySpace has a well defined structure and content style, what you can do with it is quite limited and often results in ghastly designs. I wanted to start with a blank canvas, the best way to achieve this was to simply hide everything.

Unfortunately the MySpace terms and conditions require that the banner advert is not hidden. MySpace have quite reasonably tried to avoid attaching any uniquely identifying tag or class to the banner which prevents users from selectivly hiding just that element of the page, however this makes it quite difficult to force the advert to show. I spent some time analysing the MySpace HTML and finally found a way of identifying the banner. While the method also identifies other elements on the page it allows me to effectively hide these elements as well.

Do it Yourself

Want your very own blank canvas to craft a beautiful page? Copy and paste the code below to any of the boxes on your MySpace edit page. I know it looks ugly but trust me it works - and it'll look much better when you save your profile and it's unescaped.

Note: You can't use ID's, comments or JavaScript.

</style>
<style>

-x-comment-hide-everything {}
table {
  margin-left: -900%;
}

-x-comment-show-advert {}
html body div table tr td {
  position: absolute;
  top: 5px;
  left: 5px;
  height: 0px;
  width: 98%;

  margin-left: auto;
  margin-right: auto;
  
  x-comment-your-background: color;
  background-color: white;
}

-x-comment-hide-search-box-and-navigation {}
font,
html body div table tr td input,
html body div table tr td select,
html body div table tr td img {
	display: none;
}

-x-comment-content-wrapper {}
.webpage {
  position: absolute;
  top: 100px;
  left: -0px;
  margin: 0;
  padding: 0;
  
  x-comment-optional-divider: bar;
  border-top: 5px solid black;
}

-x-comment-basic-configuration {}
body {
  margin: 0;
  height: 100%;

  x-comment-your-background: color;
  background-color: white;

  x-comment-your-text: color;
  color: black;
  font-family: Verdana, Tahoma;
  font-size: 100%;
}

-x-comment-default-comment-formatting {}
.default {
  display: block;
  padding: 3em;
  font-size: 16px;
}
</style>

  <div class="webpage">
  
    <span class="default">Your content goes here.</span>
  
  <img src="http://golivetutor.com/download/spacer.gif" height="1"
      width="780" alt="Spacer Bar, IE Bug Fix">
  </div>