Redesign Your Favorite Websites — Stylus Extension for FireFox or Chrome
I am not a web developer. Nope, no how, I am a windows desktop developer and a technology professional. I know web development, I created websites, and I maintain websites. But web development is not for forte.
Even so, I have times where I wish websites looked better. The user interface and user experience is not up to par. Feedly, for example, is a site that I use daily. But it feels cramped with a lot of whitespace.
You Have the Power to Change the Web World!
Would you believe it? Well I want to introduce you to Stylus, a revolutionary extension for Chrome and FireFox. Stylus allows scripts to be run against websites that change the look and feel of the site.
Redesign your favorite websites with Stylus, an actively developed and community driven userstyles manager. Easily install custom themes from popular online repositories, or create, edit, and manage your own personalized CSS stylesheets.What do I do with Stylus?
Simple question — install it for Chrome or Firefox. Then cruise on out to their website that lists hundreds or even thousands of various scripts.
Some of the top sites with scripts are:
As you are looking at the different scripts, feel free to click on the script to learn more. One important aspect to keep in mind is the Last Updated on the script. Sites such as Facebook tend to change frequently so scripts that are a few years old are less likely to work effectively.
If a script catches your eye, click on the script. After reading about the script, click the “Install Style” button. That’s it, script (or style, as it is referred to) is installed.
Stylus Installed, Style Installed, Now What?
That’s it other than navigating to the webiste. Whenever a script is being used by Stylus for a website, the toolbar for Stylus will show the number of scripts being used. The screenshot below shows the button using two scripts for a site.
If you ever grow tired of the style or you just want to stop using it, just click on the Stylus button and uncheck the box next to the style. Stylus will no longer use this style on the website.
Give Me A Real Life Example
If anyone is like me, there is not much better than an actual real-life example.
I mentioned Feedly earlier, which is a site I visit daily. Prior to Stylus, the site had articles of minimal size and lots of white space. The look was clean but it seemed awkward.
After finding Stylus, I looked through the plethora of scripts for Feedly. I found a script called Modern Feedly. The script will eliminate the white space as well as eliminate junk and other non-sense that may be annoying for users.n
I installed the script and proceeded to Feedly.com The articles are the full width of the page. The “Upgrade” button has been eliminated, which is nice since I have no plans to purchase a subscription from Feedly.
More Examples
Wrap Up
Stylus is a great little tool for Chrome and FireFox.
Feeling Adventurous
If you feel adventurous, you can create your own scripts for websites. Just right-click on the Stylus button and select the Manage option. You will be taken to the list of installed Stylus scripts. Click the “Write new style” button on the left to create a new script. Or click an existing script to make your own changes.
Once in the “Edit Style” window, feel free to have fun. In my experience, it is likely to take some trial-and-error.
