A proof of concept to show swapping out a sites stylesheet and replacing with a user selected stylesheet. The user selected stylesheet is hosted elsewhere on the web.
Greasemonkey script: http://bugrain.com/e107_plugins/mywebprefs/mywebprefs_js.php (click to install if you have the Greasemonkey add on installed in Firefox)
Bookmarklet: create a bookmark with 'mywebprefs' as the name and the following as the location: javascript:(function(){var%20myprefs=document.createElement('script');myprefs.setAttribute('src','http://bugrain.com/e107_plugins/mywebprefs/mywebprefs_js.php');document.body.appendChild(myprefs);})();
This demo also shows a very quick and dirty approach to holding the users preferences online - in this case the users preferred stylesheet.
At http://bugrain.com/e107_plugins/mywebprefs/index.php there is a basic form that allow the stylesheet to be selected (there is only one user for the purpose of the demo). Once saved, the script/bookmarklet injects a script (http://bugrain.com/e107_plugins/mywebprefs/mywebprefs_js.php) in to the head of the current page. The script is PHP generated and picks up the user preference, adds the possible new stylesheets to the page and finally disables all stylesheets except the users preferred choice.
Try it at different sites - http://www.abilitynet.org.uk/myway/ works well as this is where the example stylesheets are from :)
Issues and other considerations:
- No need to add all stylesheets to a page - left over from some investigation in to being able to cycle through all stylesheets using the keyboard but you probably would not need this is preference is saved
- Considerations relating to user privicy - script/bookmarklet would need to pass a user id or similar to identify user - site holding preferences needs to be trusted (and no personal data held?)
- Stylesheets held centrally means they are cached locally, so little network overhead once cached. But, they need to be developed to work well across many sites and maintained (though users will pick up new stylesheets automatically, client cache preferences aside)
- Possibility to augment base stylesheets with common site specific stylesheets (e.g. High Vis + High Viz Google) - again, lots of work to create and maintain
Some of these ideas have been taken from the way the firefox add on Stylish works, plus there are many stylesheets at http://userstyles.org/stylish/ - though I could not find and aimed specifically at accessability.
Comments (9)
Peter Abrahams said
at 9:21 am on Sep 24, 2008
I am at the user requirements end of the readers of this wiki.
So I understand what you are trying to do with this development. Make it easier for people to personalise stylesheets to their specific needs. Also I think you want to make this work across multiple sites.
Can you give me some more explanation as to how you run the demo? I went to mywebprefs and tried clicking on things but nothing happened (I am using Firefox on a Mac in case that is part of the problem).
Thanks.
bugrain said
at 11:56 am on Sep 24, 2008
Peter, I have not tested with Firefox on a Mac but I suspect that is not the issue.
You must install the Greasemonkey script (if you have the Greasemonkey add on installed in FF) or save the bookmarklet as a bookmark in your browser. I've updated the page to hopefully make this a bit clearer.
You can then go to the basic form page to select a stylesheet. Once done, Greasemonkey will take over if you are using it, otherwise you need to click/select your bookmarklet to run the code.
Do bear in mind that,a s it's a demo, if someone else comes along and changes the stylesheet you will pick up that change. Longer term, these preferences would be user specific, obviously.
Peter Abrahams said
at 5:31 pm on Oct 5, 2008
Bugrain
Thanks for trying to make it clearer to me but I still cannot get it to work.
I have now installed greasemonkey and I successfully installed a Holiday world script and equally as quickly managed to uninstall it.
But I still cannot instal your script. I right click on your link and that does not help as there is no instal script action. I left click on it and I just get a listing of your php. What I cannot work out how to do is to instal it so greasemonkey recognises it.
I may sound like a complet dumbo but I have been around the industry all my life and I have hacked bits of php but I am afraid I am mystified by this. Can you either write a more step by step explanation or point me to a site that will explain it. Thanks.
dotjay said
at 9:29 am on Oct 6, 2008
Peter, the script is JavaScript rather than PHP; it only has a .php extension so that the script displays. You need to visit that page to get the script listing (http://bugrain.com/e107_plugins/mywebprefs/mywebprefs_js.php) and then install it into Greasemonkey from the Tools menu. This tutorial video might help: http://diveintogreasemonkey.org/videos/install-user-script.html
dotjay said
at 9:53 am on Oct 6, 2008
Sorry, in the latest version of Greasemonkey it's Tools > Greasemonkey > New User Script...
dotjay said
at 10:01 am on Oct 6, 2008
Okay, ignore me, because I can't get this to work either. It's been a long time since I used Greasemonkey.
Peter Abrahams said
at 11:18 am on Oct 6, 2008
I have opened a ticket (#175) on greasemonkey to say this does not work. Hopefully we will get a resolution of it soon. You may want to add your comments to it as well.
bugrain said
at 10:52 pm on Oct 6, 2008
hmm, no idea why that is at the moment - has worked for me before but perhaps not from this wiki. Thought it might be the mime type but seems not from playing around so am a bit stumped - the bookmarklet has stopped working here too I notice, have added both as links on http://bugrain.com/e107_plugins/mywebprefs/index.php for now, though the Greasmonkey one is stil lfailing as of time of writing this.
bugrain said
at 10:57 pm on Oct 6, 2008
ok, seems pbwiki is interfering with my bookmarklet :(
You don't have permission to comment on this page.