|
 |
|
|
| |
ZopeMag Links:
Home Page
About the Fish
Issue 09
Issue 08
Issue 07
Issue 06
Issue 05
Issue 04
Issue 03
Issue 02
Issue 01
Latest Issue
|
|
|
|
|
|
|
|
|
| |
|
|
| |
Letter from the Editor:
 Welcome
Interviews:
In our first issue we interview the father of the Wiki and the inventor of Extreme Programming.
Ward Cunningham
Tutorials:
Throughout the quarter we cover topics of interest to Zope developers, designers, and users.
MetaFlow
Databases and ZPTs
Custom User Folders
Zope and CSS
Intranets
Product Review:
Every two weeks we review a new Zope Product
Z Shrink
External File
DocumentLibrary
ZWiki
|
|
|
|
|
|
|
|
|
| |
|
|
| |
Downloads:
Products we talk about in this issues Articles and Reviews
ZShrink
Zope Page Templates
LocalFS
SimpleZPTmyAdmin
Extended User Folder
MetaFlow
|
|
| |
|
|
|
|
|
|
Illustration by Brendan Davis
|
 |
| CSS enables you to provide different views of your website so end users can choose which view they prefer. |
Zope and Cascading Style Sheets (CSS)
Using CSS with Zope
- - - - - - - - - - - -
By Nico Grubert | April 18, 2002
Introduction
Cascading Style Sheets (CSS) are used to define the layout of HTML elements such as fonts,
tables, lists, etc. Using CSS you reduces the size of your HTML code by eliminating annoying
tags like <FONT> and <CENTER> for example.
CSS enables you to provide different views of your
website so end users can choose which view they prefer.
The Concept
A CSS format has one or more properties; each property may have a different value assigned.
Let's say we have the following simple CSS code within a DTML Document index_html to define
two different text styles i.e., bold and italic.
<html><head><title<fonts</title>
<style type="text/css">
#textbold { font:bold 12pt Arial; }
#textitalic { font:italic 1cm Helvetica; }
</style>
<body bgcolor="#FFFFFF" text="#000000">
<p id="textbold">This text is: bold 12pt Arial</p>
<p id="textitalic">This text is: italic 1cm Helvetica</p>
</body></html>
The value "bold 12 pt Arial" assigned to the font variable textbold is static which makes it wasteful of time and energy to change the look of a whole website. While you can do some manipulations with CSS on the client side using ECMAScript, with Zope you can dynamically change any CSS variable to your own needs. That means: one way you can dynamically change the values of the font variables, i.e., both textbold and textitalic, is by using the DTML Document's properties which hold the variables values.
Using properties to dynamically change the CSS is only one possible way to embed CSS into your website. Another technique, more elegant than defining CSS styles in every DTML Document or DTML Method repeatedly, is to define the CSS in a separate File or in a DTML Document.
Techniques
Here's how to embed CSS:
- Write the CSS into each DTML Template (highly inefficient)
- Keep CSS code in one separate DTML Document (helpful in most cases)
- Use global and local CSS styles (a more elegant solution)
To write the CSS into each DTML template is not efficient because each time the CSS changes, you have to change the Code in each template. So, we will not discuss this technique further. Let's look at a more efficient technique -- keeping CSS code in a separate DTML Document.
Example 1 - Keep CSS code in one separate DTML Document
In this example we want to show how to define CSS so that it gives <td> / <th>
tags as well as the style of fonts a different look. First, let's define what it is we want to create.
Assume, we have three departments whose template pages (or other Zope objects) are stored in different folders named "News", "Downloads", and "Documentation".
Let's say each sub-section should have a different look, depending in which section a viewer finds himself. Assume further, we have the folder stucture in Zope shown to your right.
The root folder CSS_Examples contains the local sections "Documentation", "Downloads", and "News". Both, the "Documentation" and the "Downloads" section have sub-sections such as "Manuals", "Drivers", "Mainboard" etc.
Download Example 1 here.
When a user is in the root path CSS_Example_1 the following page is shown:
When one clicks on the links "Documentation", "Downloads" or "News" it brings the user into the local section (s)he clicked on, for example the "Documentation" section:
Note: The local section's background color and the font color of the hyperlinks differ from the settings we have defined for the root section.
Note too, that we have set up the name of a sub-section (folder) in a local section such that it will be shown in a bright grey <td> in dark blue fonts:
Here, "Tips" is the sub-section of our Documentation level.
As you can see, there are 3 different levels:
- Root section
- Local section section
- Sub-section of the local section
The names of the local sections and sub-sections are displayed dynamically, so there is no need to edit any HTML code within the templates, whenever new local or sub-local sections are added by the site manager.
To define different styles for font colors and background colors, we can either define different CSS classes in a global style sheet global_css or create separate CSS objects like root_css, local_css and local_sub_css as DTML Documents holding the CSS definitions for the root, local and sub-local section.
In the sample code above, we wrote the CSS code into a DTML Document index_html. We do not want to write the CSS code in each DTML Document again and again. A more elegant way to get the job done is to keep the CSS code in one separate Zope object. You can either upload a *.css file for example global.css that holds the CSS code, or, you put the CSS code within a DTML Document globals_css.
Still in example 1, let's take a look at the code to see how to define styles using classes in a single global_css DTML Document.
You have already downloaded Example 1. Now, import the zexp file into the Zope Root Folder. You should end up with the folder structure of the screenshot above.
|
|
|
