Monday, November 12, 2012

MBM3 revisited!

It's been a while since I paid a visit to the 'new' versions of the MySpace homepage...

As a proud owner of the UK/Artist's version of the MySpace homepage, I've been lucky enough to have been able to hold on to my 'classic' layout - you know? the one that they had BEFORE they put that second column there...? Over the months since I first published my MBM ("Minty Blue Minimalism") Stylish script on Userstyles.org, I've honed and refined my own 'v2.0' homepage beyond all recognition, making for a very comfy MySpace...

...except that most of you will now be using regional variants on the 'v3.0' homepage, which is completely different to mine. Some friends were baffled by their homepage background changing colour several times in a twenty-four hour period, which suggests to me that the elves of Timberlake Towers have been toying with ways of turning this real estate into advertising space. Customize YOUR homepage by using Stylish and you make sure you only see what YOU want. I first addressed the subject of styling the 'new' layout on this blog, but here's a little revision for anyone who's forgotten all that. You first need to equip yourself with the following:-

1) The right browser - Firefox is my first choice, but this also works with Google Chrome if that is your preference.

2) The STYLISH plugin - Visit the Userstyles.org homepage and click on the appropriate link to install the Stylish plug-in for your browser. Then...


That's the simplest method, if you want something 'straight out of the box'. Of course, after you've been reading these blogs a while, you'll be able to customize the page exactly how you want it!

The latest script - Let me talk you through the newest changes. The "general" @-moz-document domain(www.myspace.com) part of the script is pretty much unchanged since last time. This applies changes to all the pages across the MySpace domain, so there are still sections to hide the ugly footers and all those 'recommendations' that don't interest you, lines to remove the advertising space from profile pages, some font fixes to aid legibility (don't you just love those tiny grey-on-grey blocks of text they have now?) and a bit that cleans up the log-in screen so that you don't get bombarded with plugs for the latest pop sensation that they want you to care about. Used in cahoots with our old friend AdBlockPlus, it is possible to strip the page down to what YOU need and nothing more. In and out of your homepage and straight down to business!


As I say, this part of the script has pretty much stayed the same throughout all those months of experimentation. But now we come to the part that applies changes to the homepage only, the section labelled @-moz-document url-prefix('http://www.myspace.com/home'). This is where it gets interesting! Because there are in fact a number of different versions of the 'v3.0' homepage - one for 'musicians' here in the UK, a slightly different one for US musos and a different sort again for all you 'civilians' (itself having regional variations) - then I have TRIED to include something for everyone. There are parts of the script that may need to be disabled on certain versions. I have indicated in the script which bits are specific to the version I'm using and which ones apply to everyone. These 'instructions' are indicated by lots of non-markup characters and hash-tags, like so /* #####SPECIFIC TO UK/ARTISTS HOMEPAGES?##### */


Since I last tackled this homepage, I have done some work on the background. The featured texture is one that I found on a Free Desktop Wallpapers site (sorry, I can't remember which one it was, or I'd put a link here). I'd previously used it as the background for some PowerPoint slides I was designing. The blue-fading-into-pink colours matched very well with the shades of blue that I already had on my existing "MBM" layout, so I ...um... borrowed it for this purpose as well. I managed to solve the problem of the 'big white boxes' that still showed behind the stream container, by filling those with the background picture as well. Other page elements I was able to hide by filling them with RGBA colors with zero alpha values. Some I've made semi-transparent using alpha values of 0.5 or less, like the container around the profile name and stats, eg;
div.wrapper {background-color:rgba(0,0,0,0)!important;}
#col1_0.column.column0.columnPath1_0.columnDepth1.firstColumn.allowDrop {background-color:rgba(255,255,255,0.3)!important;}
The other spiffy new feature that you will notice is that the page's main toolbar is no longer a rather dull flat black colour. Using the decidedly non-universal moz-linear-gradient method of applying a background image, I was able to give it that shiny blue effect more in keeping with the rest of my scheme. The box shadow sets off the 3D effect nicely. These gradient fills are somewhat problematic as, in real life grown-up's web design, you usually have to include different versions of the CSS for different browsers. But as we are designing something here that will only work with Firefox, that needn't concern us. I have included (but disabled) another couple of versions here, in the hope that one of them will work with Google Chrome, should that be your browser of choice. Just remove all the underscores ( ___ ) before where it says background-image: to re-enable these parts of the script.
header#globalHeader {
___background-image: linear-gradient(bottom, rgb(2,56,97) 20%, rgb(0,101,253) 60%)!important;
background-image: -moz-linear-gradient(bottom, rgb(2,56,97) 20%, rgb(0,101,253) 60%)!important;
___background-image: -webkit-linear-gradient(bottom, rgb(2,56,97) 20%, rgb(0,101,253) 60%)!important;
box-shadow:0 0 12px rgba(0,0,34,1)!important;
}
Another another thing I have done this time 'round is to 'fix' the default font for the page. Usually this is ARIAL, but I'd noticed that the character spacing on the stream and comments looked a bit messy at times on this version of the MySpace homepage. I've taken the liberty of making the default font on my version of the homepage CALIBRI. This is a much nicer looking font that comes with Windows Vista and Windows 7. I do recognise that this is not 'universal' though, so users of other platforms might like to to experiment with something else. Remember, these Stylish scripts only affect what YOU see on YOUR browser, so you can use any font that you have on YOUR computer. Pick one that you find easy on the eye. If in doubt, stick with Arial!

What I HAVEN'T done - I haven't quite got the little friend selector button to appear as I want it. There are still ugly vestiges of MySpace greyness visible when you hover over the button, plus I haven't quite decided on the best size to make the font (specifying a font size for the button also affects the font size on the dropdown menu!). But I believe that this is one feature that doesn't appear on every version of the page, so I won't dwell on it too much. I would also like to include a script that makes the 'stream' half of the UK/Artist's page the default. Everytime you refresh the page it goes back to that (fairly useless, to my way of thinking) 'stats' page instead. If anyone else has any ideas for achieving this just using the tools available (ie; no JavaScript or serverside solutions, please!), then do let me know...

Ah! but maybe next time... Once again, here's where you get the existing code. Have fun with it!




Wednesday, October 3, 2012

FBegone!

That MySpace Music Player, eh? Ugly great brute, ain't it?! Like a number of other features on MySpace, it has 'afterthought' written all over it. With any luck, when the shiny all-new MySpace gets here, they'll have found a way to play music from a player embedded on the page, like you'd find on any other sensible 'media' site (the player controls that come with music and video links on your homepage's 'stream' have never worked, by the way).

While the Music Player works just fine and dandy up to a point, there is one thing that really grinds my gears every time I use it. As one of the couple of dozen people left on this planet who is not, and never will be, a Facebook user, I weary of that big white box that leaps into my face every single time I press the play button, almost ordering me to 'Share This On Facebook'. I don't want to. I don't want it. I don't need it.

END FACEBOOK POP-UP MISERY TODAY!

As on all of these bloggy thingies previously, I'm assuming that you are sensible enough to be using either Firefox or Chrome as your default internet browser and you have also installed the indispensible plug-in AdBlock Plus.You should also get yourself the additional plug-in's plug-in Element Hiding Helper For AdBlock Plus, which is rather nifty for weeding out all those picture and text elements that act like adverts but aren't really.

Your AdBlock will add its own items to your 'Tools' menu. One of these will say 'Filter preferences'. Click on this and a new window will open up. Click on the tab marked 'Custom Filters'. On the right is a place where you can block any additional annoyances that are not already fixed by AdBlock automatically. Click on that button that says 'Add Filter'. Copy the following line into the little box.

http://www.facebook.com/plugins/facepile.php?api_key=8744a0ccdce1491c4474dacf75dc2d12

...refresh the page to add it to your list, then hit the 'Close' button. You can do this sort of thing on many other sites too. For example, there is an equally annoying Facebook pop-up box that appears everytime you refresh the "Daily Show with John Stewart" website. The trick is to get the box's name by right-clicking on it and selecting 'Inspect Element', then copy that name into the 'Custom Filters' list.

But back to MySpace, to do a really thorough job of cleansing your site, you should also be running a Stylish script, as this will allow you banish the Facebook buttons altogether. For details of how Stylish works, read some of the previous postings on this very blog! If you're using one of my existing Minty Blue Minimalism scripts (v2, v3), then you need to add a line or two to the 'general' section - that's the bit that starts with...
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(www.myspace.com)
{
...which applies to the whole of the MySpace domain. Somewhere in there (I put mine in the part with all the other ad blocking), add the following line... 
 .connectFbFlyout {display: none !important;}
This will keep the linked Facebook button at the top of the Music Player (in between the 'Find Music' entry box and your little avatar), but stop its white 'flyout' box from flying out automatically.

And that's it really!

Of course, if you are a Facebook user and you want to share everything over there, the button should still function. When you click on it, your log-in thingy still appears in a new window. Only now it's a voluntary action and not one that you've been nagged into (you can now thank me by 'sharing' my music on your page, teeheehee).





Wednesday, September 26, 2012

Serif of Nottingham

An experienced user's own guide to the range of excellent products available from those awfully nice people at the SERIF concern (if that doesn't get me some freebies, I don't know what will!)

I've been using Serif's great software for many a year. Like a lot of other folks, I'm sure I first got introduced to them via the free versions they occasionally used to put on the coverdisks of certain computer magazines. PagePlus, PhotoPlus, MoviePlus - I tried them all out in this way. Of course, the first one is free, then they've got you hooked...
___________________

PagePlus (Desktop Publishing)
This is surely the flagship of Serif's catalogue and the one they're best at! I probably use this application almost daily and so have happily upgraded to the latest version on a regular basis. Currently that means version X6. As a piece of desktop publishing software, it probably has everything you'd ever need, at a tiniest fraction of whatever it is they charge for so-called 'professional' DTP packages these days. It's great 'all-rounder' but its main selling point is the ability to not only save your work in PDF format, but to open most existing PDF files as well. What a boon that's been! Anyone who is still deluding themselves into believing that M****soft Office (Publisher? or even - gawdelpus! - Word?) is a viable way of producing print-ready artwork, should think again and buy this little baby. You'll thank yourself for it and I know a few print shops who would thank you for it too!

Quibbles... None that I've come across! As I say, Serif have been doing the DTP thing longer than most and they're really good at it... actually no! Wait! I've just thought of one! The salesperson who persuaded me to upgrade to the latest version gave the impression that PagePlus would directly import CorelDraw files. This is not the case - you have to convert them to PDFs first.
___________________

PhotoPlus
(Digital photo editing and painting)
It costs a fraction of the price of the industry 'standard' PhotoShop, but this prog gives most image manipulation programs a run for their money (the budget ones and several of the big 'pro' ones as well). If all you want to do is 'process' your digital holiday snaps, this'll do. I'm currently using version X5, which does everything I need it to. It's pretty quick and easy to use and is not too demanding on the hardware, unlike some I could mention. Anyone who has spent an afternoon cropping and optimizing hundreds of pictures to go on a website will know what a strain bitmap editing can put on the old virtual memory! They normally bundle this with a prog called PanoramaPlus as well (you can probably guess what it does), which is a fun diversion for about a morning or so.

Quibbles...
Some of the generative effects, such as 'lens flare' are a little bit feeble. I found I still have to rely on my old friend The GIMP to produce the really spectacular over-the-top effects that I sometimes want. Serif also includes their AlbumPlus for managing your folders full of pictures. It's okay up to a point, but I would welcome the ability, once I've sytematically organised all my pictures into a virtual filing system for easy reference, to be able to output the resulting thumbnail 'catalogue' as some sort of printout or PDF file. Otherwise it's not much good to me.
___________________

WebPlus (Web design)
I'm now up to version X6 of this baby, but I'm begining to feel I've outgrown it a little. I probably wouldn't bother to upgrade any further, thank you very much. If you are a complete novice at designing a website, knowing absolutely zilch about HTML, and simply want a straight-out-of-the-box solution to creating your own internet presence, then I would wholeheartedly recommend it. If, however, you've picked up a thing or two about HTML and CSS over the years, you'll begin to feel its limitations. To their credit, they do continually introduce new features which have got me out of a sticky situation once or twice, such as finding a painless way to add 'social media' buttons to an existing website.

Quibbles... The sales pitch for WebPlus X6 makes great claims for its ability to create mobile websites. BUYER BEWARE! A number of Serif-generated features didn't work on the smartphones that I tested my site on. What works on a desktop (which is probably what you'll be using to preview your 'job' to start with) won't necessarily work on those funny little non-compliant browsers they stick on your 'phone these days. The WebPlus-generated 'redirect' code didn't switch portable devices to the mobile version of the website - in order to do that, I had to write my own script and paste it into the site's main homepage as an HTML fragment. Any animated navigation menus generated by the program didn't function properly on at least two different flavours of mobile. I had to resort to a much simpler text-only approach. It should also be noted that including that (usually helpful) 'TITLE' attribute on any hyperlinks or images is a waste of time if you're designing for mobile, because mobile browsers don't appear to support 'tooltips'. Another thing that I've noticed historically about WebPlus is that, while they contantly introduce new features to entice you to upgrade, they very often get rid of some old ones (some that I might still consider useful) at the same time. Some Dynamic HTML features, such as scrolling marquees, are no longer considered 'fashionable' and so have been dropped since X5. It is possible to work your way around this, if you know some HTML and can insert your own code 'in lieu'. One little quirk, one that is so well established now that I've learnt to live with it, concerns the built-in text editor WritePlus. Though it's a perfectly servicable little app for editing your articles, with all the features you'd expect from a 'word-processor lite', through all the versions I've used, I've never once figured out how you can change the font colour from within the confines of the editor. You have to leave its screen and do it 'on the page'.
___________________

DrawPlus
(vector drawing and tracing)
This is an excellent vector drawing program which, I would go out on a limb and say, gives CorelDraw some stiff competition (at about a sixth of the price). Having said that, I don't use it that much myself, as PagePlus' own built-in drawing tools do pretty much everything I need these days, so I've not upgraded this beyond version X4. I occasionally use it for drawing quick buttons to put on (non-WebPlus) websites. What DrawPlus is very VERY good at is tracing bitmaps and turning them into vectors. It's so fast and tweakable, it has completely pushed my old version of CorelTrace to the back of the cupboard.

Quibbles... I probably don't use it enough to have noticed anything annoyingly wrong with it. I wish that its rulers would stay set on pixels, as I mainly use the prog for creating elements for websites... but everytime I boot up DrawPlus, it has defaulted to inches again! Maybe that is an issue that they've addressed with more recent versions, but it's such a small thing and not worth me upgrading just to find out if they have!
___________________

MoviePlus (video editing)
I first purchased this as a free 'starter edition' download and then, having been suitably impressed by that (at the same time realising its limitations), upgraded to the full X3 download version. I should point out that I have no serious 'need' for this program. I frequently resist any of Serif's nags to upgrade to the latest edition. I've experimented with it a couple of times and produced some reasonable results (see CC:PP videos), but I don't own a any other sort of digital video equipment, so it's just a bit of harmless fun. But if you do need an editing suite to go with your spiffy new video camera, then you can't go wrong at this price.

Quibbles... It makes huge demands on the hardware, so it can get pretty slow at times. But this is not a specific 'quibble' about MoviePlus, that's true of all video editing software. You need a pretty powerful computer to edit video, or else you will run out of steam quite quickly. Digital moviemakers at the professional level tend to quote things in terabytes rather than in megs and gigs! I have to say (and this is true of all of Serif's stuff) that MoviePlus doesn't make as heavy a demand on your system as similar progs I've tried out, providing you don't get too ambitious. I've probably not used it enough to notice too many minus points just yet.
___________________

One General Quibble... Throughout their existence, Serif have stubbornly refused to include any online one-touch registration facility in their software. When you want to register their software (and you have to do this to stop those annoying nag screens everytime you boot up), you have use the telephone. The call is free, but it can involve you being kept waiting for fifteen minutes while you listen to some icky synthesized Mozart. When you finally get to talk to a human being, they will probably try to sell you another upgrade while you wait for your registration code to be generated. One registration code will unlock all of the Serif software on your computer... but should you need to upgrade your system at any time, when you've finished reinstalling everything, it means "The Return Of The Nag Screens" - and you have to do it all over again!

www.serif.com

Comments from over there - A couple of people have 'corrected' me over on the Serif Forums, for which I am grateful (at least it proves that someone out there is actually reading this crap)...

AP - That's an interesting article, but just to pick up on a couple of points... the Serif animated marquee doesn't use DHTML/JavaScript, it uses Java. I'm sure it wasn't dropped because scrolling marquees are no longer considered 'fashionable'; I think it was dropped because Java is often a vehicle for malware nowadays... They want you to think that you have use the telephone, but you can also register online.
re: Dynamic HTML - ...people have now pointed this out "it doesn't use DHTML/JavaScript, it uses Java". I think what I was meaning is that these kind of dynamic effects are what we used to do using Dynamic HTML (I 'grew up' using FrontPage, for my sins), but that DHTML has fallen out of 'fashion' in favour of other ways of doing this. Then again sometimes these don't always work on 'certain' browsers because folks don't let them allow Java content for 'security' reasons. Catch 22!
re: online registering - Yes, I happened to stumble over the online option the other day. You're right, it's there, but they don't exactly draw attention to it (eg; by actually telling you this on the nag screen itself!). As I've found whilst digging around these forums (fora? fori?) over the last couple of days, there's a lot of 'work it out for yourself' involved with Serif's products.

Monday, September 24, 2012

Stuck inside of Mobile...

I hate mobile phones. I hate all phones, but I particularly hate the wretched little pocket variety. I hate the demands they make on your wallet and the fact that, even though you never stop paying for them (The Gift That Keeps On Taking), they are virtually obsolete the minute they leave the box. I hate their piddly little keys. I hate the fact that my head gets microwaved every time I use one.

I don't need one in my life. I do have one, but it is an obsolete Nokia 2310, which does nothing except make phone calls and allow people to call me. It's nothing more than a glorified pager. That's what I expect my phone to do. I don't want to use my phone to take pictures, or play games, or surf the internet, or listen to music, or watch telly. I already have a perfectly good camera. I watch telly at home, not on the bus. I already have several MP3 players. I already have a near-state-of-the-art PC. I don't play games.

It's a generational thing, but I also don't text much. I hate the fact that these horrid objects have gone some way towards reducing the written English language to a sequence of monosyllabic grunts.

But, for my sins, I'm trying to design web pages and I need to move with the times (bah! humbug!). Having lived through the years when all computers were shackled to chunky great monitors which had a screen definition of 800 x 600 pixels (if you were lucky), it was liberating as a designer to be able to do MORE with a web site. Screen resolutions and connection speeds had reached the point where near-cinema quality pictures are now possible. Web browsers also became more and more sophisticated, with cross-platform standards (with the exception of M****soft's Internet Exploder, hahaha) that could never have been possible before. It has been a golden time to play with computers.

Except that now, the Sinister Marketing Forces have decided that the future of the internet is mobile devices. I'm having to rethink everything I held to be true because, for reasons I cannot fathom, public demand is that the internet should now be squinted at through smaller and smaller screens.

_____________________________________ 

CASE STUDY
This website, built for a friend of mine who is something of a big cheese in the world of digital and 3D broadcasting, is several years old now. I recently bought the latest version (X6) of Serif's WebPlus software, so this seemed like as good a time as any to drag the site screaming by the scruff of its stylesheets and bring it up to date a little.

Looking at the site on my chum's enormous high-definition widescreen, I was struck by how small it all looked nowadays. I therefore rejigged the master pages and tweaked the whole of the website to suit today's larger monitors, at the same time not making it too big, so that those without the benefit of big screens won't have to resort to horizontal scrolling (another pet hate of mine!).

Among the spiffy new features introduced by Serif for this version is the ability to add 'social network' buttons. We'll have some of those, says I! You can now tell all your friends on Twitface and Booker about the site, at the click of a 'share' button. You can bookmark the site on Google and 'Plus One' it on GooglePlus. I've also updated some of the content (overdue), as some of the links went to websites that have moved or don't exist any more!

Another heavily-touted new WebPlus feature is the facility to create a version of your website to fit on these new-fangled mobile doobries. This seemed like an ideal opportunity to do just that with the HDDC site. It is perfectly possible to view an existing 'desktop' website on a mobile device, but really, when laying out pages, one needs to think "portrait" rather than "landscape". My existing website is very much in the "landscape" camp, with that navigation menu running down the side and some of the pages having more than one column. I'd have thought that cramming all that into something mere inches across would ruin eyesights the world over. Serif will allow you the option of integrating 'mobile' versions of the pages into your existing site or creating two completely separate versions of a website. You then include a "redirect" script which determines what browser you are using to look at the website, and then switch to the page size to suit you. I decided that creating a separate parallel mobile site, rather than mixing all the pages together in one project, would make it easier (for me) to navigate.

The first prototype of the mobile version of the site doesn't look that different to the desktop one. All the content is same, but I've now laid out each page in one single scrolling column. I based the dimensions on the screen size for the original iPhone, a visible width of 320 pixels. I believe Blackberries and Androids and Symbians are all about the same width, so that seemed like a size to plump for (Serif's own manual pages about designing for mobile were most unforthcoming on such specifics).


The main headscratcher with this project was this - How do I include a navigation menu on every page? The site has ten or more pages, some of which have sub-pages of their own. A text-based list in a reasonably legible font fills the entire screen! The obvious solution would appear to be a dropdown navigation menu, normally hidden away but which appears under the page's 'home' button when you point at it. I designed one using Serif's own tools...


Now remember, I don't have a smartphone of my own on which to test this ruddy thing, so I rely on feedback from those that do! Having made the first prototype go 'live', I discovered that the Serif script which directs phone users to the mobile version of the site... didn't! I had to type a much simpler javascript fragment of my own and paste it into the homepage's 'head', which apparently did work. The Serif one was a lot more complicated; it has an 'include' list of all the various flavours of mobile phone, with the option of specifying screen sizes. It might be customizable to get it to work, but why bother? Mine (gleaned from the net and then tweaked to suit) was a lot easier - All I ask is that screens bigger than 700 pixels wide (that would include tablets 'n' pads) use the desktop version, and anything smaller than 699 pixels (the majority of existing mobiles) redirect to the mobile site.
###THIS GOES IN <HEAD> PART OF MAIN HOMEPAGE###
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "http://www.hddc.co.uk/mobile/m-index.html";
}
//-->
</script>
Now having done all that and got the connections working... it was reported that the dropdown navigation menu doesn't work on my chum's Samsung. What a palaver! Me being an ignorant newbie, I don't know whether this is just a 'thing' with touchscreens, or whether his browser in particular has an objection to javascript-based menus in general (it's a mystery to me how you can adjust the software settings on these things. Perhaps they don't expect you to?). When he points at the home button, instead of a nice dropdown menu (tested by me on every flavour of desktop browser) he sees an orange error box. At this point (well, shortly after I'd finished with the head-banging-on-wall routine), I mentioned all this in a MySpace update, hoping that I might get some feedback from a few other chums...

...otherwise, it's time for a rethink. A Serif-generated menu, while it works jez dandy on a PC, won't necessarily be compatible with all them other devices. I needed a non-java solution, just using good old HTML and CSS. Now those I understand! Prototype number two looked like this:-


The 'rainbow' of coloured bars running down the side of the screen does away with the need for any sort of obtrusive real-estate-hogging text... but it quickly became obvious to me that a purely 'graphic' approach might not be clear in its purpose for the user. I added a 'title' attribute to each of the bitmap buttons so that there would be pop-out text 'tooltips' telling the user where the buttons link to. But the browsers' own tooltips aren't particularly pretty and they appear rather slowly and relative to the pointer, rather than alongside the buttons themselves. I also wearied of the rainbow theme, which doesn't fit the 'corporate identity' of the site.


As a standalone HTML project, I've built a set of menu buttons that look like this (above), with a little window that is fixed in one place, displaying the tooltips for each button. But I haven't had any success incorporating it into the 'real' site yet - I fear it might clash with the site's own existing CSS and that a few overriding !important;s may be needed for everything to work properly... yep! you guessed it! It's a "WORK IN PROGRESS"!

The current "working"(?) version of the site looks like this (at least temporarily), with plain buttons more in keeping with the sites own colours. It still relies on the browsers' own tooltips though, so I'm waiting for the 'field testers' to let me know if it is actually practical as a navigation solution.*


STOP PRESS - * No, it isn't. The tooltips don't show up at all on the mobile browsers we've tried. We've now plumped for a homepage-sized text-based navigation instead. Ho hum. So the ultimate answer to the question "How do I include a navigation menu on every page?" is... I don't! (By the way, the arty homepage picture of Peter, which I had to remove in order to make room for the 'menu', has now been moved to the "Principal" biog page...)


_____________________________________

Far too many websites today look to me like kitchen appliances. Many 'designers' seem to go for a standard, clinical shiny-white-with-grey-buttons scheme.

Why don't they try to inject a much needed splash of colour? My own attempts at trying to do just that, especially with certain social media sites, are well reported within these very pages.

It takes a lot of effort to 'design' a website from scratch. As I've found, it takes even more effort to adapt an existing website for mobile viewing. Nowadays, because you have to make it look 'good' on any device, not just your favourite desktop internet browser, it means building more than one version of the website... or going for the lazy option and keeping it really simple, making everything look as generic as possible. Boring.

Not content with destroying the written language, I believe that mobile phones have now turned graphic design back several decades as well.





Monday, May 28, 2012

MySpace 3.0 Workarounds

Finally, we say farewell to MySpace's "PROFILE 1.0"

Whaddya mean? We said goodbye to that old thing two years ago, didn't we? Well, yes, I thought so too...

Except that, it seems, only now have the last remaining old school MySpace diehards had their customized HTML codes overwritten and negated by MySpace, forcing them into the wonderful world of "PROFILE 3.0", whether they like it or not.

MANY OF THEM DON'T... and there has been a resumption of the old "GIVE US BACK OUR PROFILES" protests that I thought had fizzled out all those months ago, when we had that mass exodus of disgruntled users to F***book.

Well, yer old Uncle Minty is here to try to persuade you that a Profile 3.0 layout can be just as much fun as the sprawling undisciplined mess, sorry! "artistic self-expression" that you held so dear. With bells on.

But it takes a lot more work on your part. You can't rely on those "PIMP YOUR PROFILE" sites to generate all the code for you anymore (hmm... I wonder what's going to happen to all THOSE now?)

I'll hold my hand up and admit that I didn't like it at first either, as my blog archives will attest. But as I was an 'early adopter', when the ruddy thing was still in BETA, I've had a lot more time to figure it out for myself.

ONE THING I DO KNOW... The best way to create a nice Profile 3.0 layout is to START FROM SCRATCH. You can't just import all your old stuff from your Profile 1.0/2.0/whatever and expect it to look as it did before. Yes, I know it's frustrating, but there you go...
_________________

LOOK WHAT THEY'VE DONE TO MY PAGE, MA... The first thing you will have seen, on that fateful day when you woke up and saw that all the colour had drained from your pages, would have been something like this:-



This is a MySpace profile in its rawest form. This is what all those abandoned pages from two or three years ago look like now, although they probably wouldn't all have had that big pen drawing of a hairy gentlemen in the right-hand column!

However, it is that right-hand column that we shall turn to first.

MySpace have, in their wisdom(?) saved all your old HTML code for you, in that very box that they have named as "BLURBS" or maybe, if you are a 'band', as the more prosaic "BIO". If you are looking at your naked page while logged in, you will notice that, when you hover your mouse over one of the modules on the page, a white or light grey tool bar will appear on the top of it. Click on the little pencil icon on that 'blurbs' box and an editor screen will pop up.

THERE IS ALL YOUR OLD CODE...
Now I would suggest that, before you do anything else, you copy all the contents of that editor box into a notepad file and save it. A lot of it, especially the 'Pimp Your Profile' generated stuff will now, it has to be said, be completely useless. But within all that blurb is all the self-written, self-descriptive TEXT that you had on your profile previously, as well as all the embed codes for all your PICTURES and other media. You'll be wanting those if you want to put all your STUFF back on the page roughly where it was.

THE 'NEW' PAGES ARE MODULAR... Instead of locking all the bits of your page into a fixed two column layout, you can now drag 'n' drop the MODULES where you want them. You don't have to have all of the default modules on your page, you can delete them or, rather, hide them from view. If, for example, you are a band, but you have no gigs listed in your 'forthcoming events' list, then you don't want that empty box taking up real estate on your profile page. Similarly, if you are not a MySpace blogger, then why would you need that box that says "so-and-so has posted no recent blogs" on your profile? Click on its "X" and hide it from view.

In fact, with the exception of the music player and (providing you actually want them on the main page) the comments board, you may safely remove all of the modules on your page and build better replacement ones using HTML...
________________________________

INCLUDING HTML IN YOUR PAGES... I've used one of those 'abandoned' artist profiles of which I spoke earlier as a sort of TEST LAB, so that I see for myself what you CAN AND CAN'T DO when using HTML on profile pages. It's a page that I just happen to still have the password for, because it was a 'collaborative project'.

(HINT: I created the background first, and then used that as the basis of my colour scheme, utilising a handy 'color-picker' plug-in for Firefox called RAINBOW. When you're styling pages, you will always find yourself jotting down a lot of RGB/HEX code as you go along!)



THINGS YOU CAN'T INCLUDE

1) You can't use CSS to style your page. This is probably the main argument 'against' that folks use when they say "Profile 3.0 is not customizable". It's surely a deliberate ploy by MySpace to stop those third-party "PIMP YOUR PROFILE" CSS generators from working (in the name of 'security'). The upshot is, there's simply nowhere for the script to go anymore. If you want to 'pimp' your pages in a way that lets everyone else see the styling and not just you, then you have to work within the limitations of good old-fashioned HTML. Sorry folks, welcome to the dark ages.

2) You can't divide your HTML into <head> and <body>. There's no sneaking scripts onto your page that way, oh no! the MySpace robots will see right through that ploy and remove any 'offending' code, substituting little rows of dots where the code used to be. If you're not careful, that includes everything between the tags.

THINGS YOU CAN INCLUDE

You might not be allowed to express yourself in the form of a Cascading Style Sheet, but you can include just about any kind of customization within the HTML tags of the page elements themselves. It just gets a little more repetitive, as you have to apply changes to each <div> or block of text individually, rather than create a master style for everything (Hahaha, welcome to my world! This is how we did things back in the 'good old days'!)

So, instead of having a CSS script that says something like:-
div, span, table {
       font-family:Arial;
       font-size:12px;
       }
you are going to have to insert the following bit of formatting BEFORE each of your text blocks:-
<div style="font-family:Arial; font-size:12px;">
and then END the text block with </div> to indicate that the styling no longer applies from that point on. Easy peasy, it's exactly the same language, just a slightly different regional dialect!

In fact, you can use that <div> tag to include a whole bunch of styling scripts, that not only change the font, but can fill in a background with a colour or pattern, or add drop shadow effects to the text or the <div> itself. "Here's one I made earlier..."


That HTML box, when viewed via its editor window, contains this (extra spacing and line-breaks added for clarification):-
<div style="background-color:#0d2f5c; padding:12px; text-align:justify; opacity:.60; box-shadow:5px 5px 5px rgba(0,0,0,0.8);">
<p style="font-size:14px; color:#ffffff; text-shadow:1px 1px 1px rgba(0,0,0,1);">
<strong>
All of this music was....bla bla bla...
bla bla bla... yours Mintilly)
</strong>
</p>
</div>
Notice that I've included, within the <div> tag, scripts for background colour (specifying an RGB/HEX colo[u]r), padding (puts a margin around the text), text alignment (you can justify the text, centre it, or range left or right, just like this here word processor), opacity (makes the entire contents of the <div> slightly see-through) and box-shadow (yes, you guessed it! it applies a drop shadow effect to the box). After that there is a further <p> (paragraph) tag, containing instructions about font size and font colour, and adding a subtle drop shadow to the text itself. You will have already specified a default typeface for your page via the MySpace "Customize Your Profile" editor. But if you want to use a different font for just this box, then you can include that too. In theory, that style="" can include anything that would normally (nowadays, in the real world) be done using CSS! You can also include style="" scripts within the tags for IMAGES. This way you can give your pictures borders or drop shadows (as you will have noticed, I like those!), or even make them semi-transparent.

Once you've styled one <div>, you can duplicate the tags from one to another, using good old CUT & PASTE, for near-CSS-like consistency. Or be a complete HTML ANARCHIST and have a different style in every box!

BUT DON'T FORGET TO CLOSE ANY TAGS THAT YOU OPEN!!! If you don't, then the HTML is incomplete and nothing will work on the page. You should 'nest' all your tags on a first in, last out basis as you see from the example.
<div>
  <p>
    <strong>
    All of this music was....bla bla bla...
    bla bla bla... yours Mintilly)
    </strong>
  </p>
</div>
Your code doesn't go entirely unnoticed by the SpaceRobots though. It does get scanned and autocorrected to fit the syntax of their own version of HTML. If, like me, you're accustomed to using <b> and <i> to mean 'bold' and 'italic', then you'll notice, if you revisit your code, that they have 'corrected' this to <strong> and <em>, which are now considered more 'compliant'. No biggy.
_________________________________

So having, somewhere near the top of this page, suggested that you scrap all the modules on your page and replace them with HTML ones, here's how you do it.

1) You remembered to copy all your stuff into back-up text files, right?

2) Delete individual modules by hovering over their popout toolbars and clicking on the "X". You will be asked "Are you sure...?". You are, trust me. You can always put them back again later.

3) Click on that button at the top of the page that says "CUSTOMISE" (it might be spelled with a "zee" where you are?). A bar will appear with further buttons that say "LOOK & FEEL" and "MODULES & MARQUEE". We want the latter.

4) A further "MODULES" button reveals this...



As you can see there are icons for all the different types of module that can go on a profile page. I happen to believe that "Just because you can, doesn't mean you should". The great thing about Profile 3.0 is that it's kind of like a 'proper' website, with an 'index' page and then sub-pages for all your content. You are not forced to wear everything on the front page anymore. There's a menu down the left-hand side of the page that takes visitors to your stuff. So choose wisely and organise.

5) In the top left of that lightbox is an icon that says HTML BOX. As far as I've been able to determine, you can add as many of those to your page as you like.

6) Create a new HTML box on your page. Hover over its toolbar and then click on that little pencil icon. There is your HTML editor. At this point, you can cut and paste back some of that old 'blurb' that you saved in a text file and START CUSTOMISING IT! Try out the HTML tips I've suggested above, but also borrow a copy of "HTML For Dummies" (or something similar) from the library and pick up a few tips from there. Better still, buy second-hand copies of any good books for ready reference (I still consult my copy of "HTML: A BEGINNER'S GUIDE" nearly everyday). Once you are familiar with the syntax, you can slip in all sorts of funny, quirky little things into your code.

7) Here's another very handy tip... Make your pictures (and Youtube clips) FIT the width of the column by  including width="100%" (i.e. specify the width as a percentage rather than size in pixels) somewhere within the <img> tag. If you also delete any height="" references (which will lock the height regardless of what you do to the width, resulting in squashed or stretched pictures), the images will then be in their original aspect ratio, but at the maximum size the column will allow. Arrange your pictures so that the big ones go in the wider left-hand column and the smaller ones go in the narrower right-hand column, that way they will be displayed to their best advantage.
_____________________________

One last(?!?) thing... Creating your own HTML boxes is also the best (nay, the only) way to include hyperlinks within your text. This seems a bit more complicated, but it's really only the equivalent of highlighting a bit of text in your word processor and then telling it to create a link. This is really useful if you want to create a customized module that contains a table of links to all your favourite sites or blogs.

Before each piece of 'linked' text you need to include the tag
<a href="http://***insert the URL here***" target="_blank">
then you enter the text itself...
...and then close it with
</a>
<a> stands for 'anchor', by the way. I hope I'm not stating "the bleedin' obvious" too much when I point out that you have to type in a real web address in place of that blue bit! The target="_blank" nicety is just a way of telling your browser to open a NEW window or tab, rather than opening the linked page in the SAME window, thus navigating away from MySpace. If you don't put that closing </a> after your text, it won't work as a link! It's a good idea to keep a paper record of any links you create, as the MySpace robots automatically turn all of your real URLs into those daft "MSplinks" instead. Should you wish to go back and edit them later, it's nigh on impossible at a glance to figure out which is which! Wot larks, eh?

Now fly my pretties! Try it out for yourselves.



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+!)



Thursday, March 29, 2012

A place for FRIENDS???



It's official. It's definitely no longer "A PLACE FOR FRIENDS".

MySpace are trying to shrug off the "SOCIAL NETWORK" mantle.

We kinda sorta realised that some time ago.

But now they have systematically made it impossible for it to be a social network, by making it impossible for users to interact socially.

First the FORUMS disappeared, then the 'THREADS' (a rather feeble short-lived attempt at a sort of "SON OF FORUMS" that, having no sort of user-controlled invigilation, very quickly became a completely unusable mess). Now we can't even comment on each others STATUS UPDATES before the comments (or frequently the updates themselves) vanish into the ether.

Now that the STREAM shows mechanically-selected highlights of our activities, rather than anything in 'real time', 'Status Updates' have been stripped of their immediacy, making them neither 'updates' or reflective of the 'status' of things.

The dwindling few of us that would still like it to be a 'social' site - who still cling to the hope that it might still be one, having long-established loyalties to the site and to each other - they seemingly don't want around.

We're like the embarrassing cousins they keep locked away in an attic.

We're an obstacle to their plans to make MySpace something else entirely (apparently a less functional version of the many media-streaming sites that are out there already. Superfluous!).

In the new MySpaceLand, we are not expected to participate and interact with each other. The new[est] owners at Timberlake Towers want us to sit back and enjoy being spoon-fed PRODUCT like happy little consumers.

They've made it untenable as a social site, in the hope that the 'old school' users will just shut up, go away and leave them to it.


Friday, March 23, 2012

Essential Extensions

Presenting a small select band of FIREFOX plug-ins that I couldn't possibly imagine living without. Yes, alright... I know it would ordinarily be a "TOP TEN"... I do have others I COULD have used to make up the numbers. But these are either disabled by me (not a big fan of those customized tool bars that certain applications, trying to be 'helpful', install on your browser) or by Mozilla themselves (not compatible with the latest version of Firefox). So clearly, I CAN live without those!



#7 - a flash video downloader (YouTube Downloader)
Yeah yeah, I know it's a bit naughty (and a wee bit pointless, to be honest) DOWNLOADING material that was only meant to be STREAMED (much of which probably shouldn't even be there at all, if the copyright owners have anything to do with it!) But there comes a time when it's VERY useful. Let's say, f'rinstance, a friend with whom you are collaborating on a sort of "words & music" project, has posted on YouTube lots of videoblogs of herself reciting her poetry. It's jolly handy to be able to have a one-button solution for the task of getting those recitations (words and/or pictures) onto your own computer, so that you can go about your deviant remixing duties.
Details here


#6 - a web colour analysis tool (Rainbow)
So you're creating a new Stylish script (of which more later), happily hacking away at the CSS of some website or other, with the view to adding a splash of colour. Ah! but what colour, eh? How do I get the background colour of my 'divs' the exact shade of brown that will match that wallpaper? Well, that's where this little baby comes in. Switch it on and then point at anything in your browser window and you will be instantly presented with a little widget that shows you the colour and its hexadecimal value. Copy that 'alphanumeric' into memory then, if you want to convert the 'HEX' to a 256-increment RGB number, there's a handy pallet that will show you exactly that. You can also save your own pallet of colours into a library, so that your projects will always look consistent. 
Details here


#5 - a tool for temporarily hacking and reformatting pages (HackTheWeb)
I used to be extremely keen on a plug-in called Aardvark, but that one doesn't seem to work anymore with recent versions of Firefox. This one does pretty much the same thing though. There are times (for example, when you want to print out a webpage) when you want to temporarily remove an entire columnful of irrelevant bumph (more often than not, it's folks trying to sell you stuff). You just want look at the main feature that runs down the middle. I find this particularly useful for printing out railway timetables and recipes. Strip the webpage of all the stuff you DON'T want on your piece of paper and you'll find it all fits a little better! This tool was also useful (before Firefox upgraded its own 'developer tools') for pointing at page elements TO FIND OUT WHAT THEY ARE CALLED for inclusion in those all-important stylesheets.
Details here


#4 - a nice restful browsing environment (Firefox PERSONA Add-Ons)
Let's face it, Firefox looks a bit dull in its natural state. There are however A LOT of user-created "Personas" available for changing the appearance of Firefox itself. A lot of them, it has to be said, are quite garishly horrible as pieces of 'design'. The 'designer' has gone for a trendy pop theme, but has given no thought as to how legible the superimposed text will be or even whether their blurry picture of a bikini-clad screen goddess or Japanese boy band will even fit on the available space on the browser. Some of the colour choices render their efforts unusable and you wonder why they even bothered. But hey! it takes all sorts... I personally like a fairly plain background texture, with a contrasting font colour. Any picture elements should be placed over on the right-hand side where they don't get in the way of my tools and shortcuts. I always try out a scheme first to see if it's a comfortable fit. If something is too "IN YOUR FACE", or it clashes with my windows and buttons, then it's not a keeper. As you can see, my current choice is based on the sleeve picture from Miles Davis' "Jack Johnson" album, but I usually have about ten different themes saved in my Add-Ons Manager, for rotation as and when the mood takes me. Some of them are music- or TV-related, some of them are just "textural" and abstract.
Details here


#3 - Modify Headers
There are a number of geekoid reasons why you would want to "ADD, MODIFY & FILTER HTTP REQUEST HEADERS" if you are a 'developer'. Quite frankly, they don't concern me and I shouldn't need to bother you with them either, even if they mattered, which they don't. No, there is ONE REASON ALONE why I have this plug-in nestling on my tool bar. It allows me to watch "THE DAILY SHOW WITH JON STEWART" without those "This Video Is Not Available In Your Territory" blocks. It tricks the server into thinking that you are somewhere Stateside and so you don't get nagged at. I have it on good authority that it works in the other direction as well. American citizens can use this method to watch BBC and ITV (and Channel 4... and five) programmes via the channel websites' media players - but don't ask me for specifics!
Details here


#2 - an ad-blocker (AdBlock Plus)
You still use the internet while being constantly bombarded with pop-ups... Your social network page is slowed down by being covered in banner adverts... Do you get really annoyed by these things? Well, then, you've only yourself to blame! Yes! I'm talking to YOU, MySpace users! I have no sympathy for you whatsoever. Heck, you're probably still using Internet Explorer, aren't you? I haven't seen an advert on a webpage for seven years or more. They take up vital webpage real-estate and they're not aimed at me anyway. AdBlock is an essential part of my browsing experience. It does exactly what it says on the tin, and it does it quietly and unobtrusively.
Details here

#2(b) - an additional plug-in that lets AdBlock selectively remove unwanted elements (Element Hiding Helper)
...and if you have AdBlock Plus, you'll definitely want this to go with it! Some web pages contain plain text or simply pictures which are adverts in disguise (and just as annoying). AdBlock won't normally treat them as adverts at all, so you need to manually make them go away by adding them to a blacklist. That's where this thing comes in. It adds a "SELECT AN ELEMENT TO HIDE" item to AdBlock's context menu. You can probably guess the rest!
Details here

#1 - the user styles manager (Stylish)
What would I have done with my evenings and lunchtimes for the last two or three years if it wasn't for this, "MY FAVOURITE WASTE OF TIME"? I'd have had to take up poetry and fill my blogs with something else instead! I don't think I've had a single day in the recent past when I haven't tweaked something or other (usually on one of my social network sites) through the magic of CSS... and this is the baby that allows me to do just that (if you haven't already twigged!)
Details right here on these very pages!




Wednesday, March 14, 2012

Golden Brown Google (Revisited)

As I mentioned in a previous post, I've settled on this STYLISH colour scheme for my Google Plus pages. But as I also suggested, I am constantly finding new elements on the various pages that needed styling to match the new colours, so it's a continuous process.

This especially means bits of text that pop up over my dark background - they need turning white so that they show up again (remember that Google pages are mainly black-on-white in 'real life'). The script has therefore grown like a triffid over the last week or so, as I add more and more of those funny looking Google 'divs' and 'spans' to the list. In addition to that, I've added a section to the script so that the styling extends over onto my GMail pages as well. This, as I hinted at on this blog, is still an ongoing process - I haven't quite got everything to match yet! Some of the popup pages-within-pages still tend to have bits of brown background showing where they shouldn't, or have grey text which is still difficult to make stand out.

I've also included some features which might be considered 'optional' by some of you.

I personally have absolutely no interest in ever playing ONLINE GAMES, so I have included a couple of lines of script which hide from view the games buttons and links. If games are your thing, then you will naturally want to disable that part of the script.



Once again, I refer you back to THIS TUTORIAL BLOG, if you have no previous experience of using STYLISH for page styling on your Mozilla browser (Firefox or Chrome). Having digested that, you should be ready to copy the following script into your "Add-Ons Manager" and MINTY'S YER UNCLE! This time around I've tried to colour-code the script so that you can see what all the different sections do (and which 'divs' and' spans' and other elements they refer to). That way, you will be able to change the styling to something of your own in you wish. But if you want to copy the script exactly as it is, then just cut'n'paste away!
#### INSTALL THE CODE HERE ####


Additional... I suggested previously that I thought a continuously repeating tile background worked better than a single big wallpaper picture. It's certainly quicker using smaller images if you DON'T have a super-fast connection with near-instantaneous page-loading times. But I must concede this DOES look impressive! It's a good test demonstration of how the opaque page elements show up against a different background. I haven't changed any of the colours of my styling here, only the backgound picture. The trick, of course, is to choose a background that is not too 'busy'. Otherwise it becomes a distraction and makes things hard to read.

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... my STYLISH scripts for G+ don't work anymore.

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