forrest-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Ross Gardler <>
Subject Re: easily insert CSS for a single file?
Date Thu, 22 Mar 2007 13:23:53 GMT
Thorsten Scherler wrote:
> On Wed, 2007-03-21 at 18:19 +0000, Stuart Yeates wrote:
>> I'm playing with converting an HTML table into a CSS table (for better
>> accessibility, comply with local guidelines, etc) and would like to
>> know where to put the CSS to give it the narrowest scope possible
>> (ideally a single file or class of files). 
>> I'm not keen to update the global CSS files because I'm aware that CSS
>> can require a lot of platform- and browser-specific tweaking and I'd
>> rather not break things for everyone. 
> ...
> On Wed, 2007-03-21 at 18:48 +0000, Ross Gardler wrote:
>> I can add a little info to Stuarts needs as he is a colleague (but I do 
>> not know the answer). We are using the dispatcher, currently a 
>> customised version of the pelt theme.
> If you are using the dispatcher have a look at:
> and
> The important part in short:
> 1) you need to define a url specific structurer:
> <!-- CSS View of the request e.g. index.dispatcher.css -->
>   <forrest:view type="css" hooksXpath="/">
>     <!--Use/define css contracts in themes/yourPelt/css/ -->
>   </forrest:view>
> 2) Activate the css link to the url specific css.
> <!-- HTML View of the request (e.g. index.html)-->
>   <forrest:view type="html" hooksXpath="/html/body">
>     <forrest:contract name="branding-css-links">
>       <!-- More information around this contract
>         -->
>       <forrest:property name="branding-css-links-input">
>         <!-- You can request url specific css as defined above, 
>           but beware that you need to use the *.dispatcher.css extension!!!-->
>         <css prefix="" url="#{$getRequest}.dispatcher.css" media="screen" theme="Pelt"/>
>       </forrest:property>
>     </forrest:contract>
> ...
>   </forrest:view>
> This scenario will create to each html file a corresponding css file. e.g. requesting:
index.html will as well produce index.css.
> I do not think this is what you want. 
> Like I understand your mail you are looking for a file specific css (but only one). 
> If you are testing your css you want to do only on one page, why not create an url specific
> e.g. ${project.resources}/structurer/url/index.fv. 
> Did you see

Thanks for the hints Thorsten, I can now expand on that to make it 
clearer to those without a knowledge of the dispatcher:

In our project we are using a modified version of the pelt theme in the 

A theme is a description of a set of "panels". Each panel describes a 
set of tiles that provides the rendering of a part of the page. Each 
contract provides a part of the rendering of the final document.

So, for example, a typical HTML page will consist of panels from the 
header, the navigation section, the footer, the body etc. Panels may 
contain other panels.

Crucially, for your use case, one of the panels for an HTML page 
generates the CSS for that page.

Now, in our case, we use a modified pelt theme, the doc Thorsten links 
to describes a little of how to modify a theme.

You can find the theme definition in 

In their you will find:

<forrest:view type="html" hooksXpath="/html/body">
     <jx:import uri="cocoon://prepare.tiles.simal-commonPage-html"/>

So, now you need to know how that gets converted into an HTML page. The 
clue is in:

<jx:import uri="cocoon://prepare.tiles.simal-commonPage-html"/>

(A tile is another name for "panel", we are in the process of changing 
the name to remove confusion with the Apache Tiles project.)

So now you know that the html page is create from one big tile called 
"simal-commonPage-html". The definition of this tile can be in a number 
of different locations to allow a number of different behaviours in 
different circumstances. I won't go into where they can be found, that's 
too much info for now. I'll just tell you to look in:


(note for future readers this name will change in the future as we move 
to the name panel from tile)

In there you will find a line that says:

<jx:import uri="cocoon://prepare.tiles.simal-commonCSS-html" />

So now we need to look for


Now you find the definition of the contract that describes the CSS in 
the default page layout for your content-object (as described above by 

<?xml version="1.0" encoding="UTF-8"?>
<forrest:template xmlns:forrest=""

   <forrest:contract name="branding-css-links">
       <forrest:property name="branding-css-links-input">
         <css url="common.css" media="screen" rel="alternate stylesheet"
         <css url="leather-dev.css" media="screen" rel="alternate 
         <css url="pelt.screen.css" media="screen" theme="Pelt"/>
         <css url="pelt.print.css" media="print"/>
         <css>/* Extra css */
p.quote {
  margin-left: 2em;
  padding: .5em;
  background-color: #f0f0f0;
  font-family: monospace;


You will see that you can add extra CSS directly in this contract or you 
can ad a new css file. If you add a new CSS file I *think* they would go 


However, this would change things for every page and you said you didn't 
want to do that. If you want to change it for a group of pages, such as 
all those in a particular directory you need to create a new layout 
definition and place it in the directory affected. Now, I have a little 
inside knowledge about what you are doing so I'm guessing you want to do 
this for all files in the URL space:


Your in luck, I already made a new page layout for this url space (the 
doc Thorsten links to should tell you how). Take a look at:


This file is loaded in preference to the default one in the theme 
directory (see above) if the request URI is in this URL space. So lets 
look at the contents of that file:

  <forrest:view type="html" hooksXpath="/html/body">
     <jx:import uri="cocoon://prepare.tiles.simal-projectPage-html"/>

Note the different tile for the HTML page. it is now 
simal-projectPage-html rather than simal-commonPage-html.

Again this file could be resolved from a number of locations, but I'll 
tell you it comes from:


In that file you find:

     <jx:import uri="cocoon://prepare.tiles.simal-commonCSS-html" />

So, at present these pages are using the same CSS definition. You want 
to change it. I'm not going to tell you exactly how, I'm sure you can 
figure the rest out nice and quickly, but I will give you a pointer to 
make sure, note this line:

     <jx:import uri="cocoon://prepare.tiles.simal-projectBody-html" />

It is different from the one defined in the simal-commonPage-html.vt.xml 
file. This panel creates the body of the page but adds some DOAP plugin 
provided contracts that are not present on the common pages. You can use 
the same technique to provide different CSS for these specific pages.

I hope this helps. It would be really fantastic if, after verifying that 
my suggestions achieve what you want, you put them in a doc for the 
dispatcher plugin (its in whiteboard). Don't worry about fleshing it our 
any more, although that would be good too, just get it in a doc and 
provide us with a patch.

If you still need help though, we're here.


View raw message