I saw this one often in the MySpace forum lately. It’s a shame that you have to look a video on “how to do that simple thing” (a shame for the usability of MySpace!) but I made this little tutorial anyway… At least it helped a couple of persons on the forums!

How to change your default pic

So you made a layout or you took some code here and there and your layout has some problems. Well this first tutorial on how to “Debug your layout” will focus on investigating the CSS that can have an impact on the elements that you wish to debug.

In this tutorial you’ll learn :

• How to view the HTML source of an element
• How to view the CSS that is modifying a selected element
• How to modify CSS for a selected HTML element without HTML code manipulation and without reloading the window

Get FireFox and FireBug

First, you’ll need to use Firefox (it’s another browser like Internet Explorer) and the FireBug extension for Firefox (it’s a plug-in for FireFox that helps debugging HTML layouts). You can download those two programs there :

• Firebug extension for FireFox

(note : these two programs are 100% free !)

If you still have trouble installing FireFox, read this really nice and basic tutorial on how to install FireFox

FireBug basics for inspecting your MySpace profile page

After the installation of FireFox and FireBug, you’ll have this little icon at the bottom right of FireFox :

Just click on it and it should bring up FireBug. It will look similar to that :

In this first tutorial, we will focus on the “Inspect” button and the “HTML thumbnail” of Firebug as illustrated in this image :

First, we will experiment with FireBug. Go to any website (or, for the purpose of the tutorial, to your MySpace profile page), open Firebug, click on the “Inspect” button and move your mouse on your MySpace profile page. You’ll notice that the FireBug “main window” highlight the HTML source of the element that is just under your cursor. That’s some kind of “quick focus” on the HTML source of the element that you want.

FireBug and HTML elements

Now we know that we can move our mouse over stuff, but lets get a little farther… While you are in the “Inspect mode” (you just clicked the Inspect button and you can move your mouse over stuff and get the HTML in Firebug’s window), choose an interesting element in your MySpace profile (or anything really… an image, a text, whatever) and click on it. If it’s a link, it won’t bring you the page of the link because you were still in “Firebug’s Inspect mode”. Look at Firebug’s “main window” and you’ll see that the source of the element you clicked is selected.
Here is a little image to illustrate the steps so far :

For the example, I used MySpace home page, so all the tricks here are also good on any HTML web page, not only your MySpace profile ! ;). Anyway, so you see that the blue box here is a DIV, with the id “splash_greybox” (grey box? it’s blue!!)… So it’s some kind of magic “focus the HTML source of the element that I clicked in all the site’s source”… or something like that

FireBug, CSS styles and “on the fly” modifications

The coolest option of Firebug is that you can see not just the HTML source of the element, but all the style sheets (in the little right window) that transform the element. You know what’s more hot than that? You can add, remove, edit CSS properties on selected elements on the fly and see the result without reloading the whole page ! It’s so cool that it’s a tool that a lot of web designers and developers are using (I’m using it at work !).
Here is a little example :

You can see here the CSS elements of the little blue box I clicked earlier. I also disable on the fly the “background-color” property to see what whould happen. So here is what you can do with the Firebug CSS window (the little window on the right) :

• Disable a css property : Just like I said (you are not listening? :P), just click on the left of the property that you wish to disable. You’ll see a grey icon, and when you click it will be red and will stay there.
• Add a property : To add a property, right click on the class/id you where you want to add that property and click on “New property…”
• Modify a property value : To modify a css property, simply click on the value of the property in the CSS window and you’ll be able to change it. Press ENTER and you’ll see what are the impacts of the change.

FireBug final CSS explanations

Ok, so you can modify an HTML page on the fly without having to reload the Window… You can test modifications on your own MySpace profile without having to edit your “About me” section and saving all the stuff… Isn’t that great ?! Now, here are some final explanations of the CSS window. If you see a “strikethrough” element in Firebug’s CSS window, it means that it’s not applying the CSS property because another CSS property has the priority over it. Also, you can see where is the CSS coming from (is it a file, from the page directly?). You’ll see this over the CSS declarations, it will have the name of the file it’s coming from or if it comes from the page directly, it will have the name of the HTML page. So you’ll be able to find quickly where the “bad css” is coming from if you have a profile with graphic problems, if you are using a lot of codes or if you wish to debug your own layout !

According to this news, MySpace will be offering games in January ! So we’ll be able to compete (and chat in some or all the games) against each other at games.myspace.com ! I can’t wait to play chess, poker or other cool games against other MySpace users !

Again, in the article, they say that you’ll also be able to embed games into your profile… AND, the article also talk about the company (the one that will make the games) and that it will also provide a “toolkit” (toolkit is normally a “program” that helps developers making some kind of other programs, in this case to make games), so if it’s the case, I’ll probably be able to make you some cool games too !

If this tutorial is too basic for you, be sure to come back in a couple of days to see my next tutorial on how to debug your HTML layouts (for advanced users).

Basic HTML Part 1

You can use all those tricks when you write text into your profile on MySpace.com or when you write comments (unless the person that you write the comment to disabled HTML ). Of course, you can also use those tricks on all the places where you can write an HTML document.

HTML Tags : A simple definition

A HTML tag is simply a “special text markup” that changes how the text after or between it is displayed.

There is two “familly” of tags, a loner and a tag with a BODY. A “loner tag” is a tag alone like <br>. It just sits there and doesn’t need to be closed. Buy the way, a BR tag is just a “Break Space”.

The tag with a BODY is a tag that needs to be closed and will affect the text between the opening of the tag and the end of the tag. For example, if I write <b>hello</b> in a HTML document, the HELLO text will be displayed in bold. So the <b> is the opening tag, and the </b> is the end tag. So B is a tag that needs to open and close. If you don’t close it, all the following text will be in bold !

BOLD

To make a text in BOLD just put the text you want to be bold between “B” tags like the following :


<b>this text would be displayed in bold</b>


This code gives : This text would be displayed in bold

ITALIC

To make a text appear in italic, just put the text between “I” tags like this :


<b>this text is in italic</b>


This code gives : this text is in italic

BREAK

To force a “enter” (or break space), just use the tag BR like this :


This line should be displayed <br> on two lines if it is in a HTML document !


This code gives :
This line should be displayed
on two lines if it is in a HTML document !

Links and tag parameters

To make a link, you need to know what is a “tag parameter”. Lets say that the tag “superman” exists. It doesn’t, but lets pretend it does… So if I use <superman> in a HTML document, it does something (it’s up to your imagination). So if you see <superman cape=”red”>, then CAPE is a parameter of the tag SUPERMAN, and RED is the value of the parameter CAPE.

Superman, cape.. red.. What the hell am I talking about ?!… Okay, anyway, to make a link on a text, you would use the tag A with the parameter HREF (HREF is an acronym for Hypertext REFerence by the way) . The VALUE of the HREF PARAMETER should be the url of your links.

You’re lost ? Me too !! Okay, lets make an example…

Lets say that I want to make a link to MySpace.com but I want the site to be displayed when I click on the text “My favorite website”. So I’ll need the HREF PARAMETER of the A tag to be http://www.myspace.com (just like in the browser URL bar)

So, using the A tag with the HREF parameter, the code you need to use is :


<a href="http://www.myspace.com">My favorite website</a>


This code gives : My favorite website

So that’s it for the first basic HTML tutorials. I’ll make an advanced tutorial soon, on how you can debug your layout ! So if this tutorial is too “Newbie” for you, check back in a couple of days for the following tutorial !

Hi. I made a decision about my layouts and I decided to remove all the ad links that were pointing on this site when you used one of my layout. So, all my layouts will not contain any advertising (unlike a lot of layout websites out there) !! Some websites are displaying big ugly flashing buttons or links that points to their website when you use one of their layouts… that just make the layout ugly !

Finally, I just hope that it will convince you to use one and tell your friends about this website ! And don’t forget to give me some feedback about layouts… Do you like fixed layouts or layouts that doesn’t remove MySpace functionalities ? What is the best MySpace profile page out there?