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.