org.apache.forrest.plugin.output.themer corner images
I have made some progress with this. My understanding is that:
1) default corner images are in pelt.screen.css
2) these could be overridden inline by branding-theme-profiler.ft
====
1)
I will raise an enhancement jira with a new pelt.screen.css that
references corner images with hex values so the old skinconf is
not used ie:
#header .round-top-left-small {
background-image: url(../skin/images/rc-t-l-5-X294563-X4a6d8c-
X4a6d8c.png);
background-repeat: no-repeat;
background-position: top left;
}
plus
rcX.svg.xslt and corner-importsX.svg.xslt
that deal with hex values rather than skinconf names
to go in main/webapp/skins/common/images as a fallback
Note:
an update to resouces.xmap to match this request is needed:
<map:match pattern="skin/images**/*c-*-*-*-X*-X*-X*.png">
<map:call resource="read-svg2png-corner-resource">
<map:parameter name="path" value="images/{1}" />
<map:parameter name="name" value="{2}cX" />
<map:parameter name="orientation-tb" value="{3}"/>
<map:parameter name="orientation-lr" value="{4}"/>
<map:parameter name="size" value="{5}"/>
<map:parameter name="bg-color-name" value="{6}"/>
<map:parameter name="stroke-color-name" value="{7}"/>
<map:parameter name="fg-color-name" value="{8}"/>
</map:call>
not sure if this goes in the core it would be a fallback from plugin
resources.xmap if the request wasn't matched?
Also sitemap.xmap used lm for *.css matches not sure how it should be
used here. So I let it go to resources.xmap for above testing.
2)
My old work in this area fitted well with the branding-theme-profiler.ft
I have attached my version for comment. The only minor change to pelt.fv
was adding
<colors>
<!-- as before -->
</colors>
root so I could work there and let the <color> matches work as before.
====
Problem:
Item (2) xslt will work out of the box with the change to pelt.fv
but again I've tripped up as these inline corner images aren't
crawled and generated :(
Looking at the generated source the hex URLs are correctly created
and inline. This is a worrying me as 'forrest site' user.
(Well I haven't actually done any authoring yet, learning how it works
is more fun :)
If (1) works fine when pelt.screen.css is crawled. Why does (2) fail.
This is the same problem as my last attempt in views v1.
Am I missing something?
Kevin
<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright 2002-2005 The Apache Software Foundation or its licensors,
as applicable.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<forrest:contract
xmlns:i18n="http://apache.org/cocoon/i18n/2.1";
xmlns:forrest="http://apache.org/forrest/templates/1.0";
name="branding-theme-profiler" type="nugget">
<description>
<p>
<strong>branding-theme-profiler</strong> provides a quick
way to change the colors of the theme.
</p>
<pre class="code"><![CDATA[ <!--Color group: Forrest: example colors similar to forrest.apache.org-->
<color name="breadtrail" value="#cedfef" font="#0F3660" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
<color name="header" value="#294563"/>
<color name="tab-selected" value="#4a6d8c" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
<color name="tab-unselected" value="#b5c7e7" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
<color name="subtab-selected" value="#4a6d8c" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
<color name="subtab-unselected" value="#4a6d8c" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
<color name="heading" value="#294563"/>
<color name="subheading" value="#4a6d8c"/>
<color name="published" value="#4C6C8F" font="#FFFFFF"/>
<color name="feedback" value="#4C6C8F" font="#FFFFFF" align="center"/>
<color name="navstrip" value="#4a6d8c" font="#ffffff" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
<color name="menu" value="#4a6d8c" font="#cedfef" link="#ffffff" vlink="#ffffff" hlink="#ffcf00"/>
<color name="toolbox" value="#4a6d8c"/>
<color name="border" value="#294563"/>
<color name="dialog" value="#4a6d8c"/>
<color name="searchbox" value="#4a6d8c" font="#000000"/>
<color name="body" value="#ffffff" link="#0F3660" vlink="#009999" hlink="#000066"/>
<color name="table" value="#7099C5"/>
<color name="table-cell" value="#f0f0ff"/>
<color name="highlight" value="#ffff00"/>
<color name="fixme" value="#cc6600"/>
<color name="note" value="#006699"/>
<color name="warning" value="#990000"/>
<color name="code" value="#CFDCED"/>
<color name="footer" value="#cedfef"/>]]>
</pre>
<p>
These values are used for the generated CSS files.
They essentially "override" the default colors defined in the chosen theme.
To customize the colors of any theme,
use one or all color elements and change the values
of the particular color elements that you wish to change.
Note that by default, if you do not overide them means that
the default colors provided by the theme are being used.
</p>
<div class="warning">
<div class="label">fixme</div>
<div class="content">We need to use naming convention for the naming. To overcome following comment:<br/>
Some of the element names are obscure, so comments are added to show how
the "pelt" theme uses them, other themes might use these elements in a different way or do not support them at all.<br/>
Tip: temporarily change the value of an element to red (#ff0000) and see the effect.
</div>
</div>
<div class="note">
<div class="label">Comments</div>
<div class="content">
<p>
pelt: breadtrail: the strip at the top of the page and the second strip under the tabs<br/>
pelt: header: top strip containing project and group logos<br/>
pelt: heading|subheading: section headings within the content<br/>
pelt: navstrip: the strip under the tabs which contains the published date<br/>
pelt: menu: the left-hand navigation panel<br/>
pelt: toolbox: the selected menu item<br/>
pelt: searchbox: the background of the searchbox<br/>
pelt: border: line border around selected menu item<br/>
pelt: body: any remaining parts, e.g. the bottom of the page<br/>
pelt: footer: the second from bottom strip containing credit logos and published date<br/>
pelt: feedback: the optional bottom strip containing feedback link<br/>
</p>
</div>
</div>
</description>
<usage><![CDATA[<forrest:contract name="branding-theme-profiler">
<forrest:properties contract="branding-theme-profiler">
<forrest:property name="branding-theme-profiler-theme">pelt</forrest:property>
<forrest:property name="branding-theme-profiler">
<color name="header" value="#ff0000"/>
<!-- more colors -->
</forrest:property>
</forrest:properties>
</forrest:contract>]]></usage>
<forrest:template xmlns:forrest="http://apache.org/forrest/templates/1.0";
format="html" name="branding-theme-profiler" inputFormat="xsl" body="false" head="true">
<xsl:stylesheet version="1.1"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform";>
<xsl:template name="branding-theme-profiler-head">
<xsl:param name="branding-theme-profiler"/>
<xsl:param name="branding-theme-profiler-theme"/>
<style type="text/css" media="screen" title="{$branding-theme-profiler-theme}" rel="alternate stylesheet" >
<xsl:apply-templates select="$branding-theme-profiler/colors"/>
</style>
</xsl:template>
<xsl:template match="colors">
<!-- ==================== corner image colors ========================= -->
<xsl:variable name="header" select="substring-after([EMAIL PROTECTED]'header']/@value, '#')"/>
<xsl:variable name="searchbox" select="substring-after([EMAIL PROTECTED]'searchbox']/@value, '#')"/>
<xsl:variable name="tab-selected" select="substring-after([EMAIL PROTECTED]'tab-selected']/@value, '#')"/>
<xsl:variable name="tab-unselected" select="substring-after([EMAIL PROTECTED]'tab-unselected']/@value, '#')"/>
<xsl:variable name="body" select="substring-after([EMAIL PROTECTED]'body']/@value, '#')"/>
<xsl:variable name="menu" select="substring-after([EMAIL PROTECTED]'menu']/@value, '#')"/>
#header .round-top-left-small {
background-image: url(skin/images/rc-t-l-5-X<xsl:value-of select="$header"/>-X<xsl:value-of select="$searchbox"/>-X<xsl:value-of select="$searchbox"/>.png);
background-repeat: no-repeat;
background-position: top left;
}
#header .round-top-right-small {
background-image: url(skin/images/rc-t-r-5-X<xsl:value-of select="$header"/>-X<xsl:value-of select="$searchbox"/>-X<xsl:value-of select="$searchbox"/>.png);
background-repeat: no-repeat;
background-position: top right;
}
#nav-main li {
background-image: url(skin/images/rc-t-r-5-X<xsl:value-of select="$header"/>-X<xsl:value-of select="$tab-unselected"/>-X<xsl:value-of select="$tab-unselected"/>.png);
background-repeat: no-repeat;
background-position: top right;
}
#nav-main li a {
background-image: url(skin/images/rc-t-l-5-X<xsl:value-of select="$header"/>-X<xsl:value-of select="$tab-unselected"/>-X<xsl:value-of select="$tab-unselected"/>.png);
background-repeat: no-repeat;
background-position: top left;
}
#nav-main .current {
background-image: url(skin/images/rc-t-r-5-X<xsl:value-of select="$header"/>-X<xsl:value-of select="$tab-selected"/>-X<xsl:value-of select="$tab-selected"/>.png);
background-repeat: no-repeat;
background-position: top right;
}
#nav-main .current a {
background-image: url(skin/images/rc-t-l-5-X<xsl:value-of select="$header"/>-X<xsl:value-of select="$tab-selected"/>-X<xsl:value-of select="$tab-selected"/>.png);
background-repeat: no-repeat;
background-position: top left;
}
#roundbottom {
background-image: url(skin/images/rc-b-r-15-X<xsl:value-of select="$body"/>-X<xsl:value-of select="$menu"/>-X<xsl:value-of select="$menu"/>.png);
background-repeat: no-repeat;
background-position: bottom right;
}
<xsl:apply-templates select="color"/>
</xsl:template>
<!-- ==================== main block colors ============================ -->
<xsl:template match="[EMAIL PROTECTED]'header']">
#container { background-color: <xsl:value-of select="@value"/>;}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'tab-selected']">
#nav-main .current { background-color: <xsl:value-of select="@value"/>;}
#nav-main .current a:link { color: <xsl:value-of select="@link"/>; }
#nav-main .current a:visited { color: <xsl:value-of select="@vlink"/>; }
#nav-main .current a:hover { color: <xsl:value-of select="@hlink"/>; }
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'tab-unselected']">
#nav-main li { background-color: <xsl:value-of select="@value"/> ;}
#nav-main li a:link { color: <xsl:value-of select="@link"/>; }
#nav-main li a:visited { color: <xsl:value-of select="@vlink"/>; }
#nav-main li a:hover { color: <xsl:value-of select="@hlink"/>; }
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'subtab-selected']">
#level2tabs { background-color: <xsl:value-of select="@value"/> ;}
#level2tabs a:link { color: <xsl:value-of select="@link"/>; }
#level2tabs a:visited { color: <xsl:value-of select="@vlink"/>; }
#level2tabs a:hover { color: <xsl:value-of select="@hlink"/>; }
</xsl:template>
<!--xsl:template match="[EMAIL PROTECTED]'subtab-unselected']">
.level2tabstrip { background-color: <xsl:value-of select="@value"/>;}
.datenote { background-color: <xsl:value-of select="@value"/>;}
.level2tabstrip.unselected a:link { color: <xsl:value-of select="@link"/>; }
.level2tabstrip.unselected a:visited { color: <xsl:value-of select="@vlink"/>; }
.level2tabstrip.unselected a:hover { color: <xsl:value-of select="@hlink"/>; }
</xsl:template-->
<xsl:template match="[EMAIL PROTECTED]'heading']">
.heading { background-color: <xsl:value-of select="@value"/>;}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'subheading']">
.boxed { background-color: <xsl:value-of select="@value"/>;}
.underlined_5 {border-bottom: solid 5px <xsl:value-of select="@value"/>;}
.underlined_10 {border-bottom: solid 10px <xsl:value-of select="@value"/>;}
table caption {
background-color: <xsl:value-of select="@value"/>;
color: <xsl:value-of select="@font"/>;
}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'feedback']">
#feedback {
color: <xsl:value-of select="@font"/>;
background: <xsl:value-of select="@value"/>;
text-align: <xsl:value-of select="@align"/>;
}
#feedback #feedbackto {
color: <xsl:value-of select="@font"/>;
}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'breadtrail']">
.breadtrail {
background: <xsl:value-of select="@value"/>;
color: <xsl:value-of select="@font"/>;
}
.breadtrail a:link { color: <xsl:value-of select="@link"/>; }
.breadtrail a:visited { color: <xsl:value-of select="@vlink"/>; }
.breadtrail a:hover { color: <xsl:value-of select="@hlink"/>; }
</xsl:template>
<!--Fix for other (old) profiles-->
<xsl:template match="[EMAIL PROTECTED]'navstrip']">
#publishedStrip {
color: <xsl:value-of select="@font"/>;
background: <xsl:value-of select="@value"/>;
}
</xsl:template>
<!--has to go after the nav-strip (no 'navstrip')-->
<xsl:template match="[EMAIL PROTECTED]'published']">
#publishedStrip {
color: <xsl:value-of select="@font"/>;
background: <xsl:value-of select="@value"/>;
}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'toolbox']">
#nav-section .menupagetitle { background-color: <xsl:value-of select="@value"/>}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'border']">
#leftbar { border-color: <xsl:value-of select="@value"/>;}
#nav-section .menupagetitle { border-color: <xsl:value-of select="@value"/>;}
#nav-section .menupageitemgroup { border-color: <xsl:value-of select="@value"/>;}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'menu']">
#leftbar { background-color: <xsl:value-of select="@value"/>;}
#leftbar { color: <xsl:value-of select="@font"/>;}
#leftbar a:link { color: <xsl:value-of select="@link"/>;}
#leftbar a:visited { color: <xsl:value-of select="@vlink"/>;}
#leftbar a:hover {
background-color: <xsl:value-of select="@value"/>;
color: <xsl:value-of select="@hlink"/>;}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'dialog']">
#nav-section .menupagetitle { color: <xsl:value-of select="@font"/>;}
#nav-section .menupageitemgroup {
background-color: <xsl:value-of select="@value"/>;
}
#nav-section .menupageitem {
color: <xsl:value-of select="@font"/>;
}
#nav-section .menupageitem a:link { color: <xsl:value-of select="@link"/>;}
#nav-section .menupageitem a:visited { color: <xsl:value-of select="@vlink"/>;}
#nav-section .menupageitem a:hover {
background-color: <xsl:value-of select="@value"/>;
color: <xsl:value-of select="@hlink"/>;
}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'menuheading']">
#leftbar h1 {
color: <xsl:value-of select="@font"/>;
background-color: <xsl:value-of select="@value"/>;
}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'searchbox']">
#header .searchbox {
background-color: <xsl:value-of select="@value"/> ;
color: <xsl:value-of select="@font"/>;
}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'body']">
body{
background-color: <xsl:value-of select="@value"/>;
color: <xsl:value-of select="@font"/>;
}
a:link { color:<xsl:value-of select="@link"/>}
a:visited { color:<xsl:value-of select="@vlink"/>}
a:hover { color:<xsl:value-of select="@hlink"/>}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'footer']">
#footer { background-color: <xsl:value-of select="@value"/>;}
</xsl:template>
<!-- ==================== other colors ============================ -->
<xsl:template match="[EMAIL PROTECTED]'highlight']">
.highlight { background-color: <xsl:value-of select="@value"/>;}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'fixme']">
.fixme { border-color: <xsl:value-of select="@value"/>;}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'note']">
.note { border-color: <xsl:value-of select="@value"/>;}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'warning']">
.warning { border-color: <xsl:value-of select="@value"/>;}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'code']">
.code { border-color: <xsl:value-of select="@value"/>;}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'table']">
.ForrestTable { background-color: <xsl:value-of select="@value"/>;}
</xsl:template>
<xsl:template match="[EMAIL PROTECTED]'table-cell']">
.ForrestTable td { background-color: <xsl:value-of select="@value"/>;}
</xsl:template>
</xsl:stylesheet>
</forrest:template>
</forrest:contract>
