6 ms·

My Style: Custom CSS for unappealing sites you visit

48 points by karthikksv 14y ago

kichik 14y ago
Check out Better Internet. It allows you to do and share it too without an extension. http://betterinternet.co/ http://betterinternet.co/
- karthikksv 14y ago
  Oh, that's interesting. All the content is on *.betterinternet.me, though. I feel an extension keeps the content on the owner's site, while simultaneously allowing the custom design that one wants. Perhaps this model can provide further customization options, though.
goronbjorn 14y ago
Have you heard of Stylish? https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe/details https://chrome.google.com/webstore/detail/stylish/fjnbnpbmke...
- karthikksv 14y ago
  Oh, no I haven't. Looks like they beat me to it in terms of features and sharing. It seems like they could make it easier to use, though. You have to go to their custom styles page and add CSS without seeing its effects directly. Their userstyles.org website also needs some help (perhaps someone should make a stylish style for userstyles.org itself). Nevertheless, the sharing features are quite nice. I wanted to add such sharing capability myself.
  - alphakappa 14y ago
    Your project is still pretty good. Thanks for sharing (especially, for putting it up on github, so others can use some of this if necessary)
  - SippinLean 14y ago
    >without seeing its effects directly Nope, Stylebot has live CSS editing, it shows you the results as you type.
- tsigo 14y ago
  Also Stylebot - https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...
- andrewfelix 14y ago
  Greasemonkey/Tampermonkey also allows this. Been using it for a few years: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en https://chrome.google.com/webstore/detail/tampermonkey/dhdgf...
- 8ig8 14y ago
  Also: Inject JS: https://github.com/defunkt/dotjs https://github.com/defunkt/dotjs Inject CSS: https://github.com/stewart/dotcss/ https://github.com/stewart/dotcss/
mehrzad 14y ago
Or make a Stylish script and share with others.
bionsuba 14y ago
For firefox users, dotjs(https://addons.mozilla.org/en-us/firefox/addon/dotjs/ https://addons.mozilla.org/en-us/firefox/addon/dotjs/) does roughly the same thing but with custom js support as well.
- _ZeD_ 14y ago
  for firefox and js, I always used http://en.wikipedia.org/wiki/Greasemonkey http://en.wikipedia.org/wiki/Greasemonkey for custom css... I clearly remember that old firefox version could let me set custom css, no plugin needed...
  - myfonj 14y ago
    Most vanilla browsers lets you add your own user style into cascade. In Firefox it is userContent.css and userChrome.css [1] (loaded at startup), in Google Chrome custom.css [2](this file is 'live'). IE [3] and Opera [4] have something like this as well. [1] http://www-archive.mozilla.org/unix/customizing.html http://www-archive.mozilla.org/unix/customizing.html [2] http://code.google.com/p/chromium/issues/detail?id=2393 http://code.google.com/p/chromium/issues/detail?id=2393 [3] http://windows.microsoft.com/en-US/windows7/Use-your-own-style-sheet-to-format-webpages http://windows.microsoft.com/en-US/windows7/Use-your-own-sty... [4] http://www.opera.com/docs/usercss/#user-mode http://www.opera.com/docs/usercss/#user-mode
bestest 14y ago
Windows keyboards don't usually have a 'meta' key. I suppose you should consider changing the shortcut.
- ryiytrye 14y ago
  Yes, event.altKey would seem a better choice as it maps to Alt on Windows and Option on the Mac. Not sure about Chromebooks (which don't even have any modifier keys other than Shift) or Linux though. Or mobile browsers.
- gee_totes 14y ago
  I always thought that the key with the Windows logo was the meta key. Does it map out to something different?
- karthikksv 14y ago
  You make a good point. I'll fix this ASAP. I was also under the impression that the meta key mapped to the Windows key, but perhaps I'm wrong. Edit: Just updated the shortcut to control + m. Let me know if you continue to experience troubles.
josephers 14y ago
I like that it immediately shows changes as I type. I could use this for web development, by loading up an unstyled HTML template and applying CSS from here.
- karthikksv 14y ago
  That's great to hear. Thanks for the feedback.
Samuel_Michon 14y ago
I see that you've invented Greasemonkey. Unfortunately, it has already been around for the last 8 years. What's more, Chrome actually has native support for Greasemonkey scripts – no plugin needed. http://blog.chromium.org/2010/02/40000-more-extensions.html http://blog.chromium.org/2010/02/40000-more-extensions.html EDIT: My comment has been misunderstood by some, so let me try to be clearer: I like your plugin, I just wanted to let you know a plugin with similar functionality has been around for a long time, in case you were planning on spending a lot of time on it.
- d0m 14y ago
  No need to be a jerk about it. And, I particularly like how it makes it easy to tweak the page in real-time.
- karthikksv 14y ago
  Does Greasemonkey make it easy to modify styles as well? This is simple if you can insert arbitrary JS, but it'll be annoying if you need to write JS to insert CSS for every site you want to edit. I just wanted a simple way to edit CSS without having to go to my editor or a different web page, especially for sites that I visit often. Perhaps the tool I was looking for did already exist.
  - _ZeD_ 14y ago
    Greasemonkey (+ userscript) and your plug in attack two different parts of the problems. While "my style" it's great for "live" css editing, greasemonkey+userscript have a community and shines for the "share your modification" thing. May I suggest you to get in touch with gm/us developers? It would be awesome to be able to write a custom css for a site and share it!
    - randomchars 14y ago
      There's an extension called stylish, and a corresponding website [0]. [0]: http://userstyles.org/ http://userstyles.org/
- 14y ago
hashmymustache 14y ago
Any recommendations for this kind of thing on iOS? I wanted to use a custom style on a web page on my iPad but couldn't find anything
- ludwigvan 14y ago
  You could probably use a bookmarklet to inject the css via javascript.
latraveler 14y ago
Great for practical jokes and April Fools Day tricks I might add.
tupiniquim 14y ago
Make it work in the same fashion as Readability (with a bookmarklet or something) and I'm sold.
saxamaphone69 14y ago
I wish someone would write an alternative to Stylish for Firefox (I would try if I knew where to even start...). Looks good though. I don't use Chrome, so can't test it, but judging from the screenshot, perhaps some syntax highlighting? Nice and simple though. Guess a sharing feature would be the next step?
FraaJad 14y ago
How do you backup the CSS files that you create? The github pages says localstorage. Is there an easy way to extract CSS and put it in a directory, say in git repo for backup and version control?
wittjeff 14y ago
This could be useful for low-vision people, who might like to optimize fonts and foreground/background colors for readability. It would be nice to be able to have toggleable presets.
rockfort 14y ago
Where are the css files stored?

48 points by karthikksv 14y ago

Check out Better Internet. It allows you to do and share it too without an extension. http://betterinternet.co/ http://betterinternet.co/

karthikksv 14y ago
Oh, that's interesting. All the content is on *.betterinternet.me, though. I feel an extension keeps the content on the owner's site, while simultaneously allowing the custom design that one wants. Perhaps this model can provide further customization options, though.

goronbjorn 14y ago

Have you heard of Stylish? https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe/details https://chrome.google.com/webstore/detail/stylish/fjnbnpbmke...

karthikksv 14y ago
Oh, no I haven't. Looks like they beat me to it in terms of features and sharing. It seems like they could make it easier to use, though. You have to go to their custom styles page and add CSS without seeing its effects directly. Their userstyles.org website also needs some help (perhaps someone should make a stylish style for userstyles.org itself). Nevertheless, the sharing features are quite nice. I wanted to add such sharing capability myself.
- alphakappa 14y ago
  Your project is still pretty good. Thanks for sharing (especially, for putting it up on github, so others can use some of this if necessary)
- SippinLean 14y ago
  >without seeing its effects directly Nope, Stylebot has live CSS editing, it shows you the results as you type.
tsigo 14y ago
Also Stylebot - https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...
andrewfelix 14y ago
Greasemonkey/Tampermonkey also allows this. Been using it for a few years: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en https://chrome.google.com/webstore/detail/tampermonkey/dhdgf...
8ig8 14y ago
Also: Inject JS: https://github.com/defunkt/dotjs https://github.com/defunkt/dotjs Inject CSS: https://github.com/stewart/dotcss/ https://github.com/stewart/dotcss/

mehrzad 14y ago

Or make a Stylish script and share with others.

bionsuba 14y ago

For firefox users, dotjs(https://addons.mozilla.org/en-us/firefox/addon/dotjs/ https://addons.mozilla.org/en-us/firefox/addon/dotjs/) does roughly the same thing but with custom js support as well.

_ZeD_ 14y ago
for firefox and js, I always used http://en.wikipedia.org/wiki/Greasemonkey http://en.wikipedia.org/wiki/Greasemonkey for custom css... I clearly remember that old firefox version could let me set custom css, no plugin needed...
- myfonj 14y ago
  Most vanilla browsers lets you add your own user style into cascade. In Firefox it is userContent.css and userChrome.css [1] (loaded at startup), in Google Chrome custom.css [2](this file is 'live'). IE [3] and Opera [4] have something like this as well. [1] http://www-archive.mozilla.org/unix/customizing.html http://www-archive.mozilla.org/unix/customizing.html [2] http://code.google.com/p/chromium/issues/detail?id=2393 http://code.google.com/p/chromium/issues/detail?id=2393 [3] http://windows.microsoft.com/en-US/windows7/Use-your-own-style-sheet-to-format-webpages http://windows.microsoft.com/en-US/windows7/Use-your-own-sty... [4] http://www.opera.com/docs/usercss/#user-mode http://www.opera.com/docs/usercss/#user-mode

bestest 14y ago

Windows keyboards don't usually have a 'meta' key. I suppose you should consider changing the shortcut.

ryiytrye 14y ago
Yes, event.altKey would seem a better choice as it maps to Alt on Windows and Option on the Mac. Not sure about Chromebooks (which don't even have any modifier keys other than Shift) or Linux though. Or mobile browsers.
gee_totes 14y ago
I always thought that the key with the Windows logo was the meta key. Does it map out to something different?
karthikksv 14y ago
You make a good point. I'll fix this ASAP. I was also under the impression that the meta key mapped to the Windows key, but perhaps I'm wrong. Edit: Just updated the shortcut to control + m. Let me know if you continue to experience troubles.

josephers 14y ago

I like that it immediately shows changes as I type. I could use this for web development, by loading up an unstyled HTML template and applying CSS from here.

karthikksv 14y ago
That's great to hear. Thanks for the feedback.

Samuel_Michon 14y ago

I see that you've invented Greasemonkey. Unfortunately, it has already been around for the last 8 years. What's more, Chrome actually has native support for Greasemonkey scripts – no plugin needed. http://blog.chromium.org/2010/02/40000-more-extensions.html http://blog.chromium.org/2010/02/40000-more-extensions.html EDIT: My comment has been misunderstood by some, so let me try to be clearer: I like your plugin, I just wanted to let you know a plugin with similar functionality has been around for a long time, in case you were planning on spending a lot of time on it.

d0m 14y ago
No need to be a jerk about it. And, I particularly like how it makes it easy to tweak the page in real-time.
karthikksv 14y ago
Does Greasemonkey make it easy to modify styles as well? This is simple if you can insert arbitrary JS, but it'll be annoying if you need to write JS to insert CSS for every site you want to edit. I just wanted a simple way to edit CSS without having to go to my editor or a different web page, especially for sites that I visit often. Perhaps the tool I was looking for did already exist.
- _ZeD_ 14y ago
  Greasemonkey (+ userscript) and your plug in attack two different parts of the problems. While "my style" it's great for "live" css editing, greasemonkey+userscript have a community and shines for the "share your modification" thing. May I suggest you to get in touch with gm/us developers? It would be awesome to be able to write a custom css for a site and share it!
  - randomchars 14y ago
    There's an extension called stylish, and a corresponding website [0]. [0]: http://userstyles.org/ http://userstyles.org/
14y ago

hashmymustache 14y ago

Any recommendations for this kind of thing on iOS? I wanted to use a custom style on a web page on my iPad but couldn't find anything

ludwigvan 14y ago
You could probably use a bookmarklet to inject the css via javascript.

latraveler 14y ago

Great for practical jokes and April Fools Day tricks I might add.

tupiniquim 14y ago

Make it work in the same fashion as Readability (with a bookmarklet or something) and I'm sold.

saxamaphone69 14y ago

I wish someone would write an alternative to Stylish for Firefox (I would try if I knew where to even start...). Looks good though. I don't use Chrome, so can't test it, but judging from the screenshot, perhaps some syntax highlighting? Nice and simple though. Guess a sharing feature would be the next step?

FraaJad 14y ago

How do you backup the CSS files that you create? The github pages says localstorage. Is there an easy way to extract CSS and put it in a directory, say in git repo for backup and version control?

wittjeff 14y ago

This could be useful for low-vision people, who might like to optimize fonts and foreground/background colors for readability. It would be nice to be able to have toggleable presets.

rockfort 14y ago

Where are the css files stored?