Skinning cf_sebForm

When I was working on cf_sebForm, I knew that I wanted it to work on any site. That meant that I had to be able to use the same code for different output on different sites. At first all of my forms were tabular, with code like the following:

I soon realized that I often wanted more semantic output like the following:

Now, cf_sebForm has a "format" attribute to allow you to choose which output you want. It can have a value of "table" or "semantic".

Additionally, cf_sebForm (as well as the other two tags in the sebtags custom tag set) has a "skin" attribute.

As of the first beta, the sebtags custom tag set has the following skins built in:

• graybar
• panels
• plain
• silver

Each skin applies a style sheet of the same name as the skin (silver.css, for example). The CSS file is located in the library path (the value of the "librarypath" attribute) in the "skins" folder.

In addition to applying CSS to a form, a skin also sets a default value for the "format" attribute. So the "graybar" skin is semantic, while the "panels" skin is tabular.

You can also create custom skins. To do that, first create a .css file and put it in the skins folder.

If you want to create a skin called "example", with a format of "table", you would first create an example.css file in the in "skins" folder with the CSS for your skin.

Then you would use the "skins" attribute of cf_sebForm to pass in a structure about skins that you are defining.

As you can see, you can define any attribute as a default. Also note that you can use global attributes here. Attributes that are set as part of a skin definition (for the skin being used) take more priority than other global attributes, but less than attributes that are set in the tag itself.

The demonstration site includes the ability to skin the tags (which also have documentation).

All of the tags in the sebtags custom tag set are skinnable and the entire set is open source and free for any use.