Nedsferatu.com Blog

The Nedsferatu.com Blog

Nedsferatu.com Blog header image Chicago branding

MySpace CSS Styling: Taming the Beast

May 17th, 2009 · 1 Comment · Internet

Recently I went mano y mano with MySpace and wanted to share my expereinces. We all know the fact that MySpace is the worst written most popular web application on the internet; it is sort of a grotesque freak that you know you should just forget about but seems to just keep coming back to over and over.

My most recent tussle was for the sake of my wife who was looking for more consistant branding not only on her blog but across her social networking sites. The only three I believe worth spending time on today is twitter, myspace and facebook (youtube is a subject for another post). Her twitter was easily done and there’s not much you can do with facebook so that left Big Ugly to contend with. Hopefully, I’ll be able to pass along some tips in case you are interested in putting lipstick on this pig.

First of all, I am very impressed with what we were able to achieve. This is mostly because the crowd who uses and develops themes and hacks for myspace seem to have about as much good sense as the core developers themselves.  Second, if you care about semantic markup and elegant coding, working with myspace might give you a heart attack. You have to be willing to compromise with the site and write some nasty CSS to get it to display a decent looking page.

Luckily, Mike Davidson wrote a very helpful and tremendously funny post with source on a pretty in depth look at the available CSS hooks and hacks necessary to wrangle a good looking page. Please let his work be a starting point for your own efforts; it will likely be good for your health.

Besides tweaking his CSS doc for our own branding purposes (and creating the requisite images of course), there was a big of tweaking around hiding certain page elements that my wife didn’t want displayed: page url, blog, comments, and top friends. Here’s what was necessary:

  1. Page url is in a table with class .userProfileURL so a simple display: none did the trick
  2. The blog section is located entirely in .latestBlogEntry so the same display:none works there as well
  3. Same goes for comments which are entirely in .friendsComments
  4. Finally, top friends but not the display all friends links or the heading displaying total number of friends. The necessary code is: .friendSpace tr td.text table tr td table tr td { display: none; }

The results I think you’ll agree is a very presentable and professional myspace page…or at least the closest you’re likely to get on MySpace. I think the take away here is that it is possible to brand myspace if you feel there is a good reason to have a presence there. With limited amount of effort you can right many of the wrongs that come with your account by default. Good luck and feel free to share your successes (and questions) in the comments.

  • Share/Bookmark

Related Posts:

  • No related posts

Tags: ·

One Comment so far ↓

Leave a Comment