Skip to content

Everything for WordPress, web development — and beyond

🛠 5 ways to customize any website

🛠 5 ways to customize any website

Ever visited a website and thought, "Why isn't that button where it should be?", "Who chose this toxic green background?", "Where's the dark theme, developers?!" And then you opened DevTools and started editing CSS right in the inspector, just to see how it could look.

I do this constantly. Over the years of working with websites, I've assembled an arsenal of five tools that let me reshape almost any site to my liking. This isn't hacking, the changes are only visible to you, on your machine. Essentially, it's modding, like in games: you change a model, repaint the interface, remove annoying elements. The site stays the same for everyone else, but for you it becomes exactly what you want to see.

💡 Quick overview:

  • Install Stylish and choose a ready-made theme on Userstyles.org, the site will change before loading
  • Master Block Element in uBlock Origin, remove any annoying element from a site in two clicks
  • Add a user script through Tampermonkey, automate actions on your favorite platforms
  • Open DevTools (F12) and edit the site like text, all changes disappear after reload
  • Configure Burp Suite as an HTTP proxy, intercept and replace data on the fly

1. Stylish, instant site appearance change

Stylish extension interface with theme gallery

Stylish, my favorite cosmetic browser extension. It applies custom styles to a page before it renders. No flash of the original design that happens with user scripts: you open YouTube and immediately see your pink Hello Kitty, not the standard white-red theme.

The extension is over ten years old, currently owned by Similarweb and has 2 million users. The Userstyles.org library contains over half a million ready-made themes, from dark modes for Google Docs to retro-wave for YouTube.

Why is Stylish fundamentally better than manual edits in DevTools? Because the styles are persistent: you close the browser, open it tomorrow, the theme is still there. Plus it's convenient to switch between themes with one click if a site has multiple themes.

What you can do:

  • Enable dark theme on any site that doesn't have one
  • Restore the old site design after a redesign (yes, someone has probably already written such a style)
  • Increase font size or contrast for readability
  • Hide distracting elements like sticky headers or subscription pop-ups

Creating your own style requires CSS. Basic syntax is simple: selector, property, value. For complex styles, I recommend an alternative, Stylus, an open-source style manager without telemetry.

2. uBlock Origin, surgical element blocking

Element blocking tool in uBlock Origin

uBlock Origin, this is primarily an ad blocker, but its "Block Element" function deserves a separate place in this list. It lets you remove anything from a site: an annoying banner, a user avatar that irritates you, a "3 spots left on sale" counter, a weather widget taking up half the page.

Every time I see the internet without a blocker, for example on someone else's computer, I can't believe how much junk there is. Do people really watch YouTube with five ad insertions in a ten-minute video?

How Block Element works: right-click on an element → "Block Element" → uBlock highlights the target and suggests a CSS selector. You can go higher up the DOM tree and expand the criteria, for example, block not a specific banner but the entire container with the advertising iframe. The filter is saved permanently.

Advanced technique, the "My Filters" tab in settings. You can enter URL filters with wildcards there to prohibit loading entire categories of resources. I used this to disable problematic JS files from WordPress plugins and themes when searching for compatibility conflicts on client sites.

3. Tampermonkey, scripts for any occasion

Tampermonkey script management panel

Tampermonkey, the most powerful tool in this list. It's a userscript manager with 12 million installs that lets you run your own JavaScript on any site. If Stylish changes appearance and uBlock removes excess, then Tampermonkey adds new behavior.

My number one scenario, war against anti-adblock pop-ups. You know the scheme: you visit a site, the blocker removes ads, and the site detects this and rolls out a banner "Please disable your blocker". uBlock sometimes handles it, but if the site uses randomized classes and IDs (to slip past filters), Tampermonkey comes into play. I write a script that searches for an element with specific wording or an image and removes the entire parent container. Crude, but it works.

More peaceful scenarios:

  • Add a "Download all" button to a file page
  • Automatically fill forms with standard data
  • Enable HD quality on YouTube by default (although there are dedicated extensions for this now)
  • Extend site admin functionality by adding hotkeys or a quick actions panel

Find ready-made scripts on Greasy Fork and OpenUserJS. There are thousands of scripts for all occasions, from video downloading to GitHub interface improvements. For sensitive operations (passwords, payments) I recommend disabling Tampermonkey, or adding sites to the blacklist in the extension settings.

4. Developer tools, playground for experiments

Elements panel in Chrome DevTools with edited text

I spend more time in Chrome DevTools than in any IDE. Developing plugins for WordPress, this is largely trial and error: imagined → fixed in inspector → liked → coded. Without DevTools I would be times slower.

For non-developers, developer tools are a sandbox where you can temporarily change a site and see the result instantly. Open DevTools (F12), go to the Elements tab, select Inspect (arrow in the corner of the panel), and click on any part of the page. Edit text, change colors, move blocks, delete elements. After page reload everything returns to normal.

The most common non-programmer scenario, preparing a screenshot or print version. Before capturing, remove everything unnecessary from the page: ad blocks, pop-ups, chat widgets, extra columns. Export with the Print Screen button, you'll get a clean, concise picture, as if the site was originally designed that way.

On the Network tab there's another cool feature: right-click on any request → "Block request URL" or "Block request domain". I use this when I need to check how a site works without a specific script or font, for example, to localize the source of a conflict on a client project.

5. Burp Suite Community Edition, traffic interception

Burp Suite proxy window with intercepted HTTP request

The most hardcore method of the five. Burp Suite, this is an interactive HTTP proxy: it sits between your browser and the server and can intercept, stop and modify any request or response. Community Edition, the free version from PortSwigger, is more than enough for site "modding".

Why is this needed? There are situations when neither CSS nor client-side JavaScript can give the desired result because the data comes from the server already in the "wrong" form. Burp intercepts the server response before the browser processes it and allows you to substitute JSON, HTML or headers on the fly. The site renders as if the server sent exactly what you substituted.

Real case: on one project, the API returned a product list with the field "available": false for positions that weren't in stock. I needed to check the product card layout for different states. Instead of going into the database or asking the backend developer to generate test data, I intercepted the response in Burp, changed a couple of false to true, and in a second saw the "available" product layout.

The most difficult thing in Burp, initial setup. You need to specify the proxy address (localhost:8080) in browser settings and install the Burp SSL certificate to work with HTTPS sites. Without the certificate, the browser will complain about an "insecure connection". In the official PortSwigger documentation, this process is described step by step.

⁉️🤔 Frequently asked questions

Is it legal to change sites this way?

Yes, because the changes happen exclusively on your device. You're not hacking the server, not stealing data, not bypassing a paywall. It's equivalent to changing wallpaper in an apartment: the walls are the same, it looks different. The only exception, automated scripts that create excessive load on the server (for example, parsing in a loop without delay). Be reasonable.

Which tool should I choose if I'm not a programmer at all?

Start with Stylish: install the extension, go to Userstyles.org, choose a theme, done. For blocking annoying elements, uBlock Origin with the Block Element function, it doesn't require code. Tampermonkey and Burp Suite, for those who are ready to write or at least read code.

Can you break a site with such edits?

For yourself, yes, you can. Part of the page may stop working if you deleted the wrong element or covered an important button with your style. But this is fixed by disabling the extension or resetting filters. For other users, the site will remain untouched, your changes are local.

What to do if a site detects Tampermonkey and blocks content?

Some sites check for extensions via JavaScript. Try an alternative manager, Violentmonkey, it's less known and less often caught by detection. Or run the script through a snippet in DevTools (Sources tab → Snippets), this is a built-in Chrome function that isn't tracked by the site.

Is there a risk that the extension itself is spying on me?

The question is reasonable. Stylish until 2017 belonged to a different owner and indeed collected data. Now the extension is owned by Similarweb with a published privacy policy, collection is anonymized and can be disabled in settings. If you want a completely open tool without telemetry, install Stylus (open-source alternative). Similarly for scripts: Tampermonkey collects anonymous statistics (version, language, OS), disabled in settings with the "Anonymous statistics" checkbox.

How do these tools work on mobile devices?

On Android in Firefox you can install uBlock Origin and Tampermonkey as add-ons, this is a legitimate method. On iOS the situation is worse: Apple restricts extensions. Partial alternative, the Orion browser, which supports Chrome and Firefox extensions on iOS. Stylish on mobile works through a separate app.

Is it worth changing sites to suit yourself?

If you've read this far, the answer is probably "yes". The web is not a finished product, but raw material. Someone designed the interface for an average user, and you're not average. You have your own habits, your own taste, your own annoyance triggers.

My personal top by effort-to-result ratio: start with uBlock Origin (5 minutes on Block Element, and the site is already clean), add Stylish for your favorite platforms (another 10 minutes, and you have a dark theme where there never was one), and when you want automation, open Greasy Fork and look for a ready-made script for your task. DevTools and Burp, for those cases when the first three tools don't cope.

You can start in five minutes with one extension, and in a month you won't recognize your browser, having assembled a collection of themes, scripts and filters for two dozen sites. This is a hobby with a low entry threshold and an infinite ceiling. Like Windows desktop customization in the 2000s, only it scales to the entire internet.