CssWing – webbased CSS editor, launched for testing

It’s been almost a month I am working on this software, I name it CssWing. As of now it is supported only for Gecko based browser, developed & tested in the BEST Browser – Firefox.
It’s an online editor for CSS modification of a site on fly. It’s in alpha stage and can only be used for this site.
If you are using Firefox then you will notice CssWing hanging over on top left corner of this site. If you hover over that, CssWing toolbar will show up, which lists out the style sheets used in this page.

You are welcome if you want to have a brief look at it.

Few things that you want to note:

Press Ctrl + Click anywhere in the page, then in bottom part it will show the style(s) that are used by the element where you clicked. It will also mark all the elements that use styles populated in the Toolbar.

1. If you change any property of the style listed, it will reflect upon the page as you type in.

2. Now press Ctrl + Shift + up. This will now select the parent element of the current selection (the element that you clicked last).

3. After you are done with the changes you can save it. Clicking on save button will show you the new style sheet highlighting all the changes that you did. You can save the file as Text file – your new style sheet is

ready to directly copied over for use.

4. The down arrow button in top right corner of toolbar allows you to enter settings. As of now you can enter properties that either you want to include or exclude.

5. The toolbar has auto hide option button in top right corner, which you can use to either set it fixed or auto hide.

6. The reset button will reset the properties to the original. As you change the properties you can see the reset button appearing next to it, clicking on which it will reset the corresponding properties to original.

7. You can also add property using the Add button beside the Style button, which appears when you select a style either by clicking on element or selecting from drop down list.

8. There are many bugs that I need to fix before it can be published for everybody to use offline and online.

The current CSS change that you see in this site is done using CssWing. If you do not like the change then you can make your own changes J and save it. The values are stored in cookie so changes will be persistent until the cookies expire (in 7 days) or deleted or you reset it using the toolbar.
Feedbacks on this product to improve its usability are welcome – please drop in comment on this post.

 

Recent Entries

3 Responses to “CssWing – webbased CSS editor, launched for testing”

  1. Pramod Says:

    This is really a nice tool to use. Its very handy for UX designers. This is a lighter tool version of Firebug…however many useful features.
    A BIG step. Keep it up..

    NOTE- I had hard time entering any comments here. I had to paste something first by right clicking, and then it allowed me to write.

    God bless you.

  2. gopu Says:

    thank you brother. i will fix this bug on comment asap.

  3. gopu Says:

    The comment box bug is fixed. thanks :)