Example 0: General comments and demo for incorporating changes to your MySpace Profile page

Hi,
I'm one of the graphic developers for this website (GreatWebLayouts.com). I'm not a super-duper MySpacer, but I do have a MySpace Profile page and I have made a few changes to make the look of my MySpace reflect my tastes in colors and the image I used as my background. These code examples below will only change the look of the MySpace Profile page that you see at your www.myspace.com/yourURLname.

How do I find my MySpace URLname for www.myspace.com/yourURLname??

Log onto your HOME page at www.myspace.com. On your MySpace HOME page look down on the left hand side to where your URL and BLOG names are listed.


Please note the edits (changes) that we will discuss will not change the look of the MySpace HOME page that you arrive onto when you log into MySpace at www.myspace.com. These changes will only effect the profile page that you and others will see at www.myspace.com/yourURLname.

These notes are for someone who does not really want to learn all the HTML needed to make changes to their MySpace Profile page, but for someone who just wants to do it short and simple. I will do one change at a time in each example.

I suggest you save each of your changes in a new file (so that if you dislike a change then you can go back to the previous change and start again). If you are not comfortable with choosing filenames, a good way to start would be to use a filename of the form date_example_version.file_extension, such as 12_21_2006_Example1_v1.html — the extension could be .html, .doc, .txt and so on depending if you are using HomeSite, Notepad, Word or some other editor in which to type and save your code.

I do my CSS/HTML coding in HomeSite or DreamWeaver because I can use tools that come with these products to help me debug when I make errors. But if you just want to cut and paste from my examples, then working in NotePad or any other text editor would be fine.

Every MySpace profile page is coded using cascading style sheets (CSS), HTML, text, and images. It is wonderful that MySpace used CSS because that gives us the "hooks" to make changes to how our profile pages are rendered (how they look in a browser).

A couple of things before I start:
First, to change the look of your Myspace profile page you have to edit your MySpace profile. To do this:
    Be logged onto your MySpace Home page at www.myspace.com.
    Click 'HOME' (at top of the page) to ensure you are on your main MySpace page.
    Click 'Edit Profile'. This is in the left hand box that has "Hello (your name)".

Second, on your Edit Profile page ...
You will cut and paste the code to change your MySpace Profile edit page into the box called "I'd Like To Meet: ".
This is the second box down on the right side.
Note there are other areas you can enter code into, but right now we're just after a short, simple way to make changes.

In my text below I am going to use the words "the BOX" to mean the box on the Edit Profile page called "I'd Like to Meet:".

Third, you can type the code right into the BOX, save the edited page, and immediately change the look of your MySpace Profile page.

The problem with this approach is that we often make mistakes when typing. So you really want to save the code in a file on your computer first, then copy it into the Box.

Also, I have several photos that I like as MySpace backgrounds. I change the color of the font to one that works best with each background, so I have saved the code for each of these 'looks' in their own files on my computer. That way I can change my MySpace Profile page look with no more work than deleting the code I have entered in the BOX, copying in new code, reviewing my changes, saving my profile edits, and enjoying the new look of my MySpace profile page.

You will use the Preview Profile function on the Edit Profile page to preview changes you have entered into the BOX. The Preview Profile page offers you the chance to return and make more edit changes or to Save. I have found when I add a background image that the MySpace Profile page shown in the Preview Profile rendering of my changes may look different from what my MySpace Profile page will actually look like. So I suggest that once you save your profile edits, take a look at your www.myspace.com/yourURLname right away to make sure you are happy with the changed look of your MySpace Profile page. Remember, once you save profile edit changes, everyone who comes to www.myspace.com/yourURLname will see your new look. If you really hate the 'new' look, go back to the Edit Profile page, change the code, preview and save again. I had one mixture of orange background and orange font color that looked like a nightmare when I got done. It was late at night, so I just deleted everything out of the BOX, saved and made my MySpace Profile page vanilla again until I got a chance to redo it.

OK, let's do it. Let's make a simple change just to get a 'feel' of editing.
Here's the code, but read on before you cut/paste this into your MySpace Profile edit. 
Example 0: <nff code="layout">
<style type="text/css">
.code { GreatWebLayouts for myspace}
</style>

<style type="text/css">
table, tr, td, li, p, div { font-family:tahoma; font-size:30px;} 
</style>
</nff code="layout">
Before you would enter this code you should ask, what is this going to do?

Example 0 will change a lot of the text on your Preview Profile page to a large font.

After we've see the results with the large font, we will edit this Example 0 code in the BOX, change the font-size:30px to font-size:3px, preview again and see that the large text is now small.

We will exit without saving this code; hence your profile on www.myspace.yourURLname will not be changed.

So let's do it:

1) Log onto your MySpace Home page (www.myspace.com).

2) On your HOME page, click 'Edit Profile' (in the left hand box that has "Hello (your name)".)

3) Find the BOX (text entry box called "I'd Like To Meet: ").

4) If you had any code previously entered in the BOX then copy and save it somewhere (such as a Notepad or Homesite file). We will discard the code in Example 0 once we have played with it. Later Examples build on each other, but Example 0 is just to give you a feel of how to make a change to your MySpace profile page.

5) Next copy the Example 0 code into the BOX.

6) Click Preview Profile.

7) Note that for the code from Example 0 changes the font size to large (font-size:30px;) for much of the text.

8) Click the link "Return to Edit Interests and Personality". (The "return to edit link" is above your Name section on the Review Profile page and to the right of center.)

9) In the code that you copied into the BOX change 30px to 3px. (Be careful not to delete the ;} after the 30px).

10) Click the link Return to Edit Interests and Personality. (The "return to edit link" is above your Name section on the Review Profile page and to the right of center.)

11) Click Preview Profile.

12) Note that text that was large before is now small.

13) Click the link Return to Edit Interests and Personality. (The "return to edit link" is above your Name section on the Review Profile page and to the right of center.)

  • In our discussion above we made changes to line 7) which is "table, tr, td, li, p, div { font-family:tahoma; font-size:30px;} ". We changed 30px (at end of that code line) to 3px.

    We previewed our changes, noticed that some but not all of the text became larger and then smaller when we incorporated the 3px into the code in place of 30px.

    The reason only some of the text changed size is because ""table, tr, td, ..." is addressing only the main table.

    Every Myspace Profile page is made up of many nested tables. We changed the font size of text rendered in the table on that page identified by "table, tr, td, li, p, div ". In later examples you will see other tables on your MySpace Profile page identified in other ways such as "table table table td". Don't get caught up in this at this time, but if you really want to jump in and learn, then grab books on CSS, XML, and HTML. It is interesting stuff.


All the lines (1 through 10) are like a template we will use again and again so let's discuss this code:

Here's that code that you entered: 
1) <nff code="layout"> 
2) <style type="text/css">
3) .code { GreatWebLayouts for myspace}  
4) </style>
5)
6) <style type="text/css">
7) table, tr, td, li, p, div { font-family:tahoma; font-size:30px;}   
8) </style>
9)
10) </nff code="layout">
Line 1 and line 10 are a wrapper tag. The "nff" are my initials. replace "nff" with your initials or a short word but no special characters in place of "nff". But replace "nff" with the same in both places.



Line 2 and line 4 are opening and closing tags for CSS (cascading style sheet) rules. You will see these opening and closing tags again and again. Such as in line 6 and line 8. Line 3) change "GreatWebLayouts for myself" to your own alpha/numeric words

Here is a TOP HINT to always remember. Whatever text you enter to replace "nff" and "GreatWebLayouts for myself" will not show up on your MySpace Profile page, but can be seen on the source for the page. In fact, once you save your edits, everything that you enter into the BOX can be viewed by the whole world if they view the source code for your www.myspace.yourURLname.

Source code is the HTML and CSS code that creates a page. To see this code in an IE browser, click View on the browser toolbar, then click Source. View source is what many of us do when we see a neat web page and want to read what HTML and CSS was used to create the page. So I suggest you do not use your real name or other identifying text unless you want people to contact you.

Line 7 is what we changed in Example 0. change 30px to other font size for testing



What to do if I changed "nff" to my initials and it does not work now??

First I would check to make sure you changed both 
<nff code="layout">  
</nff code="layout">
to be the same such as: 
<happyme code="layout">  
</happyme code="layout">
If still not working make sure you did not remove any of the needed characters like the "/" in front of your initials for the ending tag (line 10).
If it's still broken, either continue to debug (look for the error) or repaste in the original of this code.

For short code like this, when it breaks I like to use the compare file feature of MS Word to help me spot changes that I made that might have broken the code. To do this you have to save the original version of the code and the next version in separate files on your computer. It is always a good idea to save your latest working code in a file, then copy it into another file (which has a different filename) and edit the copy.




The ending for Example 0 is to quit without saving the edit to your Profile. (And remember to copy back in any code that was in the BOX before you started making changes.)

If you did save the above changes into your MySpace Profile and you want to remove them then return to the edit your MySpace Profile and in the BOX either:
1) delete everything in the BOX and resave your MySpace Profile, or
2) copy back in whatever had been in the BOX before you made these changes and resave your MySpace Profile.

Please click here to go onto Example 1. In Example 1 we will add a background image to our MySpace Profile page.

If you want to receive an email when I add more help text then click the Subscribe button on the home page of www.GreatWebLayouts.com.