In Example 1 we have learned how you can define CSS classes in one global CSS object called global_css. In that DTML Document we have defined different CSS classes for hyperlinks and background colors of a <td>. Since each header (global_header, local_header, local_subheader1, local_subheaders) displays the content of the corresponding level in a different background color, we had to write <td class="<css_class>"> where "css_class" is the name of the class we defined for the different background colors.

In the next Example, we want to show you how separate CSS objects (DTML Documents) can be defined that load automatically depending upon which section a user is in.

Likely you will want to create a global CSS object that defines a common look of your whole website. You want the look to change, each time you go into a sub-section (this is a visual clue, and helps you identify where you are (currently)).

In this example we will define 4 different CSS objects (DTML Documents):

• global_css
• root_css
• local_css
• local_sub_css

After you have downloaded Example 2, you should have the following folder structure:

Depending in which section a user is, he will see a different "look" with respect to the whole website, because a different style sheet is loaded in the header.

There are 3 different styles:

• root
• local
• local_sub

How each of these these styles look you can see for yourself in the next three figures.

/CSS_Example_2/

/CSS_Example_2/Downloads/

/CSS_Example_2/Downloads/Patches

As in Example 1, also there is a index_html DTML Document in each folder that contains a short description of the current section. Which of the four CSS objects is loaded we have defined in the standard_html_header.

Zope checks to see at which folder depth we are, by looking for the REQUEST variables URL2, URL3 and URL4.

We start with loading the global_css style sheet that contains definitions for hyperlinks and background colors that are comman for the whole website. After that we load a style sheet object, depending at which folder depth we are.

The condition

checks to see if a user is currently viewing the index_html DTML Document or DTML Method of a folder that is in the Root Folder, (in our example, it checks the path):

http://localhost:8080/CSS_Examples_2/index_html

The URL variables are defined as follows:

URL0 - http://localhost:8080/CSS_Examples_2/index_html
URL1 - http://localhost:8080/CSS_Examples_2
URL2 - http://localhost:8080/

Since the variable URL2 exists, and there is no variable URL3 because, the path http://localhost:8080/CSS_Examples_2/index_html has only a depth of "2", the condition above is true so the root_css style sheet is loaded to display the <th> using a red background color. No need anymore to write <TD class="<classname>">!

Now, we use a DTML Method standard_html_header that builds the header of each section's main page (index_html). Within the standard_html_header Method we load the corresponding style sheet using the <link> tag (here we load the style sheet root_css).

The rel attribute must be set to the value "stylesheet" to allow the browser to recognize that the href attribute gives the Web address (URL) for your style sheet.

Now, let's take a look at this root_css DTML Document.

As you can see, we define the <th> tag to use a red background color with some other attributes. Whenever we use <th> within our template pages, Zope uses the style we defined here - but only if this style sheet object is loaded.

The next condition

checks if a user is at a folder depth like this:

http://localhost:8080/CSS_Examples_2/<any_folder>/index_html

In the last condition we check to see if a user is in the path

http://localhost:8080/CSS_Examples_2/<any_folder1>/<any_folder2>/index_html

or deeper to display grey backgrounds for the <th>.

Clearly, there are different ways to give your website a dynamic look by using CSS. Binding the CSS at the depth of a path is only one way. Of course there are many other possibilities to load CSS objects; for example, by checking for properties, user roles, cookies etc.

Since CSS is a powerful language, you can define more than <td>, <th>, hyperlinks and font colors to give your website a look that can be dynamically changed. Now it's up to you. Good Luck!

 1  2  3
Tutorial End.