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.
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.
Stylus
Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many?
chrome.google.com
Stylus – Add-ons for Firefox
Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many?
addons.mozilla.org
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.
Themes & Skins for the World’s Top Websites
Style your favorite websites with themes & skins created by the Stylish community. Hundreds of thousands of?
userstyles.org
Some of the top sites with scripts are:
- Youtube
- Yahoo
- Amazon
- Wikipedia
- Netflix
- Ebay
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.
Just one of the many scripts for Feedly for Stylus
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.
Stylus button in Chrome
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.
Feedly.com
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
https://userstyles.org/styles/155389/modern-feedly
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.
Feedly with Stylus Style
More Examples
Bitly ? Left is no style, Right is with Bitly Clean
Morning Dew (https://www.alvinashcraft.com/) Left is without style, Right is with style (no ads)
https://www.howtogeek.com/, Left is no style, Right is with style (full width)
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.
Stylus Page in Chrome
Once in the ?Edit Style? window, feel free to have fun. In my experience, it is likely to take some trial-and-error.
Style Editor for Stylus
