Wednesday, February 22, 2012

Google + Stylish = ?

There's nothing wrong with GOOGLE PLUS where layout's concerned. There isn't anything to annoy, no dysfunctional features that sit around not doing anything but take up space on your homepage. It looks nice, it's been DESIGNED. It was clearly thought through BEFORE it went public, not thrown together and patched up in plain view of a frustrated membership. For me, that comes as a breath of fresh air, after all the time I've spent constructing CSS workarounds for the broken MySpace.

But like Facebook before it, Google Plus could do with a splash of colour!

Well, why not? You know me, I can't resist a wee cascade about in other people's stylesheets.

I've taken as my starting point the bright and sunny "LITTLE FLUFFY CLOUDS" theme that I've been using on my MySpace homepage recently.  Same background 'tile', same colour scheme.

Except that here I didn't have to resize or hide anything! Hoorah! It's simply a matter of overriding the stylesheets so that all the 'divs' adapt to the new colour scheme. Once you get your head around the very peculiar names they have for the page elements around here, it very quickly falls into place. Yet again, those Developer tools that Firefox has now are a real boon for the Dedicated Reconstructor of the Cyberworld. As you can see, the G+ homepage [above] still bears a familial resemblance to the MINTY BLUE MINIMALISM of my MySpace homepage. I've used many of the same 'tricks' with opacity and box-shadow to add a 'third dimension' to the page.

This time, rather than use the HEXADECIMAL colour charts with which we've become accustomed on our previous Stylish fun'n'games (you know, all that "color:#ff00cc" stuff), I've been boldly going into RGBA COLOR SPACE.

As any television engineer will tell you, RGBA refers to the fact that, as well as the three base colours of RED, GREEN and BLUE, pixels have a fourth "ALPHA" value. In the case of web page stylesheets, we can use that value to determine an element's transparency/opacity in relation to its surroundings. A colour like the LIGHT BLUE that I use for the stream background (#BBDDFF) would instead be shown on a scale of 0-255 (256 possible shades) for each of the three pixel colours, plus the additional "ALPHA" number between 0-1 (0 is completely transparent, 1 is solid, 0.5 is 50% opaque and so on). That particular shade of LIGHT BLUE (#BBDDFF), plus a bit of 'see-through-ness' is therefore stated as "rgba(187,221,255,0.6)". Long story short, by using this method, instead of specifying colours in Hex and THEN giving the elements a separate OPACITY style, it means that only the 'div' or element itself is semi-transparent. Any 'child' divs DO NOT 'inherit' the opacity, as they did before. So you can have a 'cloudy' see-through background and still have nice solid pictures and text on top of it (unless you really WANT them to fade into the background, that is. It CAN be effective sometimes). I've tried this before on the MySpace script, but it didn't work nearly so well. It probably depends on which version of the 'language' is used in the original stylesheets that you are overriding.

It was on the PROFILE PAGE that I really started to have fun! I recently had a go at doing a Facebook version of  the "MBM" Stylish as well. But that one didn't really come to anything, mainly because I don't actually USE Facebook myself. All I could do was experiment on the 'non-logged-in' view of the page, which in itself seems to change every five minutes (probably because of some advertising space that I can't see for myself). ANYWAY, I digress... It was while doing that that I stumbled over the ability to SKEW text and pictures by using that fiendish "-MOZ-TRANSFORM..." line - there ARE versions of this for other browsers, but that needn't concern us here, because Stylish is Mozilla-specific. As you can see from this screenshot, all of the scrapbook pictures have been set at a jaunty angle, with the addition of a bit of "box-shadow" to make them appear to float off the page. What japes!

Rather than have my name (and everyone else's) in in big block sans-serif letters, I thought it might be fun to make it look like a faux-signature. To do this, you have to have a handwriting font installed on your machine that your browser can use - Don't forget that this is STYLISH and not a CSS that affects the web pages 'for real', so only YOU see things this way through YOUR browser. You're therefore safe to use non-'web-friendly' fonts. I used a TrueType font called "Annie BTN" which I think may have been installed by one of the Serif applications, correct me if I'm wrong. But Other Fonts Are Available. I tinted it in a nice shade of Biro blue and also used the "-moz-transform : rotate..." to give it an extra bit of swish. Any additional description line that appears under folks' names is also Stylish-ized to a smaller font and positioned 'just so' by using ABSOLUTE values. (Ah! by the way... notice too that I've changed the font THROUGHOUT from Arial to Trebuchet.)

So then... that's a start! I'm sure I will come back to this and add more features, but in the meantime... I hope that you can have fun with it and that you share screenshots of your own efforts and variants. You know the drill by now - cut and paste the following script into a "WRITE NEW STYLE" window via your Firefox's "ADD-ONS MANAGER > USER STYLES" editor and save it under a suitably witty name.


@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(plus.google.com)
{
/*#####BACKGROUND TILE#####*/
body {
background:url("http://www.doobix.com/images/graphics/myspace/backgrounds/sky/backgrounds_sky_65.jpg") fixed top center !important;
}
/*#####CHANGE THE FONTS#####*/
div,table,tb {
font-family:trebuchet MS!important;
}
/*#####HIGHLIGHTS SUB-HEADINGS IN WHITE#####*/
h2.Wfskpc.c-wa-Da,
h2.CuJEEf.c-wa-Da {
font-style:italic!important;
color:rgb(255,255,255)!important;
}
/*#####SHADOWS & OPACITY ON VARIOUS BOXES#####*/
div#gbx3,
div#gbx4 {
background:rgba(30,30,120,50)!important;
box-shadow:0 0 12px rgba(0,0,34,1)!important;
}
div#gbx1,
div.k-wb-nb.k-Qf-wb-nb.k-wb-nb-Zg {
box-shadow:0 0 12px rgba(0,0,34,0.3)!important;
background:rgba(187,221,255,0.5)!important;
border:0px!important;
}
div.to,
div.lzqA1d,
.Wbhcze.Te {
background:rgba(187,221,255,0.5)!important;
border:0px!important;
}
div.k-B-fa-nb.k-fa.k-B-fa-wf-mf,
div.k-Qf-IH-nb.k-IH-nb.c-wa-Da,
div.k-B-TB-nb.c-wa-Da.k-Qf-B-TB-nb,
div.kM5Oeb-ad9sbb.KSB3fe,
div#contentPane,
div#update {
background:rgba(187,221,255,0)!important;
border:0px!important;
}
/*#####SKEW THE PICTURES!#####*/
div.k-Qf-pc-N.wbBfrf.CyVWVb {
background:rgba(187,221,255,0)!important;
box-shadow:12px 12px 12px rgba(0,0,0,0.5)!important;
-moz-transform: rotate(-5deg);
}
img.kM5Oeb-QvUnw.G3royc {
box-shadow:12px 12px 12px rgba(0,0,0,0.5)!important;
-moz-transform: rotate(5deg);
}
/*#####SOME MORE BOXES!#####*/
div.k-Qf-TB-nb {
background:rgba(255,255,255,0.3)!important;
}
div.mbKrWe,
div.lzqA1d,
div.KzjeM {
background:rgba(153,187,221,0.3)!important;
box-shadow:0 0 12px rgba(0,0,34,0.3)!important;
}
/*#####MAKE YOUR NAME LOOK LIKE A SIGNATURE! (You will need to install a 'handwriting' font on your own computer and then name it here)###*/
span.fn {
font-family:Annie BTN!important;
color:#0099dd!important;
-moz-transform: rotate(-3deg);
}
/*#####POSITION & SIZE OF DESCRIPTION TEXT#####*/
span.rPciVd {
font-style:italic!important;
font-size:11px!important;
position:absolute!important;
left:340px!important;
top:45px!important;
}
}


ADDENDA

Here we are now in APRIL 2012 - and Google have completely changed the layout and functionality of Google Plus (already!?!).

It's not an entirely objectionable new look, but the 'bottom line' is... the above STYLISH scripts for G+ are now pretty much obsolete.

Ah well.

Hopefully someone else will take up the baton and come up with a new one.

In the mean time, enjoy all that empty white space they have now :-)

No comments:

Post a Comment