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 :-)



Monday, February 27, 2012

A little STYLISH (and a little revision)

TEACHER'S NOTES... Some SIMPLE, easy to follow instructions for adding a little STYLISH to your pages. Now With Added Illustrations!

Some folks (particularly those on MySpace) have commented that they love THE IDEA of customizing their pages using STYLISH, but they're a bit nervous about taking the plunge.

To them I say, "Don't worry! You can't break it!"

When you pimp your pages by having a Stylish plug-in handle all the Stylesheet Cascading, you are NOT affecting the real pages themselves, so you CAN'T mess them up. What you are doing is changing the way your Mozilla-based internet browser SHOWS you the pages. Only YOU see the pages THAT way on YOUR browser. You can switch the styling on and off at any time.

Some sites (like this very Blogger) allow you to apply CSS styling to the pages FOR REAL.You can actually REDESIGN them completely, so that other people can see the changes as well.

But MySpace, Facebook and Google+ give you a fixed layout and that's it. In order to change anything to suit YOU, you have to 'hack' the way that your browser interprets the page. Stylish can be seen as a sort of "offline" CSS editor.

##### INSTRUCTIONS FOR FIREFOX #####

1) First install the STYLISH plug-in on your browser. The easiest way to do this is to go to your "TOOLS" menu and click on "ADD-ONS". The "ADD-ONS MANAGER" screen will open. Click on the "GET ADD-ONS" icon. This will connect you to Mozilla's own Add-Ons site. Search for STYLISH and you will see a screen like this:-


2) Click on that big green "ADD TO FIREFOX" button! You will probably be asked to restart Firefox (that's so that it can refresh the extensions registry).

3) Now you have STYLISH installed on your Firefox! If you customize your tool bars, you can put a shortcut somewhere where you can find it easily (you sometimes need to be able to switch it on and off ). Look at the screenshot above, you can see that I've put all my "developer" tools in a neat row at the top. Stylish is the third from the right.

4) Well you have the capability of running scripts on your pages... Now all you need are the scripts themselves! Go to USERSTYLES.ORG. This is where they all live!


5) That's the page for my own MINTY BLUE MINIMALISM script for MySpace. But if you start from the Userstyles homepage and then search for what you want, you will probably find something for the pages YOU want to stylize. There are scripts for MySpace, Facebook, Tumblr and lots of other sites. But remember - do check to see when the scripts were last updated because, as we know, a script written for the MySpace homepage two or three years ago would NOT work on the homepage now!


6) If you come across a style that you like, then click on (yet another) big green button to add it to your browser. Refresh The Fox. When you land on the page(s) that are affected by that script, then the Stylish icon on your toolbar will change from 'greeked' grey to glorious colour! You will see the script listed on the User Styles section of your Add-On Manager.

7) Now me, I've got a FEW different Stylish projects on the go...


Although I haven't YET got to the point where I've published them ALL on userstyles.org, I will probably have posted the code for these 'works in progress' on my blog. I WANT folks to try them out for me!

8) If you want to try one of MY styles (and customize it to suit YOU of course), you need to copy the script from one of these blogs...


9) ...and then paste it into a "WRITE NEW STYLE" window on your Add-Ons Manager.


10) Save it under a suitably zany and memorable name! The 'new' manager screen is COLO[U]R CODED just like a proper grown-up HTML editor (Hoorah!), so it's REALLY easy to see what the different parts of the script mean.

11) The Add-Ons Manager is also the place where you decide which scripts are turned on and which aren't. Things can get messy (especially on MySpace) if you open a page and you have two conflicting scripts operating on it at the same time. Each of your saved scripts has a DISABLE/ENABLE button. Only enable the ones that you want to automatically run when you land on a page.


So that's got YOU started in the wonderful world of PAGE STYLING! Once you have a script or two on your browser, you can change them to you heart's content by experimenting with the colours, background images, fonts, sizes of boxes and so on and so forth. I repeat - YOU CAN'T "BREAK" ANYTHING BY EXPERIMENTING. If you keep a text file back-up of any scripts that you install, you can always restore them to an earlier state. Or you can turn them off altogether and the pages will again appear the way the (ahem!) designers intended.


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 :-)

Thursday, February 16, 2012

None more black...

For those people who think that MySpace is still not gloomy enough...

I received a request from a friend (Hello Kitty!) asking if it would be possible to do an ALL BLACK version of the MySpace homepage.

Short answer: Yes, it would.
Longer answer: Please read on!

My starting point, naturally, was my "MBM 3.0" Stylish script, as I knew from previous experience that that one would adapt to several different versions of the MySpace homepage. At first it was just a matter of changing the colours. My own homepage currently sports a bright and sunny "Little Fluffy Clouds" theme, while the published versions of Minty Blue Minimalism look like the bottom of a swimming pool!

My friend wanted something a little more sombre.

Here's what the "work in progress" looked like a couple of days ago. This early version has a relatively plain "leather" textured tile as its background. Problem areas: there were one or two bits of text that stubbornly refused to change colour so that they would show up against the darker background. Particularly troublesome was the colour of the text in the Status Update entry box. Grey on Grey? That's like something that MySpace themselves would choose!


But a bit of surreptitious Cascading around in the Stylesheets allowed the fixes for these problems to reveal themselves unto me. Hooray for Firefox's new "DEVELOPER TOOLS"! I ended up with something that seemed to work 'across the board' on my own "UK ARTISTS" version of the homepage. As far as I can tell, I haven't caused anything to accidentally disappear this time. I hope I've learned my lesson!

The "goth" background wallpaper I chose came from this website - www.gothicwallpapers.net. As you can see, they have a lot to choose from, including some rather good HR GIGER themes that I know will appeal to some. But you are, of course, free to use whatever background picture or texture you find suitable.

Before I felt confident enough with my work to GO PUBLIC, I had to test it on other versions of the homepage, particularly the US 'civilian' one. Kitty was kind enough to let me log into her site so that I could test it 'OVER THERE'. Naturally, one or two MORE anomalies presented themselves. Some of the code that I'd written for the UK version didn't apply to the US page (and, subsequently, vice versa).

Here's the American homepage after it's had the DARK & GOTHIC treatment. It's nearly but not quite the same. I've shed that third column full of other people's music that's only there to appeal to the newbies (Over here in UK ArtistLand, we have a superfluous copy of the profile comments board instead).

Again, PLEASE PLEASE PLEASE tell me if this script makes things vanish elsewhere. I've been careful not to alter the "general" part of the script this time around, but I won't be running this script on my own site, so I rely on your feedback to tell me if I've made a huge tit of myself and messed things up royally (how's that for self-confidence?)

As before, copy and paste this lot into the "WRITE NEW STYLE" window of your Firefox's ADD-ONS MANAGER > USER STYLES interface and then save it under a suitable name. Fellow Tapheads will recognise the reference when I tell you that I called mine "NONE MORE BLACK". As usual, don't forget those last close-brackets! Have fun with it! Thanks and smooches to Mlle Kitty for the inspiration and the opportunity.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(www.myspace.com)
{
/* #####GENERAL: APPLIES TO ALL MYSPACE##### */
ul.streamViews,
ul.footertools {
display: none !important;
}
.section,
article.media,
#aside,
.commentContainer {
font-family:Arial!important;
font-size:12px!important;
color:#ffffff!important;
}
article.RecommendationsModule,
article.bestOfTheFixModule,
article.bulletinsModule,
article.manageMyStuffModule,
article.myVisitorsModule,
article.bandArtistDashboardModule,
article.upcomingShowsModule,
article.friendSpaceModule {
display: none !important;
}
/* #####ADDITIONAL AD REMOVAL##### */
div.labeled_ad,
ad_container.medrec2,
ad_container.adspecial1,
div#tkn_leaderboard,
article.googleAdSenseModule,
div.module.module3.columnModule1.even.RecommendationsModule.draggable,
div.marketing {
display: none !important;
}
/* #####LOGIN PAGE CLEANUP##### */
div.linksColumn,
article#module-2.module.module2.columnModule0.odd.InfoGraphicModule,
div.infographic,
div.splashMedia,
div.footershim,
div.musicColumn,
div.splashSignUp,
article#module-3.module.module3.columnModule0.odd.SignUpV2Module.draggable,
div.curatorsColumn,
div.topicsColumn {
display: none !important;
}
div.layout.group {
background: transparent!important;
}
/* #####UGLY BLACK FOOTER##### */
div.alertsRequests,
#pageFooter,
div.moduleFooter,
div.gracefulinjection,
div.shareButtonControl {
display: none !important;
}
nav.gearLinks {
float:left!important;
}
/* #####RECOMMENDATIONS ON ALL OTHER MYSPACE PAGES##### */
div.module.module4.columnModule1.even.RecommendationsModule.draggable {
display: none !important;
}
div.userActions {
float:right!important;
}
.msProfileTextLink {
font-weight:bold!important;
}
}

@-moz-document url-prefix('http://www.myspace.com/home')
{
/* #####ONLY APPLIES TO USER HOMEPAGE##### */
.userHome {
background: url("http://images2.alphacoders.com/172/172424.jpg")fixed top center !important;
}
.streamTabs,
div.sysMessage,
div.thread,
h3.moduleHead {
display:none!important;
}
section#col1_0,
section#col1_1 {
background:transparent!important;
}
section#col1_2 {
display:none!important;
}
.beam-home#row1.column0,
.beam-home#row1.column1 {
padding:0px!important;
}
form.group.attaching.attachstatus {
background:#888888!important;
padding:6px!important;
}
div.streamPlaceHolder,
div.streamPlaceHolder.forRightRail,
div.playitem,
div.todohead,
ul.todolist,
#promoView,
.musicStreamContainer {
display:none!important;
}
/* #####APPLIES TO UK ARTISTS HOMEPAGE##### */
div.ms-accordion-container,
div.accordion-title,
h3,
li.noactivity {
background-color:#888888!important;
border:0px!important;
opacity:.80!important;
}
span.msProfileLink {
background:transparent!important;
border-radius:0px!important;
padding-top:20px!important;
padding-bottom:10px!important;
box-shadow:none!important;
}
img.profileimagelink {
width:140px!important;
box-shadow:6px 6px 12px rgba(0,0,0,0.4)!important;
}
div.minimized,
textarea.status,
div.inputs {
background-color:#555555!important;
border-radius:0px!important;
}
textarea#spStatus.status,
.superShareContainer.attaching.status {
background-color:#222222!important;
color:#ffffff!important;
}
/* #####ALL(?) VERSIONS OF HOMEPAGE##### */
div.activityStreamModule {
width:700px!important;
background:#303030!important;
padding:20px!important;
border-radius:0px!important;
opacity:.90!important;
font-family:Arial!important;
font-size:12px!important;
color:#ffffff!important;
box-shadow:0 0 6px rgba(0,0,34,0.5)!important;
}
.msProfileLink.miniProfile {
padding-right:2px!important;
padding-left:2px!important;
background:transparent!important;
}
.commentContainer {
width:680px!important;
padding:10px!important;
background-color:#202020!important;
font-family:Arial!important;
font-size:12px!important;
color:#ffffff!important;
border-radius:0px!important;
box-shadow:0 0 12px rgba(0,0,34,1)!important;
}
div.peopleStrip.likeStripContainer.twocol,
div.group {
background:#444444!important;
border-radius:0px!important;
}
div.comment.expanded,
div.smartEdit {
background-color:#555555!important;
}
textarea#spStatus.status {
background:#555555!important;
font-color:#ffffff!important;
}
/* #####IMPORTANT!!! THIS SECTION DISABLED FOR US HOMEPAGE##### */
___div.streamCategories {
font-size:10px!important;
color:#ffffff!important;
background-color:#666666!important;
border-radius:0px!important;
position:relative!important;
left:610px!important;
}
/* #####FACEBOOK ADS & POPUPS##### */
div.glue-dialog.FBMP.large,
div.glue-overlay,
article.module.module6.columnModule2.odd.AdContainerModule.draggable,
article#module-6.module.module1.columnModule0.odd.adFbPromoModule.draggable,
li.recent,
.homeFooterModule {
display: none !important;
}
/* #####COLORIZE HYPERLINKS##### */
a,
a:link,
a:visited {
text-decoration:none!important;
color:#00bbee!important;
}
a:hover,
a:active {
color:#00ffff!important;
outline:0!important;
text-decoration:underline!important;
}
span.separator {
color:#00bbee!important;
font-size:20px!important;
}
/* #####FONT FIXES (THIS IS MAINLY FOR US VERSION)##### */
h4 {
display:none!important;
}
iframe,p,table,tr,th,td,li,ul,span,strong,
article,aside,footer,header,section {
font-family:Arial!important;
font-size:11px!important;
color:#ffffff!important;
}
}



Friday, February 3, 2012

Be careful out there...

A word of warning...

I now realise that I have been guilty of OVER-ZEALOUSNESS in my approach to ELEMENT BLOCKING.

In my determination to rid [my view of] MySpace of all UGLY GREY BOXES full of "celebrities" that I've never heard of, I've become aware of something.

Twice in the last week or so, I've been quick to blame MySpace or Mozilla Firefox for something that has gone awry. First there were no upload buttons on my VIDEOS page. Later I made a hullabaloo when the profile pages lost most of their content and there was no status update box with which to complain about it. I turned off the STYLISH to make sure. I rolled back Firefox to an earlier version yet again. I switched to another browser entirely...

...only to find out that IT WAS ALL MY FAULT!

MySpace has a peculiarly archaic, some might say lazy, approach to how it names the DIVs and SECTIONS and ELEMENTS of its page layouts. When we go about the task of beautifying our own 'Space with judicious and crafty use of a Cascading Style Sheet or two, we have to take into consideration that the original code that we are "hacking" is NOT THAT PRETTY in the first place. Shortcuts have been made. It might make things easier for them, but we have to watch our step.

The grey background behind that huge great list of irrelevance at the foot of the page? The box that contains the UPLOAD button on both the 'My Photos' and 'My Videos' pages?

THEY BOTH HAVE THE SAME NAME!

The big rectangular box on the log-in page that contains all the adverts and 'SLEB' GOSSIP? The box that contains your "What's Happening...?" interactive form on the homepage? The container that holds most of the content on your PROFILE page?

THEY ALL HAVE THE SAME NAME!

So next time you (i.e. ME!) remove something ugly from your (i.e. MY!) page, with a nifty "{display:none!important;}" line of script, or even by clicking on the HIDE ELEMENT button in AdBlock Plus, MAKE DOUBLY SURE that the element you are hiding DOESN'T share a marital name with something else on a completely DIFFERENT page. The chances are, you will only spot the anomaly when you try to do something, and the thing you are trying to do isn't there anymore!

Usually when this happens, you find yourself (i.e MYSELF!) in a sort of reverse "CRY WOLF" situation. "DYSFUNCTIONAL" has become such a normal situation on MySpace that we immediately think it must be THEM MONKEYING ABOUT again. We might forget to CHECK OUR OWN WORK first.