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
- It’s time to start farming….
- zFeeder – Making PHP 5.3 + compatible, solving ‘Function ereg_replace() is deprecated’
- How to multilingualize or localize URL in Gallery2 – enhancement of multilang module to create multilingual URLs, Multi-language URL for SEO with Multi Language Module
- Fix for mergelog, fails with error “abort due to a problem” for dummy records of apache access logs
- Shepherds life in mountain
- The modern marriage culture among mate
- Do you know that barter system still exists in most villages in uttarakhand, may be true for many other parts of India also
- How to catch copy paste from explorer using shell extension? ICopyHook alternative for files and folder
- How to convert ASCII/UNICODE string to hex string? Function/API to convert to hex string
- How to solve ‘ReadFile hangs’ for named pipe client/server – sample working code for named pipe
April 2nd, 2009 at 8:44 pm
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.
April 2nd, 2009 at 10:24 pm
thank you brother. i will fix this bug on comment asap.
April 2nd, 2009 at 10:47 pm
The comment box bug is fixed. thanks