Monday, January 16, 2012

Minty Blue Minimalism #12 (2012/01/16)

First published... HERE!
The MySpace homepage just got a little bit BLUER!

- I'm happy to report that the latest FIREFOX updates (Version 9.0 already?!) have not presented any compatibility problems with my existing plug-ins, especially STYLISH. Firefox 9 also has some spiffy new features which I'll leave you to discover for yourselves.

- I'm ALSO happy to report that I haven't yet been forced by MySpace into a situation where I have to "upgrade" to using the new 'MBM 3.0' version of the STYLISH script. I'm staying with the 'classic' homepage layout as long as we are given a choice! Therefore I'm still on the 'old' version 2 of the MBM script, as are a number of my English compatriots. Today's little tweaks would (probably) also apply to the new version however, so this is for all of you. As ever, feedback welcome!

A NEW YEAR, A NEW BACKGROUND... As you can see, the Minty Blue Minimalism has now become a shade EVEN BLUER.

I've finally succeeded in turning that dull black menu bar into a nice shade of navy blue (just like it USED to be - remember that, eh kids?). The other new feature I've introduced is to add an OPACITY value to the main body of the page, so that the nice watery texture shows through slightly in a "reflections in a swimming pool" sort of way.

Here's the URL for the 'swimming pool' background:-
http://1-background.com/images/water-1/water-blue-water-tile.jpg

...and here's the new bits of code to paste in - somewhere near the top of the @-moz-document url-prefix('http://www.myspace.com/home') section:-

div.wrap {opacity:.85!important;}
#globalHeader {background:rgba(30,30,120,50)!important; box-shadow:0 0 12px rgba(0,0,34,1)!important;}

FIRST OF ALL THAT MENU BAR... For some strange quirk of a reason, I had previously been unable to colour in the "Global Header" using my customary hexadecimal RGB values (you know - all that {background-color:#000080!important;} stuff!). I've stumbled over the fact that you CAN re-colour it if you use the four-channel, 256-increment RGBA color space code instead. RGBA stands for RED/GREEN/BLUE/ALPHA, where the 'Alpha' channel is usually a value for colour depth or transparency/opacity. I have no idea why this would work on MySpace when the 'old' method didn't, but there you are. That's MySpace for you...

#globalHeader {background:rgba(30,30,120,50)!important; box-shadow:0 0 12px rgba(0,0,34,1)!important;}

So, rather than the R, G and B having values from 00 to FF (1 to 16 (x 16) = Hexadecimal - geddit?), each colour now has a number from 0 to 255 (because there are 256 possible values for each). They are separated by a comma.

You will also notice there that I've added a line to let you control the depth of the box shadow, so you get a nice bit of shade under (and a third dimension to) the menu bar. It was always there on the MySpace CSS, but I've made it a bit darker than it was with that little 'override'.

div.wrap {opacity:.85!important;}

The Opacity... Usually, when we include a value for object opacity on a conventional Cascading Style Sheet, it is necessary to do three or four different versions of the code to suit all them different browsers. You have a general one which works for most things, a specific one for Internet Explorer, a Mozilla one for older Firefoxes, a 'Webkit' one for mobiles and so on. Well, we don't have to do that with STYLISH, because it only needs to work with Mozilla-compatibles anyway. Just one will do. The div.wrap (actually, 'div.layout' does just as well) refers to everything on the page in front of the background tiling, so what we are doing is making the whole thing slightly see-through so that the texture shows. This affects the entire contents of the page, so don't make it TOO light or you won't be able to see anything! I found that about 85% opacity suited me. As I mentioned earlier, I wanted a subtle effect, like the page was reflecting the ripples of a swimming pool (hmmm, nice!).

The lower the number, the more see-through it is. How well this works for YOU will depend on YOUR background! Have fun experimenting!

Here's a useful HEXADECIMAL COLO(U)R CONVERTER, so that you can match your existing colour scheme using "the new language":-
http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php

EXTRA EXTRA! I've tested these modifications on the "MBM 3.0" as well now, so they should be fine for all versions of the MySpace homepage. I will shortly be adding these new tweaks to the published script at USERSTYLES.ORG, so that you can install/update the script of your choice to match.

No comments:

Post a Comment