5 ms·

Live stylesheet editing

31 points by sahillavingia 16y ago

Groxx 16y ago
Doesn't much like Adblock. It displays all the code, but doesn't allow editing it.
- aw3c2 16y ago
  I doubt that is a problem with Adblock itself. I guess you mean you are using Adblock Plus with a filter subscription? Check what things are filtered on that page based on your filters.
  - Groxx 16y ago
    Oh, sorry, just realized that may have been interpreted incorrectly. The page works, but only with the example CSS - the Adblock code on the page is uneditable.
marcamillion 16y ago
Funny...I can't see the source code. But I can edit the stylesheet. This is pretty cool. 1) How is it done? 2) How are you hiding how it's done? Edit: Is it done through a Chrome extension?
- noibl 16y ago
  The STYLE element has the attribute 'contenteditable' and the CSS style 'display: block'.
- harisenbon 16y ago
  It looks like he just uses the "contenteditable" property ( http://valums.com/edit-in-place/ http://valums.com/edit-in-place/ ) to make it editable, and then displays it as a word-wrap: pre element. While I can't think of any immediate applications, I had never realized that contenteditable was so widely supported. I'm going to have to try using it in my next project...
  - noibl 16y ago
    There's no such thing as a 'word-wrap: pre element'.
deleted 16y ago
[deleted]
ursablanco 16y ago
It would have been more interesting if the first thing I did wasn't to change em's to px's. Apparently I can't read 2px text.
ankit_ 16y ago
Interesting find. I could use this idea in Stylebot (http://stylebot.me http://stylebot.me). It's a Chrome extension that allows you to live edit a custom stylesheet for any page on the web.
poundy 16y ago
contenteditable="" is that all?
ck2 16y ago
In Firefox https://addons.mozilla.org/en-US/firefox/addon/179/ https://addons.mozilla.org/en-US/firefox/addon/179/
- barfoomoo 16y ago
  Does this have any functionality over what web developer and firebug provide?
misterbwong 16y ago
As a side note, the web developer toolbar in FF (and maybe chrome, I haven't checked) is able to do this.

31 points by sahillavingia 16y ago

Groxx 16y ago

Doesn't much like Adblock. It displays all the code, but doesn't allow editing it.

aw3c2 16y ago
I doubt that is a problem with Adblock itself. I guess you mean you are using Adblock Plus with a filter subscription? Check what things are filtered on that page based on your filters.
- Groxx 16y ago
  Oh, sorry, just realized that may have been interpreted incorrectly. The page works, but only with the example CSS - the Adblock code on the page is uneditable.

marcamillion 16y ago

Funny...I can't see the source code. But I can edit the stylesheet. This is pretty cool. 1) How is it done? 2) How are you hiding how it's done? Edit: Is it done through a Chrome extension?

noibl 16y ago
The STYLE element has the attribute 'contenteditable' and the CSS style 'display: block'.
harisenbon 16y ago
It looks like he just uses the "contenteditable" property ( http://valums.com/edit-in-place/ http://valums.com/edit-in-place/ ) to make it editable, and then displays it as a word-wrap: pre element. While I can't think of any immediate applications, I had never realized that contenteditable was so widely supported. I'm going to have to try using it in my next project...
- noibl 16y ago
  There's no such thing as a 'word-wrap: pre element'.

deleted 16y ago

[deleted]

ursablanco 16y ago

It would have been more interesting if the first thing I did wasn't to change em's to px's. Apparently I can't read 2px text.

ankit_ 16y ago

Interesting find. I could use this idea in Stylebot (http://stylebot.me http://stylebot.me). It's a Chrome extension that allows you to live edit a custom stylesheet for any page on the web.

poundy 16y ago

contenteditable="" is that all?

ck2 16y ago

In Firefox https://addons.mozilla.org/en-US/firefox/addon/179/ https://addons.mozilla.org/en-US/firefox/addon/179/

barfoomoo 16y ago
Does this have any functionality over what web developer and firebug provide?

misterbwong 16y ago

As a side note, the web developer toolbar in FF (and maybe chrome, I haven't checked) is able to do this.