Welcome to the WYSIF - Authoring "KompoZer by Example" web page.

We encourage all users to ask questions freely regarding anything you may find on this site. As this site is tailored to newbies, and particularly newbies to CSS we want to remind you that there is no such thing as a stupid question! You may ask your questions in the forum or you may send a private message to a user from the forum if you need clarification or further assistance.

Mission Statement:

The mission of this site and the exercises contained within are to teach users new to KompoZer and CaScadeS how to create web pages using these tools. We will take a table layout example made by a user experienced in creating table layouts with NVu/KompoZer and invite knowledgeable CSS, CaScadeS and KompoZer users to replicate this design using CSS without tables by giving step by step examples. At the end of this exercise the intended result will be that any user can visit this site (at the behest of a forum post or other suggestive guidance) and will then be able to create their own web site layouts using CSS.

Please note that the above examples are only the beginning, we fully intend on making the site a repository for site layouts and techniques using KompoZer and CaScadeS.

Many people on the WYSIFA forum have firmly stated their disfavor regarding the use of tables, others have expressed concern over the use of CSS for various reasons, this site will rise above that fray and will remain entirely neutral regarding an opinion on the use of CSS and/or tables. The goal of this site is to teach people how to put KompoZer and CaScadeS to practical use, we firmly believe that ultimately the layout method a web author chooses to use should be and is their own choice.

So provide your examples and show your stuff, if you talk the talk and have been itching to prove your methods then here is your chance to finally walk the walk.


The purpose of this site is to provide "step by step" instructions on creating specific web site layouts using KompoZer, examples are provided for Table and Tableless CSS designs (named Tables and CSS under Original Examples in the menu above) The site will focus on Tableless CSS solutions but we welcome well thought out Alternate Table based designs and Hybrid Table/CSS designs. As noted above, this site will remain neutral regarding the CSS vs. tables debate, please afford your fellow contributors the same respect that you would yourself wish to be afforded.

Who is this site for?

This site is for all KompoZer users regardless of their user level but particular emphasis is given to new users (newbies.) NVu is supported in only a limited sense, KompoZer has extended NVu greatly with the edition of CaScadeS (a CSS editor.) If you would like to design your site using CSS then we strongly encourage you to upgrade to the latest version of KompoZer which can be found at kompozer.net

Types of Users:

We will class users on this site in the following manner:

Additional users will be recruited to serve as Editors based on merit through the usefulness and helpfulness of their posts and submissions.

How can I Participate?

Become a contributor! Please first read this page in it's entirety, then visit the WYSIF Authoring Forum and Private Message (PM) Gary777 or unohoo, they will send FTP instructions for using this site. Please review the Rules section throughly to ensure you understand all of the submission requirements.


When submitting examples to this site please use the following steps:

  1. After uploading your final example provide a direct link to your example in the "KompoZer by Example" section of the forum under a new Topic in the Examples section I.E. "Username's Kompozer by Example submission."
  2. Explain your techniques and it's benefits in your forum post
  3. Send a PM to Gary777 including the file name (HTML) for your example and he will create a link to your example on this page.


  1. Contributors submitting a design must exactly replicate the; text, look, feel and functionality of the original Tables design
  2. You may change colors, text sizes and fonts.
  3. You may use html tags and change the structure of the HTML in any manner you like so long as the result is stable and usable and replicates the left side bar layout and provides text in the top most paragraphs of the content section (this should be an explanation of your design and not actual instructions.)
  4. CSS, Alternate Table layouts and Hybrid Table/CSS layouts are allowed, CSS is preferred.
  5. The use of Alternate Style sheets to extend the original example is encouraged, please provide step by step instructions when doing this. (Please note, you may submit an alternate style sheet only after you have submitted a base example replicating the original example. Or you may team up with another author and extend their example.)
  6. Your solutions must be repeatable by ANY user solely using Kompozer.
  7. You must give a step by step tutorial on how to achieve your result (so that any user can repeat your steps and achieve the exact same result) If you believe you need to include steps such as "hit enter" for a particular step (for example) to ensure the user will add a line feed when required then please include that level of detail. We suggest that you not assume anything when writing your step by step instructions.
  8. Editors reserve the right to edit your textual descriptions for brevity and clarity. (We will inform you when we do so)
  9. You must use Kompozer version 0.7.10 or later, we have discovered that some items have been renamed and some procedure differ between version 0.7.7 and 0.7.10, version 0.7.10 has many new enhancements that greatly extend CaScadeS while maintaining backwards compatibility for earlier version of KompoZer HTMl files.
  10. You must note the KompoZer version you used to create your design.
  11. You must note the operating system used to create your example.
  12. You must complete and include the Browser Compatibility section on the bottom of each example where:
    a. You must note which browsers your example is and is not compatible with
    b. Please include specific problems with specific browsers (such as IE box Model Issues etc...)
    c. You must note all browser hacks and/or work arounds required to use your design.
    d. Note if your design requires the use of Quirks mode.
    e. You must note the use of any scripts or unusual server requirements required to use your design.
    d. We have used browsershots.org to test the original examples, if you'd like to use this method and if your example works in all browsers on that site then you can simply say "this design works in all browsers tested by browsershots.org" and note any minor inconsistencies, please note any browsers that fail by version and OS.
  13. Feel free to add as many Author's notes as you like to the bottom section of the page, and feel free to note your personal preferences and opinions (and explain why you feel this way) if it will help users understand the process of designing a page using your methods, however please do so in a tasteful and condensed manner. This is not the place to argue for or against any particular technique or method.
  14. We encourage and prefer that you to provide validation information (CSS, HTML etc...)
  15. Any user may be a contributor however designs must be well documented and follow the stated rules.
  16. Poor designs may be rejected for use on this site by other contributors and the editors.
  17. You must allow any designs you submit to be used freely by the general public, you will receive full credit for your designs.
  18. WYSIFA Forum rules apply equally here.
  19. Have fun!

Notes and questions:

  1. We realize and appreciate that some users will have different ideas regarding page design and methodology, rest assured that after phase one of this process has been completed (the creation of a step by step tutorial to replicate the original Tables design using CSS) we will be expanding the site to give contributors a place to show off their own design ideas, again using the concept of Step by Step examples and full disclosure.
  2. In the future, if interest exists, we will tackle other design techniques and methods on this site. If you have an idea please submit it to an editor for consideration.

Using Alternate Style Sheets in contributor examples:

If a contributor would like to use Alternate Style Sheets we have installed the Alternate Style Switcher (styleswitcher.js) from alistapart.com to support browsers that lack this capability. Please visit alistapart.com for usage and a tutorial on setting up and using Alternate Style Sheets in your examples. Also please note that we have removed the cookie capability from this script because the use of persistent cookies are not applicable to the examples on this site.

Important Links:

WYSIF Authoring: wysifauthoring.informe.com
Kompozer: kompozer.net
Kaz-Garden: www.gimp-werkstatt.de/kaze/