Bend Any Website’s CSS To Your Will with Stylish or Stylebot

CSS is the language that styles websites. It controls the colors, the layout, the fonts… pretty much everything concerned with the look of the site. It’s quite powerful. With the changing of a single value, anything on the page can be hidden or revealed. Change two values to turn black text on a white background to white text on a black background.

But how? You can’t edit the CSS on other websites. If you can, you’ve got access to their servers. You’d be a bit of a hacker and probably aren’t using those skills to change fonts.

But browsers are amicable. We can visit a website and the browser will download what it needs to show it, including the CSS. Then we can edit the CSS afterward!

We can do this manually through tools built into all the major desktop browsers. Referred to as DevTools, they allow you to manipulate the site as you wish after it’s loaded.

But the changes you make in DevTools do not persist. Refresh the page and they are gone. They aren’t designed to bend the web your aesthetic will. Fortunately, where there is a will there is a way. There is a couple of browser extensions that will apply your own custom CSS to a page after it’s loaded, allowing you to add or change existing styles in a way that will persist. Meaning change a page once, and the changes stay even after refreshing the page or coming back a week later.

Giving it a spin

One of these extensions is called Stylebot for Chrome. It’s old. The website is dead. The repo hasn’t been touched in 4 years. But it works! There is almost something comforting to me about old stable software. After installed, you’ll see a little “css” icon in the toolbar:

Opening it gives me this Panel, and you’ll see some styling options right off the bat:

The trick is to use the “Select an element” option to pick something on the page, then you can use the controls to change values. Continuing to use this blog as a test subject, let’s give it a dark theme!

Those changes will persist as long as we keep Stylebot installed and nothing changes on the site itself (eventually, it will change, as all sites do, and we’ll have to re-do our changes if we still care.)
I don’t use extensions like this generally to theme the sites I visit, but I do use it to fix bugs sometimes. For example, I have this weird bug in the WordPress admin where the editor toolbar gets hidden when I scroll. So I just took matters into my own hands!

To add CSS directly as I did here, I clicked the “Edit CSS” button in the panels footer and saved it.

Another Whirl

There is another one of these called Stylish (see the footer for links to all the different browser extensions). The idea is much more centered on user-created themes. For example, I installed it, when to Facebook, and activated the most popular theme (which it presented to me right in the extension dropdown itself) called “Clear Dark Facebook”:

I like it!

Stylish might be easier to use for some who just want to pick out already-popular themes. Apparently it also injects some analytics though, as I found a fork of it that doesn’t, so be warned there. Stylebot might be better for folks looking to make smaller tweaks.

It’s an acceptable answer to some support requests

I’ve had people write in to me about sites that they know I run and tell me about styling changes that they prefer. One I got recently is that they really perfer the look of the site with font-smoothing applied, like this:

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

In the past when I’ve used this, I’ve had support requests that said they preferred the look of the site without font-smoothing.

I bet you can see where this is headed. Go with the less tricky option (not using it) and point the users who really prefer it to one of these extensions.

User Stylesheets?

Old timers might remember a thing called user stylesheets. They were this same kind of thing. You’d literally create a CSS file and place it in a particular place on your hard drive and the browser would apply it for you. Best I can tell, most of the major browsers have dropped support for them. Safari has the option, but it applies the styles to all sites, so beware. Ah well, these extensions are an easier way to handle it anyway.

Do you do this?

I’d be curious to know if any of y’all out there actively do this a lot?

I heard from a friend-of-a-friend who uses an extension like this specifically designed to change fonts to one to help dyslexia. That’s a fantastic case for changing styles to suit your needs.

Click here to build your next great project on Media Temple.

Comments

  • Gerhard Großmann

    Firefox still/again supports user stylesheets and I like that more than any extensions. Firstly because I see all the changes I made in one file in my favorite editor and have an overview about my modifications. Secondly with @-moz-document I can apply CSS rules not only to one or more domains but via regular expressions even to types of websites or files. Thirdly I additionally can style intern Firefox sites, e.g. the reader mode, the addons page, …

  • Neil Osman

    Greasemonkey to the rescue. As a visual impaired user this tool helps me overcome most, if not all frictions including but not limited to styling like font sizing, colors, line heights focus styles and also DOM alterations like enabling zoom (meta viewport), removing entire blocks like headers, footers, asides etc

  • Christian Jensen

    I also use Stylebot, most often to show things that are normally hidden or hide things that I don’t want to see. For example, in WordPress, the ‘edit’ and ‘delete’ options under each item in a list are usually hidden until hovered. I prefer to just always have them there.

  • Christian

    In Chrome you can create a local extension that applies different stylesheets to different websites pretty easily.

    It would take a bit more manual work (updating the manuscript file every time you add a new stylesheet), but you can add a custom stylesheet for any site that you want to change.

    At work we have an internal project management system, that let’s say is lacking in it’s UI. I have added a few features with a js file and improved a bit of the design with a css file that applies only to that specific website.

  • ezchile

    I personally prefer ‘MyStyle’ (https://chrome.google.com/webstore/detail/my-style/ljdhjpmbnkbengahefamnhmegbdifhlb?hl=en), which is an extension for Chrome. I feel it allows much more of a hands-on approach to the actual code you introduce onto the page than Stylebot (which I also have installed).

    I also use Stylish, but usually just as a way to implement styles developed in MyStyle into something a little more robust. Great article though.

    Any other systems that people use?

Related Articles