You just signed up for an account on MySpace, put in all the basic information like the name, school, what you want, who you like. You upped the ante to add a blog, maybe. And yet when you start checking out the sites of other people, you discover that your page is mighty bland when compared to the eye-popping colors and graphics on some people’s pages.
So how, exactly, do you achive this fabulous feat of decorating for your own page?
It involves picking up a nifty and pretty darned simple bit of coding information called CSS (which stands for Cascading Style Sheets.) You’ll need to know a little about HTML to use this tutorial, at least enough to understand how to create a table.
The basic layout for style information is the same. This example would work for one selector. A selector is just the name you give to a particular area of the page. It might be all tables, in which case the selector would be table. If you’re working with a table inside a table, the selector would be table table. In some cases, the page creator has assigned a class, or special name, to specific areas – like the header part inside a table. If a table cell (designated td in HTML) was given a class of head (td class=”head”), its corresponding selector would be td.head.
Confused? That’s okay. It’s one thing to read about it. It’s something else to see how it’s actually written.
GETTING STARTED
In this tutorial I’ll write the coding so that each property and value has its own line. You can write all of this coding on the same line and it will work, as long as all of the elements are included. However, it’s a lot simpler to read when each property and value has its own line, so I opted for clarity. The general style layout looks like this:
selector name {
background-color: abcdef;
background-image: url(http://www…);
color: blue;
}
As you can see from the above example, you type or paste in the name of your selector, then open and close the instructions for the selector with a set of curly brackets {}. Spell out what area you want to color (the single word “color” always refers to text color) and follow that by a colon. Then tell it which color (or the url of the graphic) you want to use, and follow that up with a semicolon.
On a standard html page, a hex color value would be preceded by the pound sign (#abcdef.) On MySpace, however, you’ll just write the six-character number for the color you choose.
SPECIFIC COLOR INFORMATION
Every color is represented in HTML and CSS by a six-character code, known as a hex number or hex value. If you’re not sure what color you want or how to find it, there is a great color resource at http://www.ficml.org/jemimap/style/color/wheel.html, and another one at http://www.twisterjester.net/colorwheel.html. To use the first page tool, hold your cursor over the approximate color in the colored circle, and the hex color chart below shows the code and color at three levels: the nearest Web-Safe color, a Web-Smart color, and an Unsafe color. The second page simply has a bunch of colored boxes and the corresponding hex number.
An “unsafe” color won’t break anybody’s computer. The term refers to older operating systems, where monitors only displayed a maximum of 256 colors (or fewer.) Using an “unsafe” color means for anyone with an outdated version of Windows (or corresponding Mac,) they won’t see the exact color you wanted. They’ll instead see one of its closest cousins, as displayed in the Web-Smart or Web-Safe color example. The differences are generally negligible.
You can also use the word for some colors, as I did near the bottom of the coding. Red, blue, yellow and green will probably work for you, but if you want more subtle color combinations, you’ll get better results by using the hex values.
There are other color helps and tools available online, as well. If you’re trying to match a specific color, there’s a free tool known as ColorCop. It’s a tiny program, with no spyware or viruses attached, nor even something nagging you to buy the new and super-duper version. To use it, just download, install, then drag the “eyedropper” off of the program window onto the color you want, and click once. The small program window will then give you the hex value for that color and display the color so you’re sure you got the right one.
USING THE CODE ON MYSPACE
Once you’ve logged in and are on your home page on MySpace, click on the EDIT PROFILE link next to your profile picture. From the edit page, type or paste your CSS information into the box called Interests:. It should be the first thing in that box. (Don’t worry. Unless there’s a typo somewhere in the coding, nobody but you will be able to see it.)
Start with and end with (I had to add spaces between the symbols so the formatting on AC would post the signs. Take out those spaces when you paste into your MySpace profile.) All of the text coding between those HTML orders will be hidden from anyone coming to visit your page. Anything you write after the line will be visible.
Going back to the code pattern…
selector name {
background-color: abcdef;
color: 123456;
}
…The background-color part of the coding is pretty self explanatory. It’s the color of your background. If you’ll remember, the solitary word color refers to the color of your text. Just replace the ffffff and blue in the code with the hex numbers you prefer.
PICTURE THIS
Adding a background graphic involves another step. Your graphic has to be uploaded to the web, and on a site that permits remote linking.
Don’t know what “remote linking” means? If you’ve ever gone to a page where the whole background is some funky message saying “DomainName.com” or something comparable, it means the background image is on a website that doesn’t allow remote linking. In other words, you can’t pull up an image except on one of their own hosted pages. If you don’t have a paid website where you can store your images, you can upload an image to your picture gallery on your MySpace page and it should link fine from there.
A lot of ISPs (Internet Service Providers, like Earthlink, MSN and so on) provide webspace as part of your service with them. ISP-based pages almost always permit remote hosting.
There are a few free web space options that allow remote linking, too. Speaking from personal experience, they almost all fizzle out sooner or later and you end up with the dreaded “DomainName.com” images mucking up your page (or just lose the picture altogether.) Your best bet is probably to upload to your MySpace page and link to that. If MySpace images are out of commission, the whole site will be down.
Once you’ve found your background image of choice and it’s uploaded somewhere that allows remote linking to MySpace (or is on MySpace,) you’ll want to make it show up on your page. The next step is adding a line that specifies where your background image resides, and telling browsers to display it as a background to your selected area:
selector name {
color: ffffff;
background-color: ff0000;
background-image: url(http://www.yourdomain.com…);
}
In the above example, replace http://www.yourdomain.com… with the URL to your uploaded picture. (Right-click on the image and view properties to find the URL.)
MISCELLANEOUS
CSS allows you to add borders, double borders, dotted borders and so on. It will let you decide if you want your background graphic to tile (repeat all over) or if you want it to stand as a single background graphic in the middle of the page (or top left, etc.) CSS can decide whether you want your MySpace background to scroll, in which case the background image moves and will eventually scroll out of sight on a long page. Or you can tell it NOT to scroll, in which case everything else will seem to float over a stationary image. You can even color the scrollbar on Internet Explorer!
Some of those options won’t work on MySpace, and some work differently depending on browsers. Once you’ve got the basics down, it’s simple to look up CSS border property information, along with scrollbars, etc., on search engines. I’ll leave those for another article, another time.
FINDING SELECTORS ON MYSPACE
With MySpace, you need to know the names pre-assigned to their selectors, then specify your colors and images according to the basic CSS pattern. Once you’ve got all of that figured out, add the coding to the Interests section of your MySpace profile, making sure you open with and close with . Remember, even though the selector names may vary, you’ll use the same general layout for each selector. So for all of your MySpace selectors, you’ll write out your information in this format:
selector name {
background-color: 681C36;
background-image: url(http://www…);
color: FFFDED;
}
selector name 2 {
background-color: FFFDED;
color: 681C36;
}
selector name 3 {
background-color: 112233;
background-image: url(http://www…);
color: aabbcc;
}
Just make sure all of your color/selector information is between the and portions. The text you want to actually show in the Interests box should be entered following that style code.
Some of the specific selector names for different areas on MySpace are:
- GENERAL
body – The background and color for the whole page. It might not show at all, depending on how you decide to treat the rest of the page. All tables and text are in front of the body area.
table – This selector colors all tables on the page. It is better to skip this one and focus on the specific areas.TOP OF PAGE
div table – The area that includes the banner ad, the row of links saying “Home, Browse, Search [etc.] and everything above it.
div table table a.navbar – The text links in the navigational area at the top of the page – the part saying, “Home, Browse…” etc.
div table table – The navigation links table and the area that says “help” and “sign out”
table table table table div – This really isn’t just the top area. It includes the “MySpace URL” link area; the “Online Now” and the empty space beneath all of your friends’ photos in the friend space and comments areas.TEXT
.nametext – Your name as it appears above your profile photo.
.text – Name, location and age
table table table td.text – The text to the right of your main profile photo
.whitetext12 – This is the header text on the left set of tables, like “[your name]’s Interests,” “Contacting [your name]” and so on.
.blacktext10 – The time/date stamp on each comment in the comments area
.blacktext12 – The text saying “[person’s name] is in your extended network” in the top right
.lightbluetext8 – The lefthand area of the interests and general information table, the area that lists the details of music, heroes, general, etc.
.orangetext15 – This is the subheaders on the right, including “About Me,” “Who I’d Like to Meet,” [your name]’s Blurbs,” “[your name]’s Friend Space”
div div – The bottom row of links, just above the copyright
.btext – This is the row of text telling how many friends you haveTABLES
table table table – This will select all of the tables on the page, left and right side.
table table td.text table – Using this selector will apply a single set of attributes to the whole right portion of the page – all the tables and subtables, to be more specific.
table table td.text table table – Using this selector will apply whatever you choose to all of the tables and sub-tables on the right side, below the line that says “[your name]’s Blurbs”
table table td.text table td.text table – Affects your friend space and comments
You could almost certainly break things down further, but for most people this is more than enough to get you started.
One note: you will NOT be able to change the text links in the “Contacting [your name]” section. Each text link in that section is actually a graphic, integrated with the icon to its left.
