Hacking MySpace

As I said a few weeks ago I would make this post, here it is. I plan to go through the general CSS for profile 2.0 for those of you who want to code your own CSS instead of using the Myspace editor.

I don’t plan to go through all the codes but I will give you a good idea of where to start.

This post probably won’t be of much use to anyone who doesn’t know much about CSS coding. If you would like to learn about CSS then I would recommend tutorials on sites such as W3Schools and HTMLDog.

Where Do I Put The CSS?

I say it shouldn’t be hard to find where to put it, but I have had people asking me where, so I thought I best screenshot it for you all.

From your homepage you click “Edit Profile”. After that it will bring you to the editing about me page. You need to go to the profile editor by clicking “Customize Profile” in the top right corner. After that it should be easy enough. Click on the CSS tab and enter it into the input box provided:

The Main Selectors

The main selectors you will be using on profile 2.0 are for each of the modules you have on your page. Each module has one selector. If you have removed a module from your page then there is no need to use it’s selector (obvious point I know, but I thought I should mention it).

Because you have to enter the CSS into the set CSS box it means we can get around filters (e.g. the # is filtered on profile 1). This means we can edit parts of the page that we couldn’t on profile 1.

This first set of selectors are general page selectors that are pretty self explanatory what they do:

div#leaderboard {}

div#googleBar {}

div#topnav {}

div#header {}

div.content {}  

div#footer {}

The first is the part with the advertisement inside it.

The second is the google searchbar.

The third is the navigation bar.

The fourth is the section containing both the myspace logo and the google toolbar.

The fifth is the whole content area (all the modules, your whole profile basically).

The sixth is the footer at the bottom of the page.

The next set of selectors are the module selectors:

div.basicInfoModule {}

div.musicPlayerModule {}

div.interestsModule {}

div.blurbsModule {}

div.friendSpaceModule {}

div.detailsModule {}

div.schoolsModule {}

div.companiesModule {}

div.networkingModule {}

div.videoSliderModule {}

div.commentsModule {}

div.mdpApplicationModule {}

All of these should be self explanatory from the names of the classes. I don’t think I need to explain what each of them is.

Inside each of the module divs above you have some more divs which control the rounded border of the modules, these are:

div.moduleMid {}

div.moduleMid1 {}

div.moduleMid2 {}

You also have a div inside each module for the header of said module, this is:

h3.moduleHead {}

So for example if you want to put a background image on the header of the interests section you would use the following CSS:

div.interestsModule h3.moduleHead {background-image:url(URL);}

I hope this gives you a general idea of how to code the CSS for profile 2.0. You can always use firefox’s web developer toolbar to find out in more detail what each part of the profile is named.

Related: