homeby dateby tagabout
main Zea site

Zea Screencast Library

Customizing Archetypes fields with CSS

View (Flash)

Customizing Archetypes fields with CSS

How do I change the way Plone looks? This screencast tackles a small part of that question, showing how Archetypes fields provide enough information in the generated HTML form to CSS style individual fields. The example used is the RichText widget, making the Kupu smaller on a per-field basis.

Date 2005/12/29
Tags
kupu (5)
plone (6)
Filesize 1.2 Mb
Duration 2m42s

Details

A custom content type is usually implemented as an Archetypes schema, with different fields for the information in the content type. When Archetypes generates the HTML to display each field, it leaves behind information saying which schema field the HTML maps to.

For example, a "description" field has HTML that looks like this:

<div class="field ArchetypesTextAreaWidget"
         id="archetypes-fieldname-description">

The ID of the field itself is encoded as part of the div's id attribute. Thus, we can use this to style the way a field looks on the form.

In this screencast we walk through the process of customizing the width and border of a RichText field, which uses the Kupu editor.