

Stylebot for Chrome: Web Developer Toolbar meets Greasemonkey - adamhowell
http://stylebot.me/

======
anigbrowl
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...](http://www.alexschreyer.net/programming/liquid-page-a-bookmarklet-
to-rearrange-webpages/) 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.

~~~
carussell
_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
Just created an issue or feature request with that exactly:

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

Would be very neat.

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

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

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

------
johnzabroski
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-...](http://google-
opensource.blogspot.com/2010/09/changing-look-of-web-with-stylebot.html)

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.

~~~
anigbrowl
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.

------
sirn
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/>

------
there
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.

------
some1else
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
If you are asking what I think you are asking, check out Blank Canvas Script
Handler for Chrome. It is like GreaseMonkey for chrome.

------
desigooner
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>

------
jamesshamenski
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.

~~~
jamesshamenski
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_
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.

~~~
Raphael
Ideally share the repository of styles at <http://userstyles.org/>

~~~
ankit_
I don't really like the design of that site. Also, I will like to keep it
closely tied with stylebot so it is easy to share/install styles.

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

------
9ec4c12949a4f3
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.

