Monday, January 2, 2012

Minty Blue Minimalism #5 (2011/08/18)

First published on MySpace blog - 18/08/11
In which our hero considers using some of the 'other' internet browsers that are available, in light of the ongoing incompatibility with Firefox 6 (n.b., Microsoft Internet Explorer is NOT an option and never has been!)

Apple Safari can be STYLISH too!

So then... "STYLISH" on Firefox is no more. "STYLISH" on Chrome is a bit iffy now. This might be because of my computer, or the operating system, or the version of Chrome I have, or, more than likely, because my script has been thrown together in a rather slipshod manner over a period of months and is in dire need of some AEdiX action!

The fact is, I can't work on MySpace without "STYLISH". I've grown accustomed to its face. The 'new' MySpace homepage is functional, sure, but it's UGLY! As a web designer myself, it pains me to look at it. I can't put up with a bloody great nag screen for F***book leaping into my face every five minutes. It is full of stuff that I don't need. Advertising is for other people. "STYLISH" made it possible for me to COPE with all of MySpace's little quirks...

But MySpace without "STYLISH"? What IS a bloke to do?

And what about all you other folks out there who don't use [an earlier version of] Firefox or Chrome? Don't YOU deserve to have a splash of colour in your dull grey MySpace lives?

Well, the trick is to take my "STYLISH" script (from within these blogs or from http://userstyles.org/styles/48344/myspace-homepage-2011) and first turn it into a 'proper' CASCADING STYLE SHEET (CSS) document· Mine looks a lot like this:-


div.commentContainer {
font-size:12px!important;
color:#000000!important;
}
div.layout.group {
background-color:#ffffff!important;
}
article.bestOfTheFixModule,
article.RecommendationsModule,
article.bulletinsModule,
article.manageMyStuffModule,
article.myVisitorsModule,
article.bandArtistDashboardModule,
article.upcomingShowsModule,
article.friendSpaceModule,
ul.streamViews,
ul.footertools,
div.labeled_ad,
ad_container.medrec2,
ad_container.adspecial1,
div#tkn_leaderboard,
article.googleAdSenseModule,
div.module.module3.columnModule1.even.RecommendationsModule.draggable,
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,
li.first,
li.second,
li.third,
section#col2_0.column.column0.columnPath2_0.columnDepth1.firstColumn.lastColumn.allowDrop,
li.checkerLightBG,
div.alertsRequests,
div.moduleFooter,
div.gracefulinjection {
display: none !important;
}
div.module.module1.columnModule0.odd.blogListModule {
width:810px!important;
font-size:12px!important;
}
div.module.module1.columnModule0.odd.SingleBlogModule {
width:810px!important;
font-size:12px!important;
}
div.module.module4.columnModule1.even.RecommendationsModule.draggable {
display: none !important;
}
article.post-body {
width:700px!important;
font-size:12px!important;
}
div.toolbar,
.blogEntry,
.post-title {
width:700px!important;
}
div.userActions {
float:right!important;
}

___section#col0_0 {display:none!important;}
div.glue-dialog.FBMP.large,
div.glue-overlay,
article.module.module6.columnModule2.odd.AdContainerModule.draggable,
article#module-6.module.module1.columnModule0.odd.adFbPromoModule.draggable {
display:none!important;
}
___.userHome {
background-color:#003333!important;
}
___.layout {
background-color:#003333!important;
}
___.streamTabs {
background-color:#003333!important;
}

div.sysMessage {
background-color:#bbddff!important;
}
article.NotificationsModule {
background-color:#eeeeff!important;
border-radius:0px!important;
width: 130px !important;
float:right!important;
}
span.indicator,
li.notification Online {
background-color:#ffffff!important;
color:#ddddee!important;
}
span.userCircleIconDarkWhite,
span.birthdayCircleIconDarkWhite,
span.mailCircleIconDarkWhite,
li.recent {
display: none !important;
}
li.secondLast {
padding-bottom:6px!important;
border-bottom:1px!important;
color:#ffffff!important;
}
.container {
background: transparent!important;
}
.superShareContainer {
background-color:#bbddff!important;
width: 715px !important;
}
.horizontalMenu {
background-color:#ffffff!important;
width: 800px !important;
}
.dropdownFriendCategories {
background-color:#ddeeff!important;
float:right!important;
}
.activityStreamModule {
background-color:#ddeeff!important;
width: 800px !important;
font-size:12px!important;
color:#000000!important;
}
.commentContainer {
background-color:#bbddff!important;
font-size:12px!important;
color:#000000!important;
}
.homeSwitch {
display: none !important;
}
___.span.new {
display: none !important;
}



A bit of trial and error, and I concluded that some of the lines had to be disabled, as indicated - we'll come back to that in a moment. For the purposes of adding the style to Apple Safari, we ignore all the opening "@namespace url(http://www.w3.org/1999/xhtml);" and "@-moz-document url("http://www.myspace.com/home") {" stuff. These only have any meaning to Mozilla browsers. Just copy the main body of the code (into a text editor like Notepad) and then save it as a file with the extension *.css

Now about those deleted/disabled lines of script. What we are doing in Safari is creating a UNIVERSAL stylesheet that applies to how the browser displays ALL pages. You can't just "skin" an individual web page, as you've done with "STYLISH". So, some of the scripts simply don't work well, without making a mess of how OTHER pages display. For example, I'd previously had the homepage background filled in a nice complimentary shade of blue (or even with a bitmap tile). If you do that here, you end up with big blue boxes appearing on your (and other people's) profile pages, because some of the elements on different pages have the same name as those on your homepage. Blocking certain elements on the homepage, suddenly left me with empty 'manage friends' and 'manage photos' pages. I couldn't live with that! By having the 'notifications module' sized and coloured in a particular way on the homepage, I also found that the elements on the 'notifications' page itself were similarly squeezed into a narrow and bluey-grey column! Looks very odd, but I CAN live with that! So there's a bit of a compromise between what I consider aesthetically pleasing and what is actually possible using MySpace's existing stylesheets.

So here are the steps-by-steps for Safari:-

1) Open up your favourite text editor (I use AEdix for its syntax checking doobries, although Notepad will do just as well for this purpose).

2) Copy the script into it, tweak the colours and other preferences to suit, as you did previously with "STYLISH", then save the document with the file extension *.css in a easily located location. Let's call it "MySpaceStyleSheet.css".

3) In Safari, open the PREFERENCES (in the EDIT menu on Windows). Then go to the ADVANCED section. See where it says "STYLE SHEET... NONE SELECTED"? Click that! Click on OTHER. You are prompted to name and load a CSS file. Select the one you just made, "MySpaceStyleSheet.css". That's it. Safari will now default to your stylesheet.

4) Now you can make further tweaks to your style. Open your file via your text editor, while at the same time reviewing the pages in Safari. Every time you change anything in your script file, save it (overwrite the file) and refresh the page in Safari to see your changes applied. Have fun!

Opera Lovers can do something very similar to their browser with what they call "User CSS". See these articles for further enlightenment:-
- http://operawiki.info/operausercss
- http://my.opera.com/micahrayaills/blog/how-to-install-custom-user-style-sheets-in-opera-and-firefox

Those of you in Microsoft's pocket and still clinging to some kind of Internet Explorer (oh! for pity's sake...) might like to try the "User-Script" option
- http://ie7pro.com/user-script.html

Anyone familiar with Firefox's Greasemonkey might find themselves at home with Trixie, a similar plug-in for IE
- http://www.bhelpuri.net/trixie

MY TWO CENTS - By the way, there are a number of reasons why web designers don't like Internet Explorer, not least of all because M****soft have always refused to play the game when it comes to adhering to industry standards. It sometimes becomes necessary to hack your OWN website, just to make it work properly on IE!
- http://www.webmonkey.com/2011/05/a-guide-to-internet-explorer-css-hacks/

"COMMENTS FROM LAST TIME"
CC...Well, I cannot believe Firefox no longer supports Stylish! BASTARDS!!! I will NOT upgrade to the new Firefox & I will write to them & ask them re-support Stylish (it won't do any good, but it will make me feel better! Haha) I'll try your Safari tips, though I much, much, much prefer Firefox & frankly Chrome & Safari seem to be about the same to me... Nice work, Minty & agreed about IE. I stopped using it in 2006 & I was almost never online back then. I only went online for things like Netflix & Opentable.com. xoxo
PP... Safari is an Apple-ication and therefore inherently much prettier than Chrome! Who can fail to admire its Maccy good looks and those iTunes-like flicky slidey animated preview thingies? hahaha
And I have to say (and repeat - *ON MY SYSTEM*) - Now that I've cracked the ins and outs of what's involved, a Safari running with a proper CSS is a lot more MySpace-dependable and stable than a Chrome running Stylish, especially if, like me, you mainly interact with MS via your (modified) homepage. I tried both options (and a third; temporarily using an earlier 'cut-down' Firefox Portable) and made my decision based on that. In terms of loading speed they are all about equal now. With Chrome, I STILL had those annoying F***book ads from time to time, despite my script. You also had to keep refreshing the page to make the changes 'stick', which is almost as annoying as there being no Stylish at all! Once the styling is in place, you want to be able to forget about it, not keep being reminded of it when it stops working. My Safari, on the other hand, has been skinned - hacked, call it what you like - to display MySpace JUST as I want it, and is almost guaranteed to stay that way. I still need Firefox to watch "The Daily Show With Jon Stewart" though! If you have a Firefox 4 or 5 which still supports Stylish, then stick to it like epoxy. Resist the pleas to upgrade to v6, until there is a Stylish to go with it. You NEED BOTH for MySpace.
CC... Thanks, Minty! I will keep my FF5! Chrome really is undependable... I'll have to modify my Safari in the manner you suggest. You're right! The User scripts written for it fade in and out. Now you see your nice colorful homepage & now you don't and, as you said, you suddenly get bombarded by ads & other nuisances!!!
PP... Well, the thing is that when you update your Firefox, it automatically checks to see which of your existing plug-ins and extensions are no longer compatible with the new version. It will then update the ones that can be. Any that can't are switched off and you are notified of the fact. It's not really Mozilla's fault that third-party plug-ins don't always keep up, but it is a bit miffing when it happens. Even some of M****soft's developer tools don't work with the Fox anymore (not that I'm entirely surprised). Hopefully the guys that 'invented' the Stylish plug-in will recognise that their little baby needs updating, and do it soon. Keep watching userstyles.org! It's really up to them, not Mozilla, whether they consider further updates worthwhile. For example, I used to have a reeeeeeally useful plug-in that allowed you to save YouTube videos as MPEGs, but that stopped working when Firefox 3.6 came along and the third-party developers STILL haven't updated it.

Re: IE... There are industry standards for HTML, as defined by The Worldwide Web Consortium (or "W3C" - www.w3.org) That is why you always put that reference at the top of your stylesheets and HTML headers, to show that your code is compliant with the 'norm'. It also gives syntax-checking text editors a standard to check against, so that they can point out if you've missed out a bracket or semi-colon somewhere. M****soft decided they would rather go it alone, rather than be a signatory to the industry standard. So when you design a website page, and you preview your page on all the 'leading' browsers to make sure your 'design' has come out as you intended, nine times out of ten you will find that something will look slightly different on Internet Explorer. You can sometimes put extra variables in your stylesheets to 'hack' IE into behaving itself, as that article explained, but it's a real pain and hardly worth the effort, quite honestly. But aah! that's M****soft for you! I happen to know (from my 'other' job) that they were similarly stubborn when SMPTE (Society of Motion Picture & Television Engineers) established standards for film and television-related digital/high-definition formats. The 'Softies would not agree about things like standard frame-rates and aspect ratios. MPEGs (named after the Motion Pictures Engineers' Group who helped establish the standards) are fully compliant, hence you are now able to buy and download high-definition movies from iTunes that will [theoretically] work across platforms and devices. Windows Media Player files, on the other hand, are in a world of their own!
CC... Oh! No wonder everybody hates Microsoft! I didn't realize that the plug-ins were 3rd party-developed & operated and Mozilla had no control over the updating of plug-ins . I will keep an eye on Users.org. <3

No comments:

Post a Comment