How to Restyle a Website with Stylebot, Step by Step

Updated

Install the Stylebot extension in Chrome, Firefox, or Edge, open the editor with the toolbar icon or Alt+Shift+M, click the element you want to change, adjust it with the Basic controls or your own CSS, and save the result as a profile so it loads every time you return to that site. This works on desktop browsers only. You need the extension installed and permission to run on the page — Stylebot asks for full access to read and change information on sites, so expect that prompt on first use.

Before you start

  • Browser: Chrome, Firefox, or Edge on desktop.
  • A target page: any site you want to restyle. The example throughout is a news article page.
  • A rough goal: for instance, "dark background, warmer text, larger serif body, and remove the ad." Knowing this first makes the styling steps faster.

Step 1: Open the editor

Click the Stylebot icon in your browser toolbar, or press Alt+Shift+M. The editor panel opens over the page you're viewing.

Expected result: a panel showing the site's hostname (for example, harbourpost.example), a profile selector set to Default, and a Create profile option.

Step 2: Pick an element

Click Pick an element, then click the part of the page you want to change — a heading, a paragraph, a sidebar, an ad block.

Expected result: the fields in the panel fill in with that element's current styles, such as font, size, line height, color, decoration, alignment, background, box, and effects. You're now editing that element specifically.

If you click the wrong thing, pick again — nothing is saved until you apply changes.

Step 3: Style it

You have two ways to make changes, and you can mix them:

Approach Use it when What you do
Basic controls You want quick visual changes Adjust Font, Size, Line Height, Color, Decoration, Alignment, Background, Box, and Effects in the panel
Code You need precision or rules the controls don't cover Write CSS directly for the selected element or the page

The panel also offers Presets, Hide, and Reset actions — Hide is the quick route for removing something like an ad, and Reset undoes changes to the selected element.

Expected result: the page updates as you change values, so you can judge the look immediately.

Step 4: Save it as a profile

Use Create profile to save a named look for that site. Profiles let you keep different appearances for the same website and switch between them in a click.

Expected result: your style is stored and loads automatically every time you come back to that site. The Default profile remains available as a fallback.

What "restyle any website" actually means here

Stylebot writes the CSS for you and reloads your style on each visit. Pointing at an element and using the Basic controls is effectively generating CSS rules scoped to that page; writing in the Code tab is the same thing done by hand. That's why the result persists — it isn't a one-off visual tweak in the current tab.

A concrete example from the product's own demo: on a travel article page, the changes were a dark background, warmer text, a larger serif body, and the ad removed. Each of those maps to a control or a CSS rule you set in steps 2–3, then save in step 4.

Optional: restyle from the command line

Stylebot ships a CLI, so a coding agent that can run commands can restyle a site. The documented flow:

$ npm install -g @stylebot/cli
> stylebot open harbourpost.example
Opened tab 54432929
stylebot outline 54432929
article › h1, p.dek, p ×12, aside.ad
stylebot css set harbourpost.example < night.css
Saved · applied to 1 tab
stylebot screenshot 54432929 -o check.png
Saved check.png

Read it as: install the CLI, open the page in a tab, list its elements to find targets, apply a CSS file to the site, then take a screenshot to verify the result. This suits repeatable or agent-driven styling; for a one-off change, the extension panel is faster.

Common snags

  • The panel doesn't open: confirm the extension is enabled for that site and that you granted access.
  • Your change hits more elements than expected: you likely selected a shared element type. Use the Code tab to target it more narrowly, or pick a more specific element.
  • The style disappears on another device: profiles are tied to your browser setup, not your account across devices.
  • You can't find a control: switch to the Code tab and write the CSS property directly.

When this is the right tool

Choose Stylebot if you want persistent, per-site visual changes without editing the site itself, and you're comfortable with either clicking through controls or writing a little CSS. If you only need a temporary tweak for one session, or you need changes to apply across browsers and devices automatically, this workflow won't cover that.