Stylebot for Chrome: Web Developer Toolbar meets Greasemonkey

by adamhowell • 16 years ago

82 26 16 years ago

as a product manager, this is great for me. I can alter my ideas and see how they feel with the real product. It's a great step on top of Axure. You should sell to them for $500k today.

nice job with the demo video.

jamesshamenski2• 16 years ago

I also like that people could totally re-skin Hacker News to look like a site related to actual work. I bet there is a monetization model in selling bland versions of sites (ie: espn.com to look like an excel sheet).

Is there a way to share your design for others to see?

Can the combined css be exported as one style sheet?

ankit_4• 16 years ago

You can export all your custom styles into a JSON file for import. Also, you can copy a site's custom CSS created using Stylebot.

Currently, there is no repository for sharing designs. In the future, definitely!

Maybe also a page featuring all the best styles from around the web and provide their CSS.

johnzabroski• 16 years ago

I posted a comment on the "Open Source" Google blog that was apparently not approved (when I posted, there was 0 comments, and now there are 4 comments, none of them mine). See: http://google-opensource.blogspot.com/2010/09/changing-look-...

I pointed out that there is nothing innovative about Stylebot. This idea has existed for years under the name SiteMesh. The difference is where in the software pipeline you are putting the SiteMesh/Stylebot logic. SiteMesh is actually more general, in that it is not tied to Chrome.

I don't understand why my comment was moderated out. It was not offensive, just pointing out the fact that there is no innovation here.

anigbrowl3• 16 years ago

Fair enough, but Stylebot is user-centric (ie I can quickly improve my browsing experience, rather than leaving the browser to and changing my entire task focus), and it was available 10 seconds after I decided to try it.

Also, the creator presented his idea using simple video and pictures, emphasizing simplicity and accessibility. SiteMesh seems interesting but since I'm not a web pro it also looks like a learning curve that I don't have time for, and it doesn't seem to have been updated in 5 years. Finally, screenshots > schematics.

Perhaps it was just ahead of its time, and is worthy of a re-release.

Raphael2• 16 years ago

Well I've been doing similar for years in Firefox through a combination of the Firebug and Stylish extensions, but this is a marked improvement in usability and obviousness.

At any rate, tweaking styles mid browser session is a great convenience.

nostromo2• 16 years ago

Finally, HN for eyes > 30. http://i.imgur.com/5qKu3.png

some1else2• 16 years ago

CMD and +

:-D

http://i10.fastpic.ru/big/2010/0922/ee/f0510cd34ff0dc9ee6616...

I do appreciate the margins though.

ankit_4• 16 years ago

Here is the HN custom CSS from http://stylebot.me/examples.html:

http://gist.github.com/587613

johns• 16 years ago

Can you get rid of the numbers left of up vote arrow? I don't know what purpose they serve.

nostromo2• 16 years ago

Sure, give the selector "td.title:first-of-type" the property "visibility:hidden;"

some1else2• 16 years ago

It's not so much GreaseMonkey as a front-end for user-styles. Great one though.

P.s.: Sadly, there's still no front-end to GreaseMonkey (Other than the archaic Platypus perhaps?)

newsisan• 16 years ago

If you are asking what I think you are asking, check out Blank Canvas Script Handler for Chrome. It is like GreaseMonkey for chrome.

9ec4c12949a4f3• 16 years ago

I have previously been using "plain clothes" extension for this task. This looks much better.

Edit: I take it back, it's not a simple click for every website.

anigbrowl3• 16 years ago

Very nice - smooth and fast. Suggestions for version 0.2 and beyond, in increasing order of utility:

Reset/Reset All buttons might be better named Undo and Reset Page.

The element selector at the top left goes gray when I have a UX element highlighted for editing. This makes it seem like an inactive cosmetic element because I'm used to things being greyed out. It took me a few minutes to notice it as a button on first use; all my attention was on the target page when selecting a UX element to edit, and when I looked back at Stylebot I went straight to the modifiers. As you put a green highlight around the currently selected CSS element, perhaps not turn the button green rather than the same color as its parent?

Beginner Mode for consumers - 'Hide This', 'Bigger/Smaller', or a 'Simplify!' slider, that goes to Readability-like simplicity over 5 stages. Not essential, I just thought the basic layout was still a bit 'busy' for newbies...but then you don't want to be troubled with newbie-type support requests. It's a good layout - but as above, there are so many options that I completely overlooked an important aspect of the selection interface.

(Windows only?) UX element highlight is static. Many TextArea controls can be freely resized, eg this comment box on HN (which was probably designed to promote comment brevity...). If I make the box larger while it's highlighted the highlight doesn't follow. Not a big deal, but...

...it made me wish I could drag things around to rearrange the layout. There's a little tool for that called LiquidPage: http://www.alexschreyer.net/programming/liquid-page-a-bookma... LiquidPage and Stylebot would make a lovely couple. They should get married. They should have children.

Presets. If you can save a page look, why not share it with other users? Let people share their setups like themes. Gives you web traffic as well as downloads, stickiness, and repeat visitors. Could later be an outlet to sell a more complex tools aimed at professional; or could also be a source of intelligence site managers would pay for - '93% of Stylebot users hide your sidebar, but nobody seems to mind your topline menu.' Their gratitude would make up for the inevitable hate mail from designers.

That's so important I'm going to say it again. Let people share their layouts. Most of them will be lame and you will wonder why you bothered. Then one day someone will make a much better 'look' for some popular website and it will spread like wildfire. People will install Stylebot just so they can use this fabulous new layout for a site they visit every day but secretly hate looking at. This will be controversial, which means lots of media exposure. The famous website will fire the designer and hire the Stylebot layout creator. Users who liked the original design will revolt. The original designer will release his/her own Stylebot skin, with many improvements that /she had always wanted to add but not been allowed to. Designwars will begin on every popular website. Some site admins will try to ban Stylebot, others will be delighted stop wasting time on stuff they were never very good at anyway and focus on content instead of presentation.

Let people build presets that aren't tied to any particular website, just collections of parameters for different basic CSS elements. Let people paint them onto existing pages from a palette - select an existing 'clean' or 'fancy' button style and then start painting it onto the buttons that are on a page, rather than adjusting their settings one by one.

There are opportunities along the way to work with something like Balsamiq or Wordpress or other content/layout creation services. Users could select or tweak CSS to their heart's content at the client end and upload the results to the page - but that that is justs a sideshow to the main event.

At some point you will need to think of a way to easily filter themes on your website before your users do, because there will be a tidal wave of Myspace-type 'sparkle artists' busy remaking the look of the web with glitter, Comic Sans, and animated Velvet Elvis icons. Fortunately, the rest of us won't have see any of that, but the best/worst of these 'artists' will inexplicably be able to make a living from selling their hideous creations to other people with questionable taste. By that stage, a few hardcore designers will stop sending you hate mail and start recruiting ninja assassins to destroy Stylebot forever, but it will be too late, and ultimate layout control will have gone to the dark, er, client side.

I jest a little, but I've already decided I will not be going back to the 'old' Craigslist.

anigbrowl3• 16 years ago

PS one small glitch is that you can't seem to set a different color for hyperlinks you've already visited - something of a necessity on sites such as Craigslist.

desigooner2• 16 years ago

yeah .. unless you specify a :visited attribute, it treats all anchor links as the same for styling purposes

carussell• 16 years ago

If you can save a page look, why not share it with other users? Let people share their setups like themes. That's so important I'm going to say it again. Let people share their layouts.

http://userstyles.org

Like the Stylebot page said, that's what the C in CSS is all about. It's just never caught on much. (In reality, this is largely due to the structural layout of many sites not being amenable to any CSS other than the sheets crafted by the original "designer".)

altuzar• 16 years ago

Just created an issue or feature request with that exactly:

http://github.com/ankit/stylebot/issues#issue/21

Would be very neat.

ankit_4• 16 years ago

Thanks for the amazing feedback! Lots of great ideas! I'll definitely try implementing some of them in future versions.

As far as sharing is concerned, you're right, it'll definitely add a lot of value to Stylebot. But, as you pointed out, it is important to be careful while building such a site. I want there to be some form of curation so that I can keep it minimalist and it doesn't degenerate into userstyles.org (which is a nice place to share styles, but it is so hard to search for good ones there!) Maybe a user up/down voting system.

For the same reason, it'll take some thought and time to build this. I also want it tightly coupled with Stylebot, so that it is easy to install/share styles without too much effort. I'll definitely take a shot at this whenever I've some free time. It'll be great to have other developers jumping in! :)

there• 16 years ago

fwiw, the firefox extension "stylish" allows per-site css overrides in the same way, although without the fancy inspector.

https://addons.mozilla.org/en-US/firefox/addon/2108/

i've been using this to get rid of the gray on HN for a long time (http://i.imgur.com/uVNzT.png) and also to do some custom ad blocking/content shifting on other sites.

desigooner2• 16 years ago

a very helpful tool to experiment with CSS on the fly.

My version of HN: http://cl.ly/69649580c36f1baa9d9a

The code for it: http://pastebin.com/WZmdaBPs

shortformblog• 16 years ago

Oh. My. God. This is like Firebug on crack. I have a new best friend.

sirn• 16 years ago

Very impressive. This make me want to ditch my own Safari extension[1] and switch to Chrome. Perhaps when you setup a central repository, we can share the same import format. :)

[1] http://code.grid.in.th/

Stylebot for Chrome: Web Developer Toolbar meets Greasemonkey

Related Stories