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/the
mes/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/plu
gins_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="h
ttp://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://localhos
t: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/projectDetail
s/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-htm
l.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
|
