Illustration by ZopeMag Staff

ZStyleSheet

	Product name ZStyleSheet Description A Zope product that facilitates the creation of Cascading Style Sheets Release Date 2003/05/16 Version 4.2.5 (Stable) Rating (all ratings are on scale of 1-5 with 5 sushi being the best) Usability Software Design Documentation Usefulness Categories Style Sheet framework Size 14 Kbytes Requirements Zope 2.5 or higher Creator Adrian “The Haqa” Hungate License ZPL URL Download Packaged as Zope Product

Complies with CSS level 1 and level 2. Allows both embedded and linked style sheets. DTML commands can be embedded into attribute values. Browsers can be freely enabled or disabled.

Lacks sufficient documentation. Not all browsers are supported.

Cascading Style Sheets (CSS) are a collection of rules that allow Web designers to separate look-and-feel information from content. Most CSS rules consists of two main parts: selectors and declarations. A selector is a string that identifies what HTML element the corresponding rule applies to—it is a link between the HTML document and the style sheet. For instance, “body” is a selector used to identify the HTML tag element “BODY.” (In the following paragraphs, lower-case strings will identify CSS selectors, while upper-case strings will identify their corresponding HTML tag element.) A declaration is an attribute that describes the properties of an HTML tag element. Declarations consists of two parts: a property and its corresponding value. For example, the declaration “color: #000000” describes the property color and its corresponding value #000000 —the hexadecimal representation of black. A style sheet is a document that lists all rules (selectors and declarations) needed for rendering an HTML document—though the style sheet may be part of the HTML document itself. More details about CSS may be found in the World Wide Web Consortium Website.

The use of CSS with Zope has many possible solutions. For instance, the popular Zope Content Management Framework (CMF) uses style sheets extensively. However, CMF does not showe its CSS code explicitly—therefore, users need first to understand how CMF works before they can understand how to handle its style information. A product that allows the explicit handling of CSS information is ZStyleSheet. This article will briefly review how ZStyleSheet can help our readers to create stylish layouts for their projects.

ZStyleSheet (ZSS) is a product developed by Adrian “The Haqa” Hungate . It supports both CSS level 1 and level 2. Additionally, it allows the user to enable or disable specific browsers—that is, developers can switch on or off those rules that apply to specific browsers.

ZSS allows the selection of either embedded or linked style sheets for one's design. It also allows the embedding of DTML commands into attribute values, simplifying the rendering of dynamic layout. Depending on how they are called, ZSS instances can be rendered in a variety of ways. For instance, the following is a list that describes the different ways a ZSS instance may be called and its corresponding outcome:

<dtml-var styleSheetName>:  

this inserts either a (default) HTML tag or a HTML block.

<dtml-var "styleSheetName.tag()">:  

this inserts a HTML tag pointing to the ZSS instance within the Zope path.

<dtml-var "styleSheetName.style()”>: 

this inserts the style sheet within a HTML block.

<dtml-var "styleSheetName.preview()”>:

this renders the style sheet as an HTML document that can be reviewed on the fly—good for debugging.

Installing ZSS is an easy task. First, ZSS can be downloaded from here. Once downloaded, all we need to do is to extract all files from the tarball into the folder:

<zope-home>/lib/python/Products/

  # cd <zope-home>/lib/python/Products/
  # tar xvf <internet-downloads>/ZStyleSheet-4.2.5.tgz

Those readers working in a Windows environment can use any archiving utility such as WinZip or 7-Zip.

Once extracted, the package creates a new folder: <zope-home>/lib/python/Products/ZStyleSheet-4.2.5/. Now we must change the name of the newly created folder to <zope-home>/lib/python/Products/ZStyleSheet. Finally, restart Zope. That's it. Figure 1 depicts Zope's Product list within the ZMI Control_Panel with the ZStyleSheet item highlighted.

Figure 1 - Installation of ZStyleSheet Product

To illustrate the use of ZSS, we will create a multiple-column Web page layout. Figure 2 shows the structure of the desired layout. Our reference is Lizaola King's “Advanced CSS Layouts: Step by Step”.

Figure 2 - Desired Layout

Figure 3 displays our goal: a six-block layout with a top navigation bar, an advertisement bar, both left and right navigation bars, a main content area, and a colored Tip-Of-the-Day box inside the main area.

Figure 3 - Design Goal

In our first step we create a new folder and name it stylishPortal. Now, we must add a ZSS instance to the new folder. Figure 4 shows Z Style Sheet in Add Product list in the ZMI.

Figure 4 - Add Product List in ZMI

We named the new ZSS instance stylesheet. Figure 5 highlights the recently created stylishPortal folder and its content. The new ZSS instance (stylesheet) appears with a red icon.

Figure 5 - Rules Applied to Stylesheet

The next step consists of creating new rules that will be applied to our style sheet. If we click on the red icon shown in Figure 5, a new View (Contents) will appear in the ZMI. Figure 6 shows the contents of stylesheet. In addition to the standard Zope views, Figure 6 shows three new views which are specific to ZSS: Dump, Change Browser, and Import CSS. Dump generates part or all of a Z Style Sheet on screen, including the browser list. Change Browser allows the user to change the browser setting used by the rule. Import CSS enables the user to import a text file containing style sheet information into a ZSS instance.

Figure 6 - Adding a new field

In our case, we need a rule for each of the blocks mentioned above. We will name each rule after the corresponding block component. For example, our first rule will apply to the advertisement bar (advBar rule). Among the many things we could use this bar for, holding a banner is one of the most common. In this case, our rule must consist of at least two attributes and, say, two sub-rules. The two attributes describe the background color and which side of the advertisement bar should be adjacent to the earlier floating box—the clear attribute. (More details about how to use CSS level 1 and level 2 can be found in the W3C (PDF) specification. Figure 7 below shows the Add Z Style Sheet Attribute view.

Figure 7 - Add ZStyleSheet Attribute View

It is worthwhile to note the list of available browsers shown in Figure 7. As most Web designers know, each browser has specific issues when handling CSS data. Handling these specific issues for different browsers is one of the great advantages of ZSS. Users only need to select which browsers they expect their application will operate on. ZSS takes care of the rest.

Figure 8 displays the Add Z Style Sheet Rule view used to create a sub-rule img within the rule advBar. This rule will apply to the banner contained in the advertisement bar. Again, the Add Z Style Sheet Rule view shows the id, Title, and browsers list parameters we found in the previous Add Z Style Sheet Attribute view shown in Figure 7. However, it also shows a new selector parameter. This parameter allows us to associate our (sub-)rule to a specific HTML tag element. In this case, the selector img will be associated to the HTML tag element IMG.

Figure 8 - Add ZStyleSheet

We may proceed in the same way to create all the rules, attributes, and sub-rules required by our stylishPortal. The following Listing 1 lists the complete style sheet generated by the ZSS View command—see Figure 6 above.

Listing 1: Complete Style Sheet (PDF)

Finally, Listing2 shows the index_html document that generates the Web page shown in Figure 3.

Listing 2: index_html (PDF)

ZStyleSheet is a simple and powerful tool for creating W3C-compliant CSS. It allows Web designers to create explicitly defined style sheets within Zope. Style sheets can be statically embedded or dynamically linked. Static style sheets can be imported as well. CSS rules can be enabled or disabled for specific browsers. CSS attribute values can contain DTML commands to ease the dynamic generation of style information. ZStyleSheet is a useful product for creating both simple and complex layouts.