Css style

Bend the CSS of any website to your liking with Stylish or Stylebot

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

But how? You cannot modify the CSS on other websites. If you can, you have access to their servers. You’d be a bit of a hacker and probably wouldn’t use those skills to change fonts.

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

We can do this manually through tools built into all major desktop browsers. Called DevTools, they let you manipulate the site however you want after it loads.

But the changes you make in DevTools don’t persist. Refresh the page and they are gone. They are not designed to bend the web to your aesthetic will. Fortunately, where there is a will, there is a way. There are a few browser extensions that will apply your own custom CSS to a page after it loads, allowing you to add or modify existing styles in a way that will be persist. This means changing a page once, and the changes stick even after you refresh the page or come back a week later.

give a ride

One of these extensions is called Stylebot for Chrome. It’s old. The website is dead. the deposit hasn’t been touched for 4 years. But it works ! There is almost something comforting to me in old stable software. Once installed, you will see a small “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 Item” option to select something on the page, then you can use the controls to change the values. Continuing to use this blog as a test subject, let’s give it a dark theme!

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

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

Another whirlwind

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

I like it!

Elegant might be easier to use for some who just want to pick up already popular themes. Apparently it also injects scans, as I found a fork that does not, so be warned there. Stylebot might be better for people looking to do small edits.

This is an acceptable response to some support requests

I’ve had people write to me about sites they know I run and tell me about style changes they prefer. One I received recently is that they really prefer how the site looks 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 they prefer the look of the site without font smoothing.

I bet you can see where this is heading. Go for the less tricky option (don’t use it) and direct users who really prefer it to one of these extensions.

User style sheets?

Old timers might remember a thing called user style sheets. It was the same kind of thing. You would literally create a CSS file and place it in a particular location on your hard drive and the browser would apply it for you. As far as I know, most major browsers have dropped their support. Safari has the option, but it applies the styles to all sites, so beware. Well, these extensions are an easier way to handle it anyway.

Do you do this?

I would be curious if any of you actively do this a lot?

I heard from a friend of a friend who uses an extension like this specially designed to change fonts into one to help dyslexia. It is a fantastic case to change your style according to your needs.

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