<style>
body div table tbody tr td div select {filter:alpha(opacity=0);-moz-opacity:.0;opacity:.0;}
</style>


Aaaah, I love MySpace

Oh, and be sure to visit the code section, I added some more code last week.

MySpace Resources

Skeedio.com
There is 32 layouts and 20 graphics for MySpace there. All free and this site is really clean !

Ego-box
Some layouts and a lot of graphics/glitters there !

Banner Queens
There is a lot of MySpace stuff there : Graphics, banners, comments, layouts, contact boxes, div layouts, glitters … name it, they have it !

MySpace news

Mashable.com
That’s the only website you need to bookmark for news about MySpace, that’s simply the best ! And there is also some free MySpace resources there !

Movies

YouTube.com
Of course you know that site ! You can also take the movies that you like and put them on your profile page !

Free Photos and pictures

FreeDigitalPhotos.net
There is some great images there ! (If you use a picture, you must place a link to their website)

MorgueFile.com
A LOT of free images there ! (no link required)

Wikimedia.org
Just like WikiPedia, but for Media… so it’s… That’s right, WikiMedia… Ok, so, you can search for “icons” there or “smiley” and you’ll find a lot of great stuff !

IconArchive.com
A lot of free icons there. Just be sure to read the licenses of the icon pack that you want to use, each one can be different.

Proxies

Proxies are mainly used to browse websites where they are not accessible or blocked.

Guardster
It works great for browsing MySpace.

PorxyAnonymizer
It works great to browse and use the functions in MySpace.

FireFox extensions

FireFox extensions are used to debug your profile if you are using codes or layouts, to browse into MySpace or to gather informations about a web page or information about the medias used in a page. You don’t have firefox? .

FireBug
Great tool to debug your layout that doesn’t look like what you imagined . I also wrote a tutorial on how to use FireBug.

Web Developer extension
There is a lot of options there. You can see the size of your page, of each images in your page, you can resize your browser for the resolution that you want to test your profile… it’s worth the price (free) !

Toolbar MS
It’s simple, but really effective. It’s a toolbar with a lot of shortcuts when you are on MySpace like going directly into your Inbox for messages, shortcuts to blogs and there is also nice functions like messaging the person for which you are visiting the profile. You can also remove custom layouts so you can really see “basic profiles”.

File hosting

You can upload your pictures (or other stuff) there for free and use them on other websites (like MySpace of course)

PhotoBucket.com
Well known file hosting service. It always worked great for me.

MySpaceFileHosting.com
Great service I just discovered by looking on Google. It works great to upload a picture quickly, but you’ll get a link to an HTML page containing the image instead of the image link… You can get the image link on the HTML page if you copy it though.

MediaFire.com
Really nice service. They make you a thumbnail so you can point on a bigger version of the picture. In this “big version”, there’s options like “email this” and “share by IM”.

Mp3 player generators

You want to put one or more mp3 and a player on your profile ? Just use those websites !

PlayListSpace.com
It’s a really simple website but it does work really well too.

MyFlashFetish.com
You can really customize your player here. You have different look, color and you can have one or multiple songs on your players.

Final words

Well that’s it for my first “Resources” list. We’ll see if it’s popular enough to change it into a whole section. Also, if you think that I forgot a category or a nice website, please tell me in the comments ! Thank you !

Oh… And hopefully, those t-shirts won’t support animated gifs that make the epileptics angry

How to change your default pic

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 !

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 !

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 !

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?