How to Inject Custom CSS into Any Website Using a Bookmarklet

At work we have several different enterprise websites. The problem with a lot of enterprise websites is that the user experience is awful. The layout and structure of the page make even simple tasks harder than they need to be. It’s worse when you have to use the system every day.

The issue I was having was that the text was getting cut off. To see all of the text, you had to click a button to open a modal. Out of sheer frustration I decided to fix the styling of the page using a bookmarklet to force the page to show all the content.

Back in the day when I had to use my own custom stylesheet I would use something in Firefox called Greasemonkey or Stylus. There are other methods which you can use to add your own custom stylesheet to a website, and there are several different plugins which do something similar. I chose a bookmarklet approach because it is easier to share with other people than asking them to install a browser extension.

What are bookmarklets

In basic terms, a bookmarklet is a bookmark where the URL starts with JavaScript, which allows you to run code on the current page rather than going to a separate website. In my case I’m getting the JavaScript to load a CSS file which I’ve added to a Cloudflare R2 bucket.

One thing to be careful of: only use bookmarklets from sources you trust, because they run JavaScript on the page you are viewing. If you are unsure, run it through an LLM just in case.

How to create your bookmarklet

The first thing you need to do is create a stylesheet which contains the CSS changes you plan to make. In my case, the text was being cut off inside a container, so I’m changing it to use overflow:auto.

#feature .ply-1 .col-2 .size-large {overflow:auto;}

Now with the CSS file created, you need to save it and upload it somewhere. It’s important that it’s on a public URL so the browser can load it. Once done, make a note of the URL. In my case I’m uploading it to Cloudflare R2 Object Storage.

The process is:

1. Create the CSS file with your styling changes.
2. Upload the CSS file somewhere public.
3. Copy the URL for the CSS file.
4. Replace the example URL in the JavaScript below with your CSS file URL.
5. Create a bookmark and paste the JavaScript where you would usually paste the URL.

Copy the code below to a text file and I’ll explain what it does. First we tell JavaScript to create a link element. Then we add the relationship attribute for the stylesheet. The href attribute is the link to the stylesheet, so this needs to be replaced with your stylesheet. Finally it adds the element we just created to the head of the page.

javascript:(function(){var el=document.createElement('link');el.rel='stylesheet';el.href='https://yourdomain.com/main.css';document.head.appendChild(el);})();

Once the bookmark is created, visit the page of the website which needs the styling changes, then select the bookmark. Then your styling changes should be applied.

As mentioned earlier there are other ways to do this but I felt this way is the easiest way to style another site and share it with other people.