ForumsTips & TricksHOW TO : modifying websites through javascript and CSS


HOW TO : modifying websites through javascript and CSS
Author Message
Rich

Posted: Mar 24, 2010
Score: 1 Reference
***NOTE : chrome offers support for both these types of modifications through its extension menu***

Firefox has a few addons that have the ability to greatly increase the usability of some websites.

Greasemonkey - https://addons.mozilla.org/en-US/firefox/addon/748 is a addon framework that allows users to supplement websites and the browser with additional javascript code. You can get the userscript manager at the aforementioned site. Once this is installed the user should go to http://www.userscripts.org to look for scripts designed for the sites they are interested in. There are a range of scripts, ranging from those that improve the layout of facebook, those that add keyboard shortcuts to websites, or to those that provide additional functionality to websites beyond what is provided by the web designer. As most of this functionality works off of standard javascript code, unless the user understands the basics and looks through the code, it might not be a good idea to install scripts for websites with sensitive information on them. I have never found a script with a problem, but one rule of thumb is to only select scripts with many installs, or good ratings just to be safe.

Some scripts useful for modifying Toodledo are:

1 Toodledothings - http://userscripts.org/scripts/show/54863 - a modification from Nonimage's Things style. This changes some of the layout and gives move of a mac appearance to the site.

2 Toodledo Folder Categories - http://userscripts.org/scripts/show/71732 - my new script that is a modification of the jgallen's original folder categories script that allow additional keyboard functionality to the site. For a toodledoish (see below) themeing, use this Stylish theme - http://userstyles.org/styles/26356.

3 ToodleDo Favorites - http://userscripts.org/scripts/show/34172 - adds the ability to add quick links to any of your tabs. Just click the + link on the tab to add it to your favorites.

4 ToodleDo Quick Links - http://userscripts.org/scripts/show/34102 - Adds a >> link next to each folder for easy access to jump to that folder.


Stylish - https://addons.mozilla.org/en-US/firefox/addon/2108 on the other hand, works by modifying the CSS (cascading style sheet) of the website. The CSS of a website controls the layout and position of each section, and by modifying this, a user can alter just about anything on the screen.

Some popular styles for Toodledo are:

1 Toodledo by Nonimage - http://userstyles.org/styles/6448 - this was one of the original styles published for Toodledo

2 Toodledoish - By VINTOM.com - http://userstyles.org/styles/23243 - One of the most possible Toodledo styles out, is a compilation of many styles by Vintom

3 Toodledoish - Plus 2 - http://userstyles.org/styles/26021 - A modification of the above styles with rounded corners

4 Toodledo For All - http://userstyles.org/styles/19589 - a style with many, many changes: fluid width of all fields, minimize folder field when in folder view, number next to each tab showing shortcut #, minimize sidebar to show only icons at all times, change color for each context

6 Toodledo Things style - http://userstyles.org/styles/7008 - a CSS only modification of Toodledo to look more like MAC Things application. The basis for the above userscript.


Hope this helped for those uninitiated who want to get the feet wet.

-Rich
Vin Thomas

Posted: Mar 24, 2010
Score: 0 Reference
Glad someone posted this all in one place!
Levi Wallach

Posted: Mar 24, 2010
Score: 0 Reference
Thanks for posting this. I was wondering if you've tried this script:

http://userscripts.org/scripts/show/41369

I use it to replace "No folder" with "Inbox" and a few other things. What I found was that it doesn't seem to work with status field select lists. It works fine with folder select lists. Also you sometimes have to hit refresh to get it to show. I'm hoping that eventually Toodledo will allow for modifying names of both statuses and the "no folder" folder, but until then this works at least in part. I tried tweaking the script to see if I could get it working for the status select lists but could not figure it out...
You cannot reply yet

U Back to topic home

R Post a reply

To participate in these forums, you must be signed in.