Friday, April 27, 2012

Google non-Plussed! !&?@£%$~@?#!


Updated 10th May 2012 - Well, THIS has all been a bloody waste of time... PLEASE IGNORE THIS ENTIRE BLOG POSTING! Google have changed the names of just about EVERY 'div' and 'span', box or button on the Google Plus pages. I don't know whether this is through the use of some some kind of secret random-generating algorythmic doodad, or if someone actually sat down and did it manually... but I don't think I'll bother doing any more scripts for G+ anytime soon. What's the point if, no sooner do I share my code with the 'community', it no longer functions? It makes ME end up looking like a prat...




In which the Google Plus pages get a much needed "splash" of colour (again already!?!)

It cannot have escaped your notice that, no sooner had I hit on a STYLISH solution to the problem of adding some personal touches to the GOOGLE PLUS pages, they went and moved the goalposts on us! The previous CSS scripts that I had 'published' in these very pages were rendered obsolete overnight, plunging us back into a wintery wasteland again (a bit like the "Spring" that we're enjoying here in the UK currently). Never fear, 'cause your Uncle Minty has been slaving into the early hours to come up with a NEW one, loosely based on an earlier 'swimming pool' scheme I'd created for the MySpace homepage.

You know the drill by now, people... start copying the following into a new Add-ons Manager window on your Firefox or Chrome. We start, as usual, with the compliance doobry and a line that tells your browser which pages are affected (Don't forget those all-important curly brackets!):
_____________________________

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(https://plus.google.com/)
{
 _____________________________ 

Now we include a background tile. Whereas before, one single 'body' reference was all that was necessary here, now the pages are made up of several layers, with different names on different pages, so things have got a little more complex:
_____________________________ 

/*BACKGROUND*/
body.gC.nWhPge.do7tqf,
div#content.FUX2Y.pWARh,
div#contentPane.FyqN2d {
     background:url("http://1-background.com/images/water-1/water-blue-water-tile.jpg") fixed top center !important;
    }
 _____________________________ 

Now, am I the only one who thinks that the profile picture is far too large now? Hmmm...

And I'm still not sure about how best those "scrapbook" pictures can work now. Kudos to those that have succeeded in making an artistic statement using either the five little square pics or the 'panorama' option. I've settled on empty coloured boxes until I can think of something nicer! But bear in mind here, that any styling you apply to the Profile page affects how you see everyone else's pages as well. Several times during the course of my experimentation, I made things look worse rather than better! The skewed (and smaller) profile picture is a throwback to an earlier project, when I tried in vain to do something neat with the Facebook page layout. The picture here has, again, several layers of boxes behind it, so it is also necessary to resize those as well. The 'moz-transform'ation has been applied to the master div in which all the others are stacked.
_____________________________

/*PROFILE PIC*/
img.kM5Oeb-wsYqfb.photo,
div.k-Va-pc-N-A,
div.k-Va-pc-N-P {
    width:150px!important;
    height:150px!important;
    }
div.k-Qf-pc-N.CyVWVb {
    width:150px!important;
    height:150px!important;
    position:absolute!important;
    left:50px!important;
    top:20px!important;
    background:rgba(187,221,255,1)!important;
    border:0px!important;
    box-shadow:12px 12px 12px rgba(0,0,17,0.3)!important;
    -moz-transform: rotate(6deg);
    }
div.vj1Jhd,
div.uBkbrd.D0jntb {
    display:none!important;
    }   
div.wE0Ho.aBjVhf {
    border:0px!important;
    }
div.RMrddf {
    box-shadow:0 0 25px rgba(255,255,255,1)!important;
    }
 _____________________________ 

You have the opportunity here to change the fonts on the Google pages. "Arial" is all very nice and universal and all, but you don't HAVE to stick with it. Because this page styling lark only affects how YOU see the pages in YOUR browser, in theory, you can use any font that you have on your own computer, you're not tied to just the 'system' fonts. But do opt for something that you can actually read! Having said that, I've used "Trebuchet" which IS a well established system font. Here I've also revamped an earlier idea, of making the profile names look like signatures, by using a scruffy hand-script font. I think this ("Annie BTN") was one that came bundled with a Serif program, but you will almost certainly have similar ones in your collection. There are also additional lines here for specifically colouring the hyperlinks and certain heading text:
_____________________________

/*FONT FIXES*/   
div, span, p, table {
    font-family:trebuchet MS!important;
    color:rgb(0,0,0)!important;
    text-shadow:none!important;
    }
span.gbts,
span#gbztms1 {
    font-family:trebuchet MS!important;
    color:rgb(187,221,255)!important;
    }
a {
    color:rgb(255,220,0)!important;
    }   
span.fn.c-wa-Da.nhsZYd {
    font-family:Annie BTN!important;
    font-size:40px!important;
    color:rgb(255,255,255)!important;
    -moz-transform: rotate(-3deg);
    }
h2 {
    font-style:bold!important;
    color:rgb(255,255,255)!important;
    }
div.sNcs4c {
    font-size:10px!important;
    padding:20px!important;
    }
_____________________________ 

This next section applies some tweaks to some of the 'div' boxes on the various pages. As I pointed out before, there are lots of layers stacked on top of each other, so many of them have to be made see-through so that they don't distract from our lovely background pattern. I've made certain boxes semi-transparent or less 'in your face' by using the OPACITY tag. But remember that opacity will affect all the 'child' contents of the boxes as well as the background, so I've only used this for stuff that I don't particularly have a use for, but didn't want to hide altogether (like the CHAT box). Some elements can be hidden altogether, like certain dividing rules and borders. I've also played around with the width and padding of the 'stream' containers and some of the elements within. And then there's our old friend the BOX SHADOW for that added third dimension.
_____________________________

/*BOXES STYLING*/
div.rBJ4nd.Ln,
div#gbqfqw.gbqfqw,
div.AOaixb.yRwDId.feb1He.iCedV,
div.AOaixb.yRwDId.feb1He,
input.M5xrvb.GEetHf.Ua-O-Ua {
    opacity:.60!important;
    }
div.gkwO2.bCGLUc,
div.HsKNKc.jQzEhd,
div.Y9094,
div.zph8gc.f5iDVe,
div.N3caIc {
    display:none!important;
    }
div.RazREb.ZI35oe.c-wa-Da.ncGWdc {
    background:rgba(80,177,255,0.5)!important;
    box-shadow:0 0 11px rgba(0,0,17,0.6)!important;
    padding:20px!important;
    }
div.e-ed,
div#gb.gbes,
div#gbx1.gbes {
    box-shadow:0 0 11px rgba(0,0,17,0.8)!important;
    }
div#gbx3.gbes {
    background:rgb(0,0,130)!important;
    }
div.mbKrWe,
div.o8dQjb {
    padding-left:14px!important;
    padding-right:14px!important;
    }
div.tvogXd.yo {
    padding:6px!important;
    }
div.g-i-h-Ia-B,
div.g-i-h-of,
div.zph8gc.f5iDVe {
    background:rgba(80,177,255,1)!important;
    }
div.Of,
div.wTRLmd.qTn9yb {
    background:rgba(80,177,255,0.6)!important;
    box-shadow:0 0 16px rgba(0,0,17,0.3)!important;
    }
div.HX2qEd,
div.IzbGp.kM5Oeb-C2ROl,
div.Rdofwd {
    display:none!important;
    }
div.L9ru2b.c-wa-Da,
div.kM5Oeb-RxwvHe.YleYsd.o8dQjb {
    padding-left:70px!important;
    }
div.GPInYc.KBMoYc.c-wa-Da.MfcTJ {
    padding-top:250px!important;
    }
.k-Ya-Pn {
    width:600px!important;
    padding:14px!important;
    background:rgba(80,177,255,0.6)!important;
    box-shadow:0 0 16px rgba(0,0,17,0.6)!important;
    }
_____________________________ 

First there are coloured boxes... Use a colour matching plug-in like RAINBOW to specify shades that will compliment your background picture. Vary the amount of background transparency by using the RGBA color model (Remember? this gives you a choice of 256 different values for each of the RED, GREEN and BLUE pixels, plus the mysterious ALPHA value, where 1 is solid and 0 is invisible)
_____________________________ 

/*BLUE BOXES*/   
div.AK97Ke,
div.BQU9Gf,
div.EziK2e,
div.HsKNKc.jQzEhd,
div.k-B-nb,
div.Of,
div.Ye,
div.z4tQk,
div#gbx1,
span#gbi4t {
    background:rgba(80,177,255,0.3)!important;
    border:none!important;
    }
div.TK6IB,
div.DaLui.GD,
div.kGN8yb.mw,
div.uY {
    background:rgba(80,177,255,0.8)!important;
    border:none!important;
    }
_____________________________ 

...and there are invisible ones (they obviously serve some purpose, but you don't want them disturbing YOUR colour scheme). To make them totally transparent, we give them an RGBA value of "0,0,0,0" (which is known around here as 'see-through black'):
_____________________________ 

/*TRANSPARENT BOXES*/
.c-Ya-sa.c-Ya-sa-Ca.RMAJjd,
.c-Ya.c-wa-Da.k-Ya-Sn.y1I2gf,
.c-Ya.c-wa-Da.k-Ya-Sn.y1I2gf.c-Ya-I,
.Wbhcze.Te,
.Wbhcze.Te.ch,
div.az.CFdwr.p4b6ld,
div.c-Ya-Ka,
div.CPLjOE,
div.CoM7wc,
div.ekW7J,
div.EziK2e.wBGU5.eusrHb.SfBCie,
div.fsfr2c.NeLhq,
div.hFeggb.OzR9Jf,
div.iH.k-Qf-e-fa.e.e-Ta,
div.kM5Oeb-ad9sbb.KSB3fe,
div.kM5Oeb-RxwvHe.YleYsd.o8dQjb,
div.kM5Oeb-HkWR4e.YiuFyc.o8dQjb,
div.pz.oz-sg-people,
div.R9KV7d,
div.R9KV7d.EfWPmc,
div.rg,
div.RxitYc.k-B-yd.tNsA5e-yd,
div.tOzHBe,
div.tvogXd.yo,
div.uWF1Ke.atQfbd,       
div.v1WCLe,
div.vix0xf.VZAKvf,
div.vu9JXc,
div.vu9JXc.MrKoMd,
div.XyBVQ,
div.Ye,
div.ZXy9Tc.VR8ITe,
nav.uohZhe,
span.c-C.Hs,
span.EIO1Ie.k-U-C.c-wa-Da,
span.p539Qb.p4GMSe.mxeerd,
span#gbi4t {
    background:rgba(0,0,0,0)!important;
    border:none!important;
    }


Last but not least, all those buttons and bars have had a shiny look applied, through crafty use of the "LINEAR GRADIENT" effect. There are lots of versions of this script for different browsers, but as you are using a Mozilla-based browser, you only have to worry about that one:
_____________________________

/*SHINY EFFECT ON BUTTONS & BARS*/
.b-a-G,
.b-a-ga,
.b-a-na,
.b-a-U,
.c-Ya-sa,
.esw.eswd.BRowJd.Jt,
.Pb,
.Ys,
button.gbqfb,
div.c-wa-Da.b-a.b-a-va.HsLrwb.gNMvS,
div.c-wa-Da.b-a.b-a-va.xJtnxc,
div.c-wa-Da.b-a.b-a-va.xJtnxc.FhIenf,
div.c-wa-Da.b-a.z-Ra-Cb-a-Qf.z-Ra-Cb-a.b-a-va,
div.c-wa-Da.c-q-o-a.dz,
div.c-wa-Da.c-q-o-a.hqWtUc.mD9o1d.c-q-o-a-na,
div.c-wa-Da.c-q-o-a.x3wb0b,
div.c-wa-Da.HPvmqf.Dd1jcf,
div.c-wa-Da.HPvmqf.uBbfTb,
div.Cn7feb.c-q-o-a.c-wa-Da.U98b3e.Npn9He.c-q-o-a-y-ka,
div.c-wa-Da.b-a.b-a-va.gRu7N.mYN22c.c-wa-Da,
div.e-ed,
div.eT39Fc.aPEnxc,
div.GN.I987D,
div.iH.k-Qf-e-fa.e.e-Ta,
div.k-wb-nb.k-Qf-wb-nb.k-wb-nb-Zg,
div.nJ.xT,
div.PuHqy.b-a.b-a-G.c-wa-Da.b-a-L.b-a-y-ra,
div.Sf.Gn.AkM0qf.c-wa-Da.nk,
div.SGwbqf.RzqyHb.c-q-o-a.c-wa-Da,
div.SGwbqf.RzqyHb.c-q-o-a.c-wa-Da.c-q-o-a-na,
div.peIMR.c-q-o-a.c-wa-Da,
div.tvogXd.yo,
div.v1WCLe,
div#gbgs3,
div#gbx1,
span.c-C.E4V1D.fFgAkc,
span.c-C.YnBabf.Tl {
     background-image:-moz-linear-gradient(center top , rgb(255,255,255), rgb(80,177,255))!important;
     border:0px!important;
     }
/*CHANGE COLOUR OF RED G+ BUTTON*/    
.esw.eswa.BRowJd.Jt,
.esw.BRowJd.Jt.eswa {
    background-image:-moz-linear-gradient(center top , rgb(128,128,255), rgb(0,0,255))!important;
    border:0px!important;
    }
}
 _____________________________ 

Don't forget those closing brackets! And that's that for now. As usual, feel free to muck about with the colours until you get something that YOU like (and if you REALLY like it, then 'share' it on G+!)



No comments:

Post a Comment