My Style: Custom CSS for unappealing sites you visit

https://github.com/karthikv/my-style

by karthikksv • 13 years ago

48 40 13 years ago

github.com

kichik• 13 years ago

Check out Better Internet. It allows you to do and share it too without an extension.

http://betterinternet.co/

karthikksv5• 13 years 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• 13 years ago

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

karthikksv5• 13 years 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.

alphakappa2• 13 years 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• 13 years ago

>without seeing its effects directly

Nope, Stylebot has live CSS editing, it shows you the results as you type.

tsigo• 13 years ago

Also Stylebot - https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

andrewfelix• 13 years ago

Greasemonkey/Tampermonkey also allows this. Been using it for a few years: https://chrome.google.com/webstore/detail/tampermonkey/dhdgf...

8ig8• 13 years ago

Also:

Inject JS: https://github.com/defunkt/dotjs

Inject CSS: https://github.com/stewart/dotcss/

mehrzad• 13 years ago

Or make a Stylish script and share with others.

bionsuba• 13 years ago

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

_ZeD_3• 13 years ago

for firefox and js, I always used 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• 13 years 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 [2] http://code.google.com/p/chromium/issues/detail?id=2393 [3] http://windows.microsoft.com/en-US/windows7/Use-your-own-sty... [4] http://www.opera.com/docs/usercss/#user-mode

bestest• 13 years ago

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

ryiytrye• 13 years 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• 13 years ago

I always thought that the key with the Windows logo was the meta key. Does it map out to something different?

karthikksv5• 13 years 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• 13 years 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.

karthikksv5• 13 years ago

That's great to hear. Thanks for the feedback.

Samuel_Michon3• 13 years 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

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• 13 years 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.

karthikksv5• 13 years 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_3• 13 years 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!

alphakappa2• 13 years ago

What's your point? Maybe he did it because it was an itch he wanted to scratch. It would be more useful to critique his project and maybe offer some constructive criticism, than to offer this snark.

pseudobry• 13 years ago

Even if he is planning on spending a lot of time on it, he will probably:

1. Be doing something he loves 2. Gain experience and improve his skills 3. Expand his portfolio 4. Makes friends and connections and get valuable feedback 5. Learn what it's like to try to beat a competing product 6. Maybe fail, and learn from it 7. etc.

"similar functionality has been around for a long time"

That doesn't matter to a lot of people in a lot of situations. We just keep on coding.

If this thread was entitled "Show HN: The new karthikv OS" or "Show HN: Introducing the Google Search killer", then yeah, spending a lot of time on that kind of thing (especially for free) might be foolish.

_ZeD_3• 13 years ago

"try to beat a competing product" ?

fiatpandas• 13 years ago

You should probably edit your comment a 2nd time and delete the first two sentences because they make you sound like an ass. And, you not only mock the guy, but you refer to the wrong plugin... incredible. Are you not ashamed to have such comments linked to a username which personally identifies you?

Samuel_Michon3• 13 years ago

"you not only mock the guy, but you refer to the wrong plugin"

Neither of those statements are true.

"Are you not ashamed to have such comments linked to a username which personally identifies you?"

Anything I write, I should be willing to sign with my name, otherwise it's probably not worth writing. I didn't write the comment with malicious intent, but when I saw it could be interpreted that way, I clarified it.

grey-area• 13 years ago

Downvoted for unnecessary snark and the non-apology in your edit (disagreement with tone is not misunderstanding). There are gentler and better ways to express this, e.g.:

Have you had a look at Greasemonkey or Stylish?

Because you can use greasemonkey to do the same thing doesn't make this worthless, and even if this replicated what greasemonkey does exactly (which it doesn't), it might still be an interesting take on an old problem. Reinvention is a great way to learn, and not very damaging for anyone else, so why not do it now and then? As long as you're willing to admit other versions might be better than your attempt, I see nothing wrong with it.

As a good example of reinvention which actually solved a lot of real world problems, see Linux (reinventing MINIX, but eventually diverged hugely), which started thus:

I'm doing a (free) operating system (just a hobby, won't be big and professional like gnu) for 386(486) AT clones. This has been brewing since April, and is starting to get ready. I'd like any feedback on things people like/dislike in minix, as my OS resembles it somewhat (same physical layout of the file-system (due to practical reasons) among other things).

ThomW• 13 years ago

Greasemonkey kind of stinks for injecting CSS -- you get a flash of the original content before your userscript is injected into the site and it just looks bad compared to using Stylish.

Samuel_Michon3• 13 years ago

I agree, I chose to mention Greasemonkey because it's been around the longest, not because it's the best.

I also think the plugin he wrote serves a niche, and since writing my initial comment, I've been using it. I like it.

hashmymustache• 13 years 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• 13 years ago

You could probably use a bookmarklet to inject the css via javascript.

latraveler• 13 years ago

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

tupiniquim• 13 years ago

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

saxamaphone69• 13 years 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• 13 years 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• 13 years 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• 13 years ago

Where are the css files stored?

My Style: Custom CSS for unappealing sites you visit

Related Stories