Monday, November 12, 2012

MBM3 revisited!

It's been a while since I paid a visit to the 'new' versions of the MySpace homepage...

As a proud owner of the UK/Artist's version of the MySpace homepage, I've been lucky enough to have been able to hold on to my 'classic' layout - you know? the one that they had BEFORE they put that second column there...? Over the months since I first published my MBM ("Minty Blue Minimalism") Stylish script on, I've honed and refined my own 'v2.0' homepage beyond all recognition, making for a very comfy MySpace...

...except that most of you will now be using regional variants on the 'v3.0' homepage, which is completely different to mine. Some friends were baffled by their homepage background changing colour several times in a twenty-four hour period, which suggests to me that the elves of Timberlake Towers have been toying with ways of turning this real estate into advertising space. Customize YOUR homepage by using Stylish and you make sure you only see what YOU want. I first addressed the subject of styling the 'new' layout on this blog, but here's a little revision for anyone who's forgotten all that. You first need to equip yourself with the following:-

1) The right browser - Firefox is my first choice, but this also works with Google Chrome if that is your preference.

2) The STYLISH plugin - Visit the homepage and click on the appropriate link to install the Stylish plug-in for your browser. Then...

That's the simplest method, if you want something 'straight out of the box'. Of course, after you've been reading these blogs a while, you'll be able to customize the page exactly how you want it!

The latest script - Let me talk you through the newest changes. The "general" @-moz-document domain( part of the script is pretty much unchanged since last time. This applies changes to all the pages across the MySpace domain, so there are still sections to hide the ugly footers and all those 'recommendations' that don't interest you, lines to remove the advertising space from profile pages, some font fixes to aid legibility (don't you just love those tiny grey-on-grey blocks of text they have now?) and a bit that cleans up the log-in screen so that you don't get bombarded with plugs for the latest pop sensation that they want you to care about. Used in cahoots with our old friend AdBlockPlus, it is possible to strip the page down to what YOU need and nothing more. In and out of your homepage and straight down to business!

As I say, this part of the script has pretty much stayed the same throughout all those months of experimentation. But now we come to the part that applies changes to the homepage only, the section labelled @-moz-document url-prefix(''). This is where it gets interesting! Because there are in fact a number of different versions of the 'v3.0' homepage - one for 'musicians' here in the UK, a slightly different one for US musos and a different sort again for all you 'civilians' (itself having regional variations) - then I have TRIED to include something for everyone. There are parts of the script that may need to be disabled on certain versions. I have indicated in the script which bits are specific to the version I'm using and which ones apply to everyone. These 'instructions' are indicated by lots of non-markup characters and hash-tags, like so /* #####SPECIFIC TO UK/ARTISTS HOMEPAGES?##### */

Since I last tackled this homepage, I have done some work on the background. The featured texture is one that I found on a Free Desktop Wallpapers site (sorry, I can't remember which one it was, or I'd put a link here). I'd previously used it as the background for some PowerPoint slides I was designing. The blue-fading-into-pink colours matched very well with the shades of blue that I already had on my existing "MBM" layout, so I borrowed it for this purpose as well. I managed to solve the problem of the 'big white boxes' that still showed behind the stream container, by filling those with the background picture as well. Other page elements I was able to hide by filling them with RGBA colors with zero alpha values. Some I've made semi-transparent using alpha values of 0.5 or less, like the container around the profile name and stats, eg;
div.wrapper {background-color:rgba(0,0,0,0)!important;}
#col1_0.column.column0.columnPath1_0.columnDepth1.firstColumn.allowDrop {background-color:rgba(255,255,255,0.3)!important;}
The other spiffy new feature that you will notice is that the page's main toolbar is no longer a rather dull flat black colour. Using the decidedly non-universal moz-linear-gradient method of applying a background image, I was able to give it that shiny blue effect more in keeping with the rest of my scheme. The box shadow sets off the 3D effect nicely. These gradient fills are somewhat problematic as, in real life grown-up's web design, you usually have to include different versions of the CSS for different browsers. But as we are designing something here that will only work with Firefox, that needn't concern us. I have included (but disabled) another couple of versions here, in the hope that one of them will work with Google Chrome, should that be your browser of choice. Just remove all the underscores ( ___ ) before where it says background-image: to re-enable these parts of the script.
header#globalHeader {
___background-image: linear-gradient(bottom, rgb(2,56,97) 20%, rgb(0,101,253) 60%)!important;
background-image: -moz-linear-gradient(bottom, rgb(2,56,97) 20%, rgb(0,101,253) 60%)!important;
___background-image: -webkit-linear-gradient(bottom, rgb(2,56,97) 20%, rgb(0,101,253) 60%)!important;
box-shadow:0 0 12px rgba(0,0,34,1)!important;
Another another thing I have done this time 'round is to 'fix' the default font for the page. Usually this is ARIAL, but I'd noticed that the character spacing on the stream and comments looked a bit messy at times on this version of the MySpace homepage. I've taken the liberty of making the default font on my version of the homepage CALIBRI. This is a much nicer looking font that comes with Windows Vista and Windows 7. I do recognise that this is not 'universal' though, so users of other platforms might like to to experiment with something else. Remember, these Stylish scripts only affect what YOU see on YOUR browser, so you can use any font that you have on YOUR computer. Pick one that you find easy on the eye. If in doubt, stick with Arial!

What I HAVEN'T done - I haven't quite got the little friend selector button to appear as I want it. There are still ugly vestiges of MySpace greyness visible when you hover over the button, plus I haven't quite decided on the best size to make the font (specifying a font size for the button also affects the font size on the dropdown menu!). But I believe that this is one feature that doesn't appear on every version of the page, so I won't dwell on it too much. I would also like to include a script that makes the 'stream' half of the UK/Artist's page the default. Everytime you refresh the page it goes back to that (fairly useless, to my way of thinking) 'stats' page instead. If anyone else has any ideas for achieving this just using the tools available (ie; no JavaScript or serverside solutions, please!), then do let me know...

Ah! but maybe next time... Once again, here's where you get the existing code. Have fun with it!

No comments:

Post a Comment