contentTop

How to reset your Myspace Profile Theme using CSS

MySpace Background Template

MySpace Background Template

One of the items I struggled to get right with my brand more than the blog, more than the shirt designs, more than the online store, more than the SEO and link exchanging was the god damn Myspace. I don’t know why, but for some reason a staple of your brand besides a decent Twitter and blog presence is to have a Myspace page. Add us as a friend on Myspace, or at the very least checkout what your Myspace will look like if you start using this theme.

In all my years of web design and development I’ve never had anything be quite as big of a pain in the ass as a Myspace layout and getting it to look the way I wanted. After three different Myspace “resets” I think I’ve finally found one that helps get you back to a mildly respectable looking page.

Download Assault’s Myspace Reset

A few things you should note when editing this file for your Myspace:

  • Colors need to be changed in several places
  • No # signs are used in the color hex codes
  • No Javascript allowed
  • No CSS shorthand, you have to type it all out

Before Copying/Pasting the Myspace Reset CSS into your profile about me area, make sure to copy the URLs to your Add to Friends, Send Message, and any of the other links contained within your Contact box because it will be hidden by the CSS. I suggest making an image and using some sort of online image map tool, to apply your add to friends and contact links as appropriate as I have done.

Elements we will be hiding

  1. Contact Information
  2. MySpace URL
  3. Blog Listing
  4. Extended Network Box

Change Images

You can download the image I have used here for my layout to get an idea of where to position your background image. You will also need to upload your background to some remote third party website such as your own web host or your Flickr account. Make sure to change the background-image: url() to the url of your background image or else it will show my background and I’m sure you don’t want that. The first code block in the reset CSS contains the background-image URL you see below:

   body {
  font-size: 1px; line-height: 1px; font-family: georgia, times, 'times new roman', sans-serif;
  background-color:000000;
   background-image:url(http://www.assaultshirts.com/images/myspace_bg.jpg);
  background-attachment: none;
  background-position:center center;
  background-repeat:no-repeat;     }

Change Colors

I recommend going through and changing the colors in one batch find/replace because the colors show up in several places and it can be hard to keep track of the sheer number of CSS colors because of the strange organisation of the Myspace Layout.

About this theme

That’s it! Change the images, colors, add your own background, and contact information image map and you’re good to go! Best part about this freebie I’m giving away is that it still abides by the Myspace terms of use and shows the advertisements, and it doesn’t have any of the stupid  spam links you find on most themes. (Though it would be nice for you to at least add us as a friend)

Like this post? Bookmark it!

Delicious Stumbleupon Facebook Twitter Design Float MySpace

Email to a friend

Privacy: We won't save or reuse these emails.

Your message has been sent!

Please enter a valid email.

Your email failed. Try again later.

About the Author

tim Tim is the co-owner of Assault, and tends to think he can party twice as hard as anyone. Follow him on twitter @assault

Email this Author | All posts by

7 comments “awaiting immediate, obnoxious rebuttal”

  1. innervisions says:

    very useful, one question, i put a background and its fine, i just dont know how to put the image map, can you make expand a little bit this tutorial, that will be great! =) thanks!

  2. tim says:

    I copied and pasted the image map code from a generator that I found online that I linked in the article. I made the image in photoshop and then imported it into the online image map editor and copied/pasted that code into my about me area.

  3. sdvfg says:

    k

    k

    h

  4. Priyanka says:

    wow cool tips! just tweeted it @inkfruit

  5. help me fix my Myspace palese

Footer
  • Recent Comments

    • Shaun Mclain: Nice informative blog, thanks for sharing.
    • Jim Connelly: That Jim Connelly guy was AWESOME!! You should have him on more often!!
    • facial redness: great bro and really we are like it
    • Gabriel Smith: Fantastically good appreciate it, I presume your followers might probably want a great deal more posts like th...
    • Aleida Pinder: I like to read your blog a couple times a week for new entries. I was wondering if you have any other niches ...
    • tim: I remember when I used to actually be on the podcast, and then Oswald and myself could have talked to Jim abou...
    • Tim: Janitorial skills are my specialty
  • Newsletter

    Signup for our newsletter and you'll also get our best content, and a $5 gift card to use at our online store.
    (not valid with other offers/sales)




  • Rock Photos!

    20100206-dsc_0267 20100205-dsc_0124 welcome-to-ashley-darkroom-chicago-0017 dsc_0440 dsc_0043 direct_hit-0105 action-blast-house-of-blues_-0236 action-blast-house-of-blues_-0174 direct_hit-0158