custom css.png

Web developers are probably familiar with tools such as Firebug that make troubleshooting CSS styles a lot easier since the changes show up in realtime. Often times those same developer tools are used to make custom CSS styles for all kinds of sites, but wouldn’t it be a lot nicer if you could just create your own styles without needing to know all the CSS jargon? That’s what the Stylebot Chrome extension does.

Once installed you’ll see a “CSS” icon in the address bar, and a sidebar will appear when you click on it. From there you can begin selecting elements on the page to customize their color, layout, or even hide them. As you can see in the screenshot above I went ahead and completely removed the Yahoo sidebar that normally appears along the left side, and then changed the hyperlink color to green. There is also an advanced mode if you wanted to write your own CSS code rather than using the actual interface.

That’s cool and all, but the real shining part of this is that your customizations are actually saved and reapplied every time you visit the site. If you view the options of the extension you can see all of the sites where you’ve created custom CSS styles, and from there you can choose to edit or remove them from a particular site.

The cherry on top is that you don’t necessarily have to create these customizations across all your computers. There is a sync mode that can be enabled which uses the native Chrome bookmark syncing to also sync your styles. Now that is pretty clever.

Stylebot Chrome Extension Homepage [Demo video on YouTube]