Customise MySpace Part 1 - Extended Network Banner
October 24th, 2006
Please note that the images in this post are currently missing due to a move in domains - I’ll get them back ASAP or advise that they are gone forever.
For some reason and I’m not entirely sure why on MySpace they have a 435×75 box with the words “yourname is in your extended network”. This stands out straight away and takes up valuable screen space. In this quick guide I’ll show you how I’m customising this section and taking back this real estate.
A number of people have recognised the value in having a MySpace site in conjunction with their ‘normal’ website. It’s a marketing extension that allows you to take advantage of the extended network. Mmmmm maybe that’s why those words are there…nope you’re still got to go - sorry Tom!
The websites that I’ll be working with are www.quietpaws.com and myspace.com/quietpaws. Fortunately I know the owner and she’ll cut me some slack whilst doing this so I can make future revisions. Normally when skinning a MySpace page I would make an overall look and feel master image to work from but for the sake of these guides I really just want to focus on the smaller changes that you can make yourself. If you visit the site in the future and it’s all different you’ll know why!
If you take a look at QuietPaws you’ll notice it has an obvious style and uses the ‘paws’ imagery as it’s flourish. We’re going to use the main graphic at the top to create a banner that people can see so they know to visit the main site from it’s Myspace cousin.
First off we already have the dimensions 435px x 75px. My web graphics program of choice is Macromedia Fireworks (now Adobe). So straight away I’m setting up a blank canvas in those dimensions. One of the things that is good about the standard MySpace page (and I assure you there isn’t that much that’s good!) is it’s plain colours. Anything we do here now won’t really look that much out of place.
I’m not going to go too much into what makes a good banner here because I’m really more concerned about how we get it onto MySpace. It is fortunate though because I did the design on QuietPaws I’ve got access to the source files and images etc.
Here is the design I’ve gone with.
Now how are we going to get MySpace to deal with this?
We’re going to insert some CSS code directly in the ‘About Me’ section in MySpace. The code itself is fairly straight forward though MySpace does do some weird things such as
strip out # in any colour descriptions. At any rate the code you use is:
table table table td { !important;} span.blacktext12 { color:transparent; visibility:visible !important; background-color:transparent; background-image:url(”http://www.yourwebsite.com/images/banners/yourimage.jpg”); background-repeat:no-repeat; background-position:center center; font-size:0px; letter-spacing:-0.5px; width:435px; height:75px; display:block !important; } span.blacktext12 img {display:none; }
table table table td { !important;} span.blacktext12 { color:transparent; visibility:visible !important; background-color:transparent; background-image:url(\’http://www.yourwebsite.com/images/banners/yourimage.jpg\’); background-repeat:no-repeat; background-position:center center; font-size:0px; letter-spacing:-0.5px; width:435px; height:75px; display:block !important; } span.blacktext12 img {display:none; } table table table td { !important;} span.blacktext12 { color:transparent; visibility:visible !important; background-color:transparent; background-image:url(”http://www.yourwebsite.com/images/banners/yourimage.jpg”); background-repeat:no-repeat; background-position:center center; font-size:0px; letter-spacing:-0.5px; width:435px; height:75px; display:block !important; } span.blacktext12 img {display:none; }
Remember of course to change the background-image url to whereever you host your image.
Take that code and cut and paste into the about me section in MySpace:
And all done!
becomes
Popularity: 17% [?]
Categories: Web Design | Tags: extended network, macromedia fireworks, myspace, myspace page | 1 Comment
