Cmlap News, articles Css-editor user s guide

Css-editor user s guide

The css-editor.org is an online, free and WYSWYG stylesheet editing application, now completed with css3 generator tab. With css3 generator you can set background gradients, box shadow, text shadow, text rotation, border radius values with simple sliders.
With using the editor, you can see your webpage immediately how it will look like. Next you can download the complete stylesheets, generated images in one file and use it in your site.

No registration required!

  • First step, click on the CSS Editor menupoint, then enter your site url into the input field and click on the Edit CSS button.

    The editor will be load your page html if it can. Some javascript sit to it :) and look at the stylesheets in rel tags. After, this list is available and selectable in the drop-down list(select field). (If your source contains @import tags, the parser replace it with rel tags.)

  • Second step, select from the list the stylesheet you want to edit, or your page contains only one sheet you can edit it immediately.

  • Click on any of your page element, this element's class, id, or name appears on the top of green box's white bar. Then if you click on the edit button(Edit rule icon), the program try to find your definition(or similar definitions) in the css file.( If find it you can edit this, or chooze one from the list or make new definition.)

    With click on the Add button(Add new rule, list rules icon), you can add new rule(definition) or display all rule in the box. In the list you can select the definition with clicking on any radio button.

    For manual editing your sheet, click on the manual editor button (Manual edit css rules icon). You can see your css source. The difference in this mode is that you must save your modification with Save button if you like it, because the parser must be processed your code(such as first loading)!

You can undo all modification with the Undo button, then the program reload and parse your original css file (from your original css url) therefore think again you click on it or not, because your all modification will be lost!

You can download all of the saved css file and images in one zip file or download one by one from the picture browser window with click on the link!

While your session is available, you can access all your work!

 


See video how to use the css editor

If you load another url, but the session is the same, the modified css is overloading your page, so you can edit all of your pages without uploading another css.

When you are happy with the design, just download the zip file!


Important! After download stylesheets, unzip the file into a temporary directory, and with find and replace technic change the urls of the image sources in the files to your directory structure!

System conditions:
ATTENTION! I develop the css3 generator under Firefox 6, therefore possible not working in other browsers! Please be patient, i will correct the code!

(Currently maybe not: The editor working correctly only in IE8, Firefox~3 and Goggle Chrome browsers. Old browsers usually does not support fully css editing!)

Javascript must be enabled.
(Maybe in Internet Explorer 7 the manual editing working, but you cant click on page elements!)
It use Prototype and Script.aculo.us javascript librarys, so conflict maybe occour. Though i tryed to eliminate this, but I cant guarantee in all cases!

The next development will: you can upload your html and edit the css in this code.
Ha tetszett vagy hasznosnak talltad, krlek oszd meg!
Author / szerz:
Tovbbi kpek:
Css-editor.org Screenshot 1
css3 generator screenshot
More news in theme / Tovbbi cikkek
Hozzszlsok
Vlasszon nyelvet!
Keress a tartalomban
Kattintson ide az adatok elkldshez!