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:
http://svn.apache.org/viewvc/forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/pelt.fv?view=markup
and
http://svn.apache.org/viewvc/forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/pelt/css/pelt-css.vt.xml?view=markup
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
http://marc.theaimsgroup.com/?l=forrest-dev&m=113473237805195&w=2
-->
<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 structurer.
e.g. ${project.resources}/structurer/url/index.fv.
Did you see
http://forrest.apache.org/pluginDocs/plugins_0_80/org.apache.forrest.plugin.internal.dispatcher/how/howto-dispatcher-structurer.html
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
dispatcher.
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
[PROJECT_HOME]/src/resources/themes/pelt/pelt.fv
In their you will find:
<forrest:view type="html" hooksXpath="/html/body">
<jx:import uri="cocoon://prepare.tiles.simal-commonPage-html"/>
</forrest:view>
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:
[PROJECT_HOME]/src/resources/pelt/html/simal-commonPage-html.vt.xml
(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
[PROJECT_HOME]/src/resources/pelt/html/simal-commonCSS-html.vt.xml
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
Thorsten):
<?xml version="1.0" encoding="UTF-8"?>
<forrest:template xmlns:forrest="http://apache.org/forrest/templates/1.0";
xmlns:jx="http://apache.org/cocoon/templates/jx/1.0";>
<forrest:contract name="branding-css-links">
<forrest:property name="branding-css-links-input">
<css url="common.css" media="screen" rel="alternate stylesheet"
theme="common"/>
<css url="leather-dev.css" media="screen" rel="alternate
stylesheet"
theme="common"/>
<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;
}</css>
</forrest:property>
</forrest:contract>
</forrest:template>
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
into:
[PROJECT_HOME]/src/resources/pelt/css
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:
http://localhost:8089/projectDetails/
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:
[PROJECT_HOME]/src/documentation/content/xdocs/projectDetails/pelt.fv
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"/>
</forrest:view>
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:
[PROJECT_HOME]/src/resources/pelt/html/simal-projectPage-html.vt.xml
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.
Ross
