beef.b10g-2.0.0

Like a billion other people on the web, I spend some time on MySpace.Com for various reasons. I maintain a blog over there as well where I post lyrics for songs and such stuff that I have written. I have a couple of band profiles for a few of my projects, and blah, blah, blah.

Anyhow, I thought I would share 5 quick and easy customizations you can make to your myspace profile to make it a little more unique, without having to use some self-proclaimed myspace guru`s ad laden codes.

1. Custom Contact Tile

Everyone has seen em. Some of you have probably googled them and ended up with some cookie cutter contact tile image that 2000 other myspace profiles have on them that fills up the top left corner of your profile with a bunch of spammy ad crap from the provider of the code. Well I am here to tell you, there is no reason for that crap. Making your own custom background image is a piece of cake…

First you will need to either create or find the graphic that you want to use for your contact tile. Remember, for things like this Google Images is your best friend, unless of course you are artistically inclined, in which case, make it completely unique and create your own graphic.

Once you have created or drawn your graphic, you will need to resize it to the correct size. Open the image up in your favorite paint or image editing software and resize the image to 300px wide X 150px high.

You are halfway done! Now, this part is slighly trickier, but still easy nonetheless, as the contact tile image map is fairly forgiving and you don`t have to be exact, just close. So stay in your favorite image editor and now you are going to add the actual links to add you as a friend, etc. The easiest way I have found to do this is to have a browser window open with your profile and just kind of switch back and forth between the two windows to get the links lined up fairly close. Like I said, the image map is fairly forgiving so you don`t have to be on the money, just close.

You now have your happy little contact tile image, so how do you get it from your computer to your MySpace profile? Well, now it is time to do a little style tweaking.

Before we get to that, you will need to make your image publicly accesible on the internet, if you don`t have a hosted site you can drop the image out on, I recommend PhotoBucket, which is a free image hosting service. Regaurdless of where you put your image, all you will need is the URL where the image resides. If you are using photobucket, you can copy this directly from your album page.

So now you have your graphic it is publicly accessible on the net, and it`s time to tweak that profile.

Click the Edit Profile link on your MySpace home. We are going to be adding some stuff to the top of your About Me section. Copy the section of code below and replace _IMAGEURL_ with the actual url to your image.

.contactTable {

   width:300px;

   height:150px;

   padding:0px;

   background-image:url(_IMAGEURL_;

   background-attachment:scroll;

   background-position:center center;

   background-repeat:no-repeat;

   background-color:000000;

}

.contactTable .text { font-size:1px; }

.contactTable a img { visibility:hidden; border:0px; }

.contactTable a { display:block; height:28px; width:115px; }

.contactTable table, table.contactTable td {

   padding:0px;

   border:0px;

   background-color:transparent;

   background-image:none;

}

.contactTable .text, .contactTable a, .contactTable img {

   filter:none;

}

.contactTable .whitetext12 { display:none; }

VOILA!, you now have your very own pimped out contact tile!

2. Transparent Images

This is a really, super easy customization you can make to your profile which adds a really slick look to it if you have the right kind of stuff going on around and behind an image. It works especially well with dark, not super contrasty background images. I will jump right into the code on this one as it is really straight-forward and there is not alot to talk about, just a damn cool css effect you can use on your profile…

Add this section of code between the style tags in your About Me section.

a img {

   filter:alpha(opacity=48);

   opacity:0.5;

   -moz-opacity:0.5;

}

a:hover img{

   filter:alpha(opacity=100);

   opacity:1.0;

   -moz-opacity:1.0;

}

Now any image that is a link on your page will be semi transparent until you mouse over them! Very cool stylish effect for any profile.

3. Backgrounds, Backgrounds, Backgrounds

This is a relatively touchy subject for me, mainly because I have seen some absolutely atroucious backgrounds used on MySpace. There are the ones that are so obnoxious that you can`t bear to stay on the page for more than a couple seconds, and there are the ones that are so contrasty or use so many colors that you can`t read any of the text on the persons profile… This is BAAAAD people! When choosing a background image for your profile it is important to take into account how the rest of your profile is style, are you using a light color for your main font, or a dark color? What is the general color scheme of your profile? etc. etc. If you are going for a dark background, make sure your background image isn`t to contrasty, that is really dark with really bright spots, as this makes it nearly impossible to use any color for your main profile font becuase you can guaruntee that some section of your page will be unreadable due to colors bleeding into eachother. If you are going for a brighter theme, make sure that you aren`t using a background with every color there is blended in closely together as you will run into the same problem. And please, for the love of all that is sacred, please do not use those annoying animated gifs for backgrounds. Not only is this distracting when people are trying to read your page, it is quite frankly the most ugly irritating thing ever thought up to do to a webpage, second to maybe the blink tag in HTML. Once you have selected your background, getting it on your page is very easy. Once again we will be editing in the About Me section of your profile, inside the style tags.

body{

   background-color: black;

   background-image:url(_IMAGEURL_);

   background-attachment:fixed;

   background-repeat:no-repeat;

   background-position:center center;

}

Most of this is pretty self explanatory. But I will go through what they mean anyhow.

background-color: black; You guessed it! This sets the underlying background color of the entire page to be black. You can change this as needed using either a color code, rgb value, or color name ( note: not every color name in the world is recognized, but there is a list of them right here )

background-image: url(_IMAGEURL_); Obviously this is the url to where your image is available on the net. See section 1 for ways to do this.

background-attachment: fixed; This makes the background image on your profile stationary. In other words, when the user scrolls down in the browser, your background will stay put…

background-repeat: no-repeat; Unless you have a damn good reason, I would leave this alone. However, if you really want to use a tiling background image, you can omit this completely to tile both vertically and horizontally, or you can set it to repeat-x or repeat-y respectively.

background-position: center center; This quite obviously is the physical location of your background in the browser. If you are tiling the image and only want it to tile along the right side of the profile, vertically you could change this to top right or just simply right

And hopefully, if you have done everythng right you know have a great background image that compliments your profiles color scheme, your personality, and leaves your profile easy to read.

4. Color those scrollbars!

An effect that I always liked, and I seldom see anymore is altering the appearance of the browsers build-in scrollbars to match the color scheme of your profile. Unfortunately, this effect only works for IE, but when you consider IE is still (unfortunately) the most used browser, you can figure over half of your audience will be getting the full effect.

.body {

   scrollbar-face-color: FF0000;

   scrollbar-highlight-color: FFFFFF;

   scrollbar-3dlight-color: FF9999;

   scrollbar-darkshadow-color: 990000;

   scrollbar-shadow-color: CC0000;

   scrollbar-arrow-color: FF0000;

   scrollbar-track-color: 000000;

}

Once again, as with background-color above you can use hexidecimal color codes (shown in example), rgb color codes, or color names. The best way to do this is to try something, hit your profile and see if you like the effect.

5. The biggest profile killer!

The biggest thing that kills a good MySpace profile is just plain out having too much crap on it. Remove those 8 videos from your biography, and create a regular old text-link to them instead. Prune your comments of people who leave audio or video clips in your comments that automatically start playing. The quickest way to get me off your profile is to have a bunch or random crap come blaring through my speakers unexpectatdly. It is one thing if you have a song on your profile that starts playing automatically, but if you do that and 2 people leave you comments containing videos or audio that starts playing automaticaly, now suddenly you have 3 things bombarding your viewers ears all at once… Nobody likes that…

In summary, keep your profile clean, keep it readable, make it unique, and get all those spammy myspace codes off your page and you will have a personal profile that people will like to look at often.