Teen Checkup | Internet Safety

Part 2: Social Networking Beyond MySpace, Facebook

WARNING: This article may contain some technobabble. Viewer discretion is advised.

In other words, if you have no HTML or CSS experience at all then I’m sorry to say but you’re at least a month away from writing up your own MySpace layout codes from scratch.

On the other hand, if you do have some HTML and CSS experience then here are the basics on how to do this:

First of all –for the uninitiated– MySpace is a social networking site where you can set up your own free home page and through that you can interact with over 100 million other MySpace users. You do this by browsing around their profile pages, leaving comments, sending messages or bulletins, adding ‘friends’ and generally just having a typical web 2.0 chit-chatty good time.

A ‘MySpace layout’ is a block of CSS code that can be used to modify the background, fonts, table borders and other aspects of your MySpace profile page. Although widely available across the net and free for the taking, it seems to me (from the truckloads of emails I get) that many are unclear as to exactly what goes into the making of a MySpace layout.

Officially, a MySpace layout is a hack. The block of CSS code which constitutes a MySpace layout is an embedded stylesheet which, according to W3C standards, is supposed to be inserted in the HTML document head. However, MySpace does not permit it’s users to access the document head of their profile pages. When you install a MySpace layout by inserting the layout code into the ‘About Me’ text box on your MySpace account’s ‘Edit Profile’ screen, you are placing the embedded stylesheet in the HTML document body instead. Somehow, shortly after MySpace’s inception, somebody discovered that, hey, you can jam an embedded stylesheet into an HTML document body and it will still work. Well, to heck with web standards, away we go (and so began an entire industry).

So that’s the long and short of it.

Your MySpace layout code will start out with a set of opening and closing STYLE tags like this:

…in between which will go all your CSS selectors and rule sets used to grab control of and customize all the various HTML elements on your MySpace page.

So now you have this:

css selector {rule set}

And exactly what selectors should you use? Ahh, well this is where the fun part comes in and is essentially beyond the scope of this article. But I can feed you a couple or three pointers to get you started.

Tables From Here to Eternity

The first thing you should know right off the bat is the default MySpace HTML code is a web standards guru nightmare in that it contains about eight bazillion nested tables. Also, be advised that all hash marks (#) are filtered out of user input so using ID selectors is not possible. You can however use class selectors. Here’s a list of some of the CSS class names used in the default MySpace template to help get you started making your own MySpace layout:

navigationBar - MySpace header menu, i.e., “Home, Browse, Search…”

profileInfo - Basic Info table (contains user display pic)

contactTable - Contacting [username] table

userProfileURL - MySpace URL

interestsAndDetails - Interests table

userProfileDetail - Details table

userProfileSchool - Schools table

userProfileNetworking -Networking table

extendedNetwork - Extended Network table

latestBlogEntry - Blog Entry table

blurbs - Blurbs table

friendSpace - Friend Space table

friendsComments - Comments table

Many of these class names were recently added to the MySpace template so consider yourself lucky if you’re just getting into the layout making biz. Prior to this, MySpace layout makers were obliged to fill their layout codes with ridiculously long CSS descendant selectors, such as “table table table table div div”, etc, in order to target specific elements on a MySpace page.

MySpace Filters

With regards to filters, there are a number of other characters besides the hash mark which are automatically filtered out by the Cold Fusion script which processes MySpace user input. The filtering of the hash mark also makes it rather precarious to use hexadecimal color codes as without the required # character, using certain hexadecimal color codes will cause some major malfunctions with the display of your MySpace page. To be absolutely sure your color codes won’t make your page go haywire, you’ll have to use CSS RGB color notation instead, e.g., background-color: rgb(255,255,255).

Here’s a list of everything that I’m aware of that gets filtered out of MySpace layout code:

• Hash marks #
• HTML comments
• CSS comments
• HTML iframe element
• CSS z-index property
• All Javascript

Tips and Tricks

Number one, I highly recommend that you install Firefox (if you haven’t already) and then install Chris Pederick’s Web Developer extension. The Outline function in this extension will be a tremendous help in figuring out the hierarchy of nested tables in the default MySpace HTML code.

And number two, remember that when you use a descendant selector to target nested tables, you’re potentially (but not always) targetting all other tables nested at a deeper level. So for example, if you use ‘table table table {APPLY THIS RULE SET}’, you’re also potentially applying the same style to tables nested four, five and six levels deep. You’ll find yourself doing a lot of ‘undoing’ as you’re writing up your MySpace layout code to make sure that you only apply styles to elements that you intend to apply them to. Hence, it will be normal to have your MySpace layout code filled with a lot of code that looks like this:

table table table {APPLY THIS RULE SET};

table table table table {UNDO PREVIOUS RULE SET};

And that’s about it. The rest you’ll have to learn by just diving right in and mucking about. And don’t forget to check your MySpace page in several different browsers to make sure it looks the same.

Oh yeah and be prepared to go a little stir crazy.

This is par for the course.

:o)

Robert Darrell is the chief cook and bottle washer of the Iron Spider Web Design and Resource Center where he serves up a tantalizing array of tutorials on HTML and CSS.

He also provides an excellent collection of free MySpace layouts and easy-to-use MySpace overlays.