9 ms·

Stylebot for Chrome: Web Developer Toolbar meets Greasemonkey

82 points by adamhowell 16y ago

jamesshamenski 16y 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.
- jamesshamenski 16y 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_ 16y 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.
    - Raphael 16y ago
      Ideally share the repository of styles at http://userstyles.org/ http://userstyles.org/
      - ankit_ 16y ago
        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.
regexnow 16y ago
It is a bit like iMacros? https://chrome.google.com/extensions/detail/deckhobdafgddaglbaokimbcjjdikago https://chrome.google.com/extensions/detail/deckhobdafgddagl...
johnzabroski 16y 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-of-web-with-stylebot.html 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.
- anigbrowl 16y 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.
- Raphael 16y 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.
nostromo 16y ago
Finally, HN for eyes > 30. http://i.imgur.com/5qKu3.png http://i.imgur.com/5qKu3.png
- some1else 16y ago
  CMD and + :-D http://i10.fastpic.ru/big/2010/0922/ee/f0510cd34ff0dc9ee66168cd219df3ee.png http://i10.fastpic.ru/big/2010/0922/ee/f0510cd34ff0dc9ee6616... I do appreciate the margins though.
- ankit_ 16y ago
  Here is the HN custom CSS from http://stylebot.me/examples.html http://stylebot.me/examples.html: http://gist.github.com/587613 http://gist.github.com/587613
- johns 16y ago
  Can you get rid of the numbers left of up vote arrow? I don't know what purpose they serve.
  - nostromo 16y ago
    Sure, give the selector "td.title:first-of-type" the property "visibility:hidden;"
some1else 16y 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 16y 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 16y 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.
deleted 16y ago
[deleted]
desigooner 16y ago
a very helpful tool to experiment with CSS on the fly. My version of HN: http://cl.ly/69649580c36f1baa9d9a http://cl.ly/69649580c36f1baa9d9a The code for it: http://pastebin.com/WZmdaBPs http://pastebin.com/WZmdaBPs
shortformblog 16y ago
Oh. My. God. This is like Firebug on crack. I have a new best friend.
anigbrowl 16y 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-bookmarklet-to-rearrange-webpages/ 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.
there 16y 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/ 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 http://i.imgur.com/uVNzT.png) and also to do some custom ad blocking/content shifting on other sites.
sirn 16y 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/ http://code.grid.in.th/

82 points by adamhowell 16y 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.

jamesshamenski 16y 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_ 16y 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.
  - Raphael 16y ago
    Ideally share the repository of styles at http://userstyles.org/ http://userstyles.org/
    - ankit_ 16y ago
      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.

regexnow 16y ago

It is a bit like iMacros? https://chrome.google.com/extensions/detail/deckhobdafgddaglbaokimbcjjdikago https://chrome.google.com/extensions/detail/deckhobdafgddagl...

johnzabroski 16y 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-of-web-with-stylebot.html 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.

anigbrowl 16y 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.
Raphael 16y 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.

nostromo 16y ago

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

some1else 16y ago
CMD and + :-D http://i10.fastpic.ru/big/2010/0922/ee/f0510cd34ff0dc9ee66168cd219df3ee.png http://i10.fastpic.ru/big/2010/0922/ee/f0510cd34ff0dc9ee6616... I do appreciate the margins though.
ankit_ 16y ago
Here is the HN custom CSS from http://stylebot.me/examples.html http://stylebot.me/examples.html: http://gist.github.com/587613 http://gist.github.com/587613
johns 16y ago
Can you get rid of the numbers left of up vote arrow? I don't know what purpose they serve.
- nostromo 16y ago
  Sure, give the selector "td.title:first-of-type" the property "visibility:hidden;"

some1else 16y 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 16y 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 16y 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.

deleted 16y ago

[deleted]

desigooner 16y ago

a very helpful tool to experiment with CSS on the fly. My version of HN: http://cl.ly/69649580c36f1baa9d9a http://cl.ly/69649580c36f1baa9d9a The code for it: http://pastebin.com/WZmdaBPs http://pastebin.com/WZmdaBPs

shortformblog 16y ago

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

anigbrowl 16y 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-bookmarklet-to-rearrange-webpages/ 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.

there 16y 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/ 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 http://i.imgur.com/uVNzT.png) and also to do some custom ad blocking/content shifting on other sites.

sirn 16y 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/ http://code.grid.in.th/