Tuesday, February 28, 2012

Golden Brown Google Plus

I've finally got a spectacular looking STYLISH look for my Google+ pages that I'm happy to live with. It is at this point that I can share it with my adoring public! :-)

Creating a Stylish for a page like this takes a few days of "MAKING IT UP AS YOU GO ALONG". Once you settle on a colour scheme, especially one with a dark background, you find yourself stumbling daily over new bits of text that don't show up anymore, or buttons that clash because they still have Google's own colour scheme. You are constantly adding lines to that huge expanding script as you go about your daily GoogleTasks.

I had originally used, as my starting point, another of those fine looking background wallpapers from the collection at www.gothicwallpapers.net. A really nice desolate looking seascape with rich sunset colours. Using a Firefox 'developer tool' plug-in such as RainbowPicker, you can select colours from the picture's pallette just by pointing at them and then discover their RGB values. Then, as you re-colour the elements of the page with your Stylesheets, you can specify colours that are tastefully suited to your background. Or not. It's up to you!

I quickly found that, though it is nice to have a big continuous picture as your background, there are times of the day when it takes forever to load the page because of it. I've still included the screenshot above as a suggestion - if you have a mega-fast internet connection, you may not be troubled by such petty considerations. For my own day-to-day use, I instead chose a quicker-to-load tile pattern from one of the many sites that provide such things, one that sticks closely to my original colour scheme (I think this was from a collection that was intended for Tumblr pages, but it does the trick!). The script grew and grew as I started to specify every single 'div' and 'span' that needed to show up as white text, any that still needed to be black and some 'headings' and links that I've picked out in orange. Any interactive button or menu bar, I've given that nice "gold" effect by changing the colour values of Google's own 'linear gradient' fills. Again, every time I think I've re-coloured them all, another one pops up! That's all part of the fun!

Some of the features, like the 'skewed' profile and scrapbook pictures I've retained from my earlier "Little Fluffy Clouds" theme... Anyway, for your consideration, here's THE SCRIPT AS SHE IS WRIT at the moment. There are dozens of those funny looking Google 'divs' and 'spans' specified. At the moment they are more or less in the order I found them. I suppose I could be REALLY 'PEDANTIC' sometime and put them into some kind of alphanumeric order. But not today.

_____________________________________________________________

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(plus.google.com)
{
/*####BACKGROUND TILE####*/
body {
     background:url("http://29.media.tumblr.com/tumblr_lieell29Kv1qcdtsho1_400.jpg") fixed top center !important;
     }

/*####WHITE FONT FIXES####*/
div.s-r-pa-Ka,
div.s-r-Pa-Ka,
div.s-r-Ge-ec,
div.rXnUBd,
h4.nPQ0Mb,
div.aYm0te.c-wa-Da,
div.j1SW4,
td.tel,
span.email,
span.it1BF,
span.twXV2b,
.rg,
div.k-ldzwdb-Kqlefe-E,
div.EfJMUd,
div.wbXbAf,
div.A0hCjb.l3tas,
div.k-Ja-Gh.ccnFDb,
div.Il0VJc,
div.IhZYJf,
div.rsFKub.zgK5Tc,
div.x7iMqd.VG.fH,
div.rw,
div.ow,
div.fq,
div.Fq,
div.lF,
div.jF,
div.kM,
div.ps,
div.kM.dM,
div.rsFKub.zgK5Tc,
div.oX401d.Wt,
div.yuRGNe.QE,
span.gbts,
span#gbztms1,
span.Ki.c-wa-Da,
span.k-U-C.f1dfid.kM5Oeb-fyNcAd,
span.k-U-C.f1dfid.kM5Oeb-AkmpBf,
span.fz.ACnk7c,
span.GGfmZe,
span.ey,
span.kH {
     font-family:trebuchet MS!important;
     color:rgb(255,255,255)!important;
     }

/*####BLACK FONT FIXES####*/
span.yQteKd,
div.k-Va-xb-Fb-za,
div.b-j,
div.Bx,
div.ck,
div#:ih.H-zc.z-ea-x.H-T.T,
div.SvqDDb,
div.tz,
div.XSINLb {
     font-family:trebuchet MS!important;
     color:rgb(0,0,0)!important;
     }

/*####ORANGE FONT FIXES####*/
h2.Wfskpc.c-wa-Da,
h2.CuJEEf.c-wa-Da,
div.cH.twXV2b,
div.k-ldzwdb-Kqlefe-Gb-za.on3lSc,
div.wG.EIxYb,
div.R3fLkb,
div.Om8HKf,
div.k-B-yd.CAFMHc {
     font-family:trebuchet MS!important;
     font-style:italic!important;
     color:rgb(255,165,0)!important;
     }

/*####BOXES: COLOURS & STYLING####*/
.editable {
     background:rgb(255,255,255)!important;
     }
div.gC7oDb.b-w,
div.c-wa-Da.b-a.b-a-G.KjqFpf.k-ldzwdb-Kqlefe-a.b-a-na {
     background:rgb(0,0,0)!important;
     }
div.wd.bi2Sed {
     background:rgba(255,255,255,0.1)!important;
     }
div.c-Ya-Ka {
     padding:6px!important;
     color:rgb(0,0,0)!important;
     }
div#gbx3,
div#gbx4 {
     box-shadow:0 0 12px rgba(0,0,34,1)!important;
     }
div.to,
div.lzqA1d,
div.pE,
div.gC7oDb.b-w,
div.aN8flf,
div.pz.oz-sg-people,
div.az.CFdwr.cz,
div.c-o.c-o-Zo,
div.gbmc,
div.d.d-Y-S,
div.Lhhrrd.k-B-yd.tNsA5e-yd { 
     background:rgba(89,66,48,0.6)!important;
     box-shadow:0 0 12px rgba(0,0,34,0.3)!important;
     border:0px!important;
     }
div.k-B-fa-nb.k-fa.k-B-fa-wf-mf,
div.k-B-TB-nb.c-wa-Da.k-Qf-B-TB-nb,
div.kM5Oeb-ad9sbb.KSB3fe,
div#contentPane,
div#update,
div.aN8flf,
div.IlZg9e,
div.bBG8Ec,
div.I8YPxe,
div.UHonm.bD.Il,
.Wbhcze.Te,
div.YmkEXd,
div.RxitYc.k-B-yd.tNsA5e-yd {
     background:rgba(89,66,48,0)!important;
     border:0px!important;
     }
div.k-Va-pc-N-A,
div.k-Va-pc-N-P,
div.k-Qf-pc-N.CyVWVb,
div.kM5Oeb-Pspvmc,
div.DzkbSc {
     background:rgba(0,0,0,0)!important;
     }
div.k-Qf-TB-nb,
div.k-Qf-IH-nb.k-IH-nb.c-wa-Da,
div.YmkEXd {
     background:rgba(0,0,0,0.3)!important;
     }
div.mbKrWe,
div.lzqA1d,
div.KzjeM {
     background:rgba(89,66,48,0.6)!important;
     box-shadow:0 0 12px rgba(0,0,34,0.3)!important;
     }

/*#####"TONE DOWN" WHITE INPUT BOXES#####*/
div.e-dd,
div.i9kzNd.rh,
div.ux07w.c-C.WNfAae,
input.ly.u2dCt.my,
span.c-C.cgRpz.Fs {
     opacity:.55!important;
     }

/*#####"GOLD" EFFECT ON BUTTONS & BARS#####*/
.Pb,
.Ys,
.b-a-G,
.b-a-ga,
.b-a-U,
.c-Ya-sa,
div.tvogXd.yo,
div.UA5gve.Bn.c-wa-Da,
div.k-Qf-TB-l03kKd-cfRvlc.k-TB-l03kKd,
div.c-wa-Da.b-a.z-Ra-Cb-a-Qf.z-Ra-Cb-a.b-a-va,
div.Sf.Gn.AkM0qf.c-wa-Da.nk,
div.c-wa-Da.b-a.b-a-va.xJtnxc,
div.c-wa-Da.c-q-o-a.dz,
div.GN.I987D,
div.nJ.xT,
div#gbx1,
div#gbgs3,
span.c-C.E4V1D.fFgAkc,
span.c-C.YnBabf.Tl,
div.c-wa-Da.b-a.b-a-va.xJtnxc.FhIenf,
div.c-wa-Da.b-a.b-a-va.HsLrwb.gNMvS,
div.k-wb-nb.k-Qf-wb-nb.k-wb-nb-Zg,
button.gbqfb {
     background-image:-moz-linear-gradient(center top , rgb(255,187,136), rgb(128,85,0))!important;
     border:0px!important;
     }

/*#####SKEW SCRAPBOOK & PROFILE PICTURES#####*/
div.k-Qf-pc-N.wbBfrf.CyVWVb {
     background:rgba(89,66,48,0)!important;
     box-shadow:12px 12px 12px rgba(0,0,0,0.5)!important;
     -moz-transform: rotate(-5deg)!important;
     }
img.kM5Oeb-wsYqfb.photo {
     background:rgba(187,221,255,0)!important;
     box-shadow:12px 12px 12px rgba(0,0,0,0.5)!important;
     -moz-transform: rotate(6deg);
     }
img.kM5Oeb-QvUnw.G3royc {
     box-shadow:12px 12px 12px rgba(0,0,0,0.5)!important;
     -moz-transform: rotate(-5deg);
     }
img.tg.Abw9Vd.st.hf {
     padding:5px!important;
     }

/*#####ADDITIONAL FONT COLORIZING#####*/
a,
.c-C {
     color:rgb(255,165,0)!important;
     }
span.fn {
     font-style:italic!important;
     color:rgba(255,187,136,0.5)!important;
     }
span.rPciVd {
     color:rgb(255,255,255)!important;
     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 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 :-)



1 comment: