March 13, 2007 62 Comments

Why does myspace CSS work the way it does? Pt 2

If you haven't read our post on this actual code, you can view Part 1 of this series here.

First, let's cover the basics of how CSS works. When you see the "" tag, that means that everything between the two are overriding the default html tag's display features. For example, w3schools has a set of default style values such as font-weight: bold, and font-size: 20pt (or so). In order to override that in css, we'd do something like this:

HTML:

h1 { font-weight: normal; font-size: 12pt;}

Note that we start by declaring a new style "". Then, we declare which tag we want to change "h1", followed by an open curly bracket "{", a list of style settings, then the closing curly bracket "}" implying the end of our new styles.

Now our style sheet has overridden the default value for h1 tags throughout the document, and will be reflected everywhere you have a

HTML:

<h1>sometext</h1>

...tag set. Now, we can create "classes" and "id's" in css that allow us to use custom styles. For example, myspace uses a custom css class which they titled "contactTable". In the html, they represent this with the following tag:

HTML:

<i><span class="contactTable">"... some crappy images ..."</span></i>

In our myspace style code above, you'll see something like the following code:

HTML:

<i><style type="text/css"><br /> .contactTable {display:none; height: 0 !important; visibility:hidden; }

Note the "." before the "contactTable" title. This tells the css to look for contactTable as a "class", as opposed to a custom "id", or a built-in CSS tag. Also, you'll notice that what we're doing with this tag is essentially just squashing it into nothing. That's because the purpose of this code is to HIDE everything. There are TONS of code samples out there to show you how to change the background, colors, etc. And if we have time, we'll add some of that here, but for now, we're just "turning it off".

This is a great time to interject that it would be HUGELY beneficial to both the users of myspace AND myspace themselves for THEM to give you the option of turning off sections of data like this, as it could GREATLY reduce bandwidth on their part. However, they're dumb, and you're not, so let's continue to give you more responsibility and control. That's why you're here, right?

Now that you're a CSS master (it's really that simple), let's look at this code again and break it down line-by-line.

This first section of code turns off ALL FLASH CONTENT.

HTML:

embed, object {display:none;}</style></i>

So, if you do end up with some div overlay layout, and you want to add say, a youtube video embed in your profile, just add a style attribute to the object tag, like so (added code in bold):

HTML:

<i><span class="mceItemObject" type="application/x-shockwave-flash" data="http://www.youtube.com/v/TTV0Aa4lC04" height="350" width="425"<b> style="display: inline;"></span></i> <span name="movie" value="http://www.youtube.com/v/TTV0Aa4lC04" class="mceItemParam"></span> <span name="allownetworking" value="internal" class="mceItemParam"></span> <span name="allowScriptAccess" value="never" class="mceItemParam"></span> <span name="enableJSURL" value="false" class="mceItemParam"></span> <span name="enableHREF" value="false" class="mceItemParam"></span> <span name="saveEmbedTags" value="true" class="mceItemParam"></span> <span name="wmode" value="transparent" class="mceItemParam"></span>

Now, back to the code. Next, we turn off the myspace-generated custom tags. This way, we have direct access to every instance of the use of any of these tags, and we don't have to "target" them, which I'll explain in a second. So, in order to save ourselves from writing the same code over and over again for every class we want to turn off, we simply list them, separated by commas, and then apply a style, like so:

HTML:

<i>.contacttable, .whitetext12, .nametext, .lightbluetext8, .orangetext15, .blacktext12,.btext, .redtext, .redbtext{ display:none; height: 0 !important; visibility:hidden; }</i>

If we want to "target" an instance of a tag, say for example that we want to only change an h1 tag if it appears in a nest of other tags like so,

HTML:

<table> <tr> <td> <div> <h1>

...then we would address it in css like so:

HTML:

<i>table tr td div h1 { ... some styles }</i>

You'll notice that we don't have any commas separating our list this time, which tells CSS to "target" the h1 tag when it's nested in a div, which is nested in a table details, which is nested in a table row, which is nested in a table.

NOTE: "nesting" means that tags are opened, then other tags are opened, then the second tag is closed, then the first tag is closed. Like this:

HTML:

<parent><child></child></parent>

In this example, the "Child" tag is "nested" inside of the "Parent" tag. Make sense? Good. Glad you're following.

Having said that, you'll see LOTS of targeting in all the millions of bits of myspace code around the myspace'o'sphere. Don't be intimidated. It's a result of a VERY badly designed site (myspace), and the sheer power of a well-written code base (CSS), blended with the determination of a creative user (You). Fighting the system, and getting what YOU want, you continue your code with the following:

... when td's are nested 4 deep...SUCH AS:

HTML:

<table> <tr> <td> <table> <tr> <td> <table> <tr> <td> <table> <tr> <td>

HTML:

td td td td { border:0px; width:0px; text-align:left; }

... all table and td tags... SUCH AS:

HTML:

<table> AND <td>

HTML:

table, td { padding:0px;width:;background-color:transparent}

... when tables are nested 3 deep... SUCH AS:

HTML:

<table>...</table><table></table><table>..."

HTML:

table table table { padding:1px; height:.01%; width:100%;}

... tables nested 2 deep, tables nested 4 deep, table, tr, and td tags... SUCH AS:

HTML:

</table><table>...</table><table>" AND "</table><table>... </table><table>...</table><table>...</table><table>..." AND "</table><table>" AND "<tr>" AND " <td>"

HTML:

<i> table table, table table table table, table, tr, td {height:0px;!important;border:0px;!important}</i>

... tags that have "class=text" in them, when tags are nested in font tags which are nested in div tags which are nested in a table, when a font tag is nested in any tag containing a "class=navbar" attribute, when a font tag is nested in a td which is nested in a tr ...SUCH AS:

HTML:

<a class=text>" AND "<table>... <div>... <font>... <a>..." AND "<table>... <div>... <div>..." AND "... class=navbar>... <font>" AND "<tr>... <td>... <font>..."

HTML:

<i> a.text, table div font a, table div div, .navbar font, tr td font { visibility:hidden; display:none; height:0px;!important;}</i>

... tables nested 4 deep, td's with "class=text" nested in a table nested 4 deep, tables nested inside of 2 nested td's which each contain "class=text" attributes ...SUCH AS:

HTML:

<table>...</table><table>...</table><table>...</table><table>... " AND "</table><table>...</table><table>...</table><table>...</table><table>...<td class=text>" AND "</td><td class=text>...</td><td class=text>...<table>"

HTML:

<i> table table table table,table table table table td.text, td.text td.text table { display:none;}</i>

... table tags nested 2 deep inside of td tags with "class=text" attributes ...SUCH AS:

HTML:

<td class=text>...<table>...</table><table>..."

HTML:

td.text table table { display:inline; visibility:visible;}

... table tags nested in td tags with "class=text" attributes nested in a tr tag which is nested in a table tag which is tested in a td which is nested in a table ...
SUCH AS:

HTML:

</table><table>... <td>...<table>...<tr>...<td class=text>...<table>..."

HTML:

table td table tr td.text table { visibility:hidden;}

... tables nested 2 deep inside td tags with "class=text" nested in tr tag which is nested in a table which is nested in a td which is nested in a table ...SUCH AS:

HTML:

</table><table>... <td>...<table>...<tr>...<td class=text>...<table>...</table><table>..." AND "</table><table>... <td>...<table>...<tr>...<td class=text>...<table>...</table><table>...<td class=text>..."

HTML:

table td table tr td.text table table, table td table tr td.text table table td.text { visibility:visible;}

And of course, we close the style...
[html][/html]

Now that you're a CSS guru, go and hack the hell outta your myspace page. I'm sure we'll be posting again soon on how to do even more. For now, enjoy.

Your Friend and Mine,
Meshach

You may Leave a comment or Subscribe to Comments RSS or Trackback this entry.

62 comments so far

Hide everything on your myspace profile (including music player!!!) Pt 1 « WaxJelly March 13, 2007 11:24 pm

[...] Great, now why the hell does that work? Let’s try and break it down. [...]
shalina wade March 17, 2007 7:25 am

I love all the helpful codes but how do I just remove the big top ad on my page? -thanks
ruby March 17, 2007 8:06 pm

thank you so much for the help! it's helped me so much! if only i could've found this page before using all those different codes for different things @_@

gah, thank yo again!!
bryan March 17, 2007 10:48 pm

you're welcome :) keep reading.
Steph April 1, 2007 2:39 pm

Do you know how to disable the add at the top of the page?
If so can you email me, I know thats its not supposed to be disabled, but it would be much apreciated... :)
dhl_angel@hotmail.com
linda April 3, 2007 3:11 pm

i used yer code,
but how come the song doesnt play?
Lec April 5, 2007 7:22 pm

this code for most of my profile but why are a few images still showing?
IgraQ April 6, 2007 7:02 pm

youre crazy, man!!! thank you!
Jo April 17, 2007 3:22 pm

How do I get a background on my page with this code? it doesnt appear to work!!
zubie May 24, 2007 12:54 am

first of all, thanx 4 this code, second..why cant i put any links on my page now..?
LatSaint May 29, 2007 3:05 am

is there a CODE to remove the ad from the top of MYSPACE…and i know i know if i get caught ill get deleted….is there a code to remove the ad from the top of myspace?
nathan May 30, 2007 10:26 pm

If you remove the banner from the top of myspace you will get your account deleted or blocked until you remove it so save yourself time and effort and just let it be , links can be put in , but you should google & find more excellent pages like this that teach you css & html . Everyone starts off from the beginning so if i can do it so can you.

The background yoo can be put in with simple css & html , google it and learn :D it will be worth it when you teach yourself the simple code in this case for backgrounds

thanks for an excellent page bryan wish there were more straight to the point , well written sites out there.

I stumbled onto many amateurs who had pages of code that just didnt work properly :@
jakee June 5, 2007 9:29 am

hey..
this code is great..
do yo have any suggestions on how
to create your profile on mypace from scratch
afte using this code??
thanks heaps
LatSaint June 8, 2007 4:15 am

is there a CODE to remove the ad from the top of MYSPACE…and i know i know if i get caught ill get deleted….is there a code to remove the ad from the top of myspace
Joe June 13, 2007 7:55 pm

it works great , but when i come to edit my profile on myspace i cant even see the link where i would click edit ???

is no one else having this problem
biff plectrum June 19, 2007 10:12 am

Where does all this nifty code go if you have an Artist page? They don't have any of the "About Me" (etc) fields we're always being told to paste Myspace code into...
The JAF June 20, 2007 1:59 pm

check this out!

http://www.myspace.com/jafjafjaf

:)
tiffany June 21, 2007 11:08 am

how do you get you're music player back ?
zappy June 30, 2007 2:00 pm

ok it does a great job taking everything out of the profile, but when you get to adding your own codes to create your own page it just doesn't work out. is there another special code we need in order to put in our codes?
mark July 5, 2007 6:36 pm

there is a simple fix to it if you want the add to show, but you will be left with the naviagation bar too, but it still looks fine, and this way you dont have to worry about your account being deleted because the add is there!

simply find this part of the code and delete it

a.text,table div font a,table div div,.navbar font,tr td font {
visibility:hidden;
display:none;
height:0px !important;
}
bryan July 5, 2007 7:32 pm

ah, thanks mark.
Zaiaku July 5, 2007 8:42 pm

JAF I like how you you have the single column on your profile.

I always wodner how myspace css worked since basically 2 scripts are doing the same thing.
agathe. July 10, 2007 12:51 pm

hey!
i need some help.. i want to change my myspace page into a very personnal one. ive got all the ideas and thought i knew how to do it with html things but it doesnt work the right way. i used that code you gave to hide everything, but then i cant put a background image..
to be more specific, i only want to put several images on my page that would create one whole image. (thats my (weird) way to put links where i need to put some)

can you help me with something? maybe theres a easier way to do it?
thank you!
x
Zaiaku July 10, 2007 4:22 pm

Agatha,
If I was going to do the same thing as you I would do it think way. Take all the small images that you want to use and merge them into 1 image. Then that that image and make a imagemap.

So say you was going to use 7 images. I would make 1 image out of those 7 so that way only 1 image has to load. And use an imagemap to divide it into sections. So if someone cliccs on the left it will go to 1 website. If they clicc on the right takes them to another.

Another way you could do it is to lign up each image using stand html, but if the images are different sizes may not look clean. And then just use a A HREF tag to link the images where you would like.
jack July 12, 2007 1:20 am

how do i put links so people can comment me/
Zaiaku July 12, 2007 3:59 am

use: "a href" command with the right links and you will be set.
Goat shrine July 19, 2007 12:50 pm

Hi!
I made a div overlay with slices for my band but now I have MAJOR problems getting the standard myspace music player for bands to show up. The idea was to position it at the bottom of the page. Could anyone help me a bit?
Zaiaku July 19, 2007 2:43 pm

Try this:

td td embed, td td object{position:absolute; left:0px; top:0px; z-index: 3; width:260px; height:47px;}
td.text embed {width:260px; height:38px;}
td.text embed, td.text object {width:260px; height:38px;}

I don't have a band profile to test this on. And not sure what you current code you have on your profile either.
Zaiaku July 19, 2007 2:44 pm

Remember to use the style's tags since you can't post them on here it erased them.
Goat shrine July 20, 2007 11:23 am

Well, I tried the code but the only thing that happens is that my DIV gets messed up, and still no player. Of course, there could be some odd conflict in my code.
My e-mail is:

stefan.wallin.1972@spray.se

send me a message and I will send you the login info required for the goat shrine page. That way you can check out the code etc. I really need to get the player up soon. As an artist maybe you need some cool photoshop brushes and some nice expensive fonts? That could all be arranged if you help me out a tad,lol.
chris July 27, 2007 6:27 am

need help. i design myspace pages for band and have come across a problem that i need help with. my hotspots are not working any more on bands myspaces when i edit them. they work but when trying to up load a new design or make text edits they quit working. but if tried on a reqular myspase then they work.....whats wrong when the same code works one place but not another...
Felicia August 6, 2007 1:02 am

how come with the div overlay im usin it wont show what im written
porsh August 6, 2007 1:51 pm

how do u change the color to black?
Kory August 7, 2007 5:06 am

wow that was a great help, but now that i have evrything hiding to add my own stuff. how do i add text?
David August 17, 2007 4:39 am

how do you hide the "about me" thing?
mark August 20, 2007 8:52 pm

this is GREAT. is it possible to have a background image or a solid colour?!?!
dyLAB August 28, 2007 1:33 am

i have a band profile and cannot find the about me field.
Any ideas?
Stig August 29, 2007 6:58 pm

Awesome! This is exactly what I needed!

JAF (or anybody else) - Think you could share how you brought back the comments section? I'm kind of a css novice, so even after the explanation on this page I'm still not sure how to go about it.
Andy September 3, 2007 6:16 pm

Thanks alot. I've been looking through all this crappy code that doesn't work until I found this site.
clarissa September 4, 2007 3:25 am

i put in the code and saved it, so right now all my profile is, is a background and i cant go back and edit it, the page wont load. maybe its just my computer. any idea?
Char October 11, 2007 11:08 pm

This is excellent! I've been trying to setup a business like myspace and have been hacking away all day at this! though I do ahve one question... Do you have any kind of diagram that you can post that shows in a visual the table, tr, td, table table, table table td type stuff? That way I can visually see where each thing is placed when I type in however many tables or trs and the like?

Very good walkthrough though!
Eric October 18, 2007 1:04 pm

Hi,

I started doing band myspaces and I can't figure out how to move the events around or make it so I can use them in a div overlay. Is this possible? If so, how would I go about doing that?

My email is: manofvalor24@hotmail.com. A quick response is much appreciated.
jamie November 5, 2007 9:28 pm

wow..thanks for posting this!
I had fun this afternoon trying to manipulate it further...so far so good.

1- problem..my new div overlay is not displaying correctly in explorer...only firefox..which is GREAT for me..but not so good for anyone who still uses explorer.
anythoughts?
jamie
Lord Matt November 8, 2007 7:03 pm

Geeky. That's cool by the way. I'm glad MyMess... I mean MySpace is finally getting a bit of documentation for its messy html.
heidi November 17, 2007 7:22 pm

okay well i want to use this code so that i can fix up my myspace however i want. but the thing is, now i dont know how to add stuff. all it does is hide it. can you help?!
Erin November 20, 2007 12:53 am

hey i got your layout but i cant seem to ad my user id to it so nothing connects if uou no wat i mean can u please help me :)
loo November 27, 2007 1:47 pm

Stop using Internet Explorer :) FireFox Rules hehehehe like "CSS RULES" :P
Bucky January 29, 2008 1:07 am

I'm trying to replace a block of text.

.contactTable .whitetext12{VISIBILITY:HIDDEN;}

Your Text

Anyone know what the problem is?
Nathan Wolfe February 2, 2008 8:53 pm

I've been trying to put comments in my code (so that I can remember what I did later - plus it's good practice for my other coding) but everytime I try and put comment code into the page
e.g. /*comment here*/
or
e.g.
...myspace translates the code into something else.

Can you explain why it does this and how to get around it.
Jez February 11, 2008 3:57 pm

hey, the code works fine at hiding the majority of stuff...but how do i go about adding stuff over it now? lol, do i add another div layer over it all using the z-index? if so, can you start me off with a snippet and where to put the code? cheers.
mar February 11, 2008 7:08 pm

So why is it when I try to put a link to my website on my myspace about me section the link just goes back to myspace.com? Even when I use a different target page.
Lantiieeee February 25, 2008 8:03 pm

How can i delete everything apart from my default ???

Pleas help :)

x
Jamey Kirby March 16, 2008 7:42 pm

Here is a page I am working on. I have 100% control over it. I even had my own killer menus up last week. Right now I am using it to test some chat software.

As you can see, it is 100% clean except the banner ad at the top; I have removed it before, but I do not want my account deleted.

http://www.myspace.com/drinknoname

Just view the source and enjoy.

Jamey
Question??? March 23, 2008 3:13 pm

In your description you talk about listing all the different sections of the myspace thing so you don't have to type the test repetitively

I believe you relate to this bit of code:

.contacttable, .whitetext12, .nametext, .lightbluetext8, .orangetext15, .blacktext12,.btext, .redtext, .redbtext {

From that, the only thing I can udnerstand immediately is that the .conttactable, is the contact table section.

Which other words relate to different sections?

Which word relates to the about me section?

And, just because I'll pick the second one, say I wanted to type some text away and make it show only the, (for the example) I only want it to show the "about me" section, let's pretend (because I have noidea) that this is the .whitetext12, part.

Would this code be correct to show the about me section:

.whitetext12,
{
display:inline;
height: 500 !important;
visibilty: visible;
}
Scott March 26, 2008 12:21 am

CAn i hide all the stuff...but leave the player.... and have power where it is situated??? PLEASE HELP Cos Im working on a flash site...
CHEERS!!
Scott
Scott March 26, 2008 12:22 am

sorry...or have another player that its linked to??
Regards.
S
Tion March 26, 2008 1:47 pm

I just want to place my youtube videos in the open spots on my photoshopped picture to my band page or band profile div layout. How do I do that? and what section do I place it in or do I just at it to code I have in place already...
thank you

http://www.myspace.com/tionpri
c-rose22 May 14, 2008 11:47 pm

ahh, i got a new layout and my whole about me is bold and underlined, and it's nothing with the
i just want it to be normal, i've went through the code a ton of times, but i can't change it. :( anyone?
Vishwa May 19, 2008 11:46 am

Cool stuff...thanks a lot.
Marisa June 1, 2008 10:43 pm

How do u, hide your video, but keep the sound?
Nick June 20, 2008 9:22 am

why does the code knock out the banner ad??
angie July 19, 2008 4:55 pm

how do i remove my bart simpsons contact table i added to my profile i don't want anymore. i don't want to hide it i just want to remove it. thanks

Leave a comment

Please be polite and on topic. Your e-mail will never be published.