You Have the Power to Change the Web World!

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:

  • Google
  • Facebook
  • Youtube
  • Yahoo
  • Amazon
  • Wikipedia
  • Twitter
  • Netflix
  • Ebay
  • Reddit

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.

Image for postJust 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.

Image for postStylus 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.

Image for post

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.

Image for postFeedly.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

Image for posthttps://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.

Image for postFeedly with Stylus Style

More Examples

Image for postBitly ? Left is no style, Right is with Bitly CleanImage for postMorning Dew (https://www.alvinashcraft.com/) Left is without style, Right is with style (no ads)Image for posthttps://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.

Image for postStylus 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.

Image for postStyle Editor for Stylus

No Responses

Write a response