You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@forrest.apache.org by Nicola Ken Barozzi <ni...@apache.org> on 2003/12/29 12:42:27 UTC

Skin colors from skinfconf into CSS

Here is an example CSS file (taken from inst.css of tigris-style skin) 
that is generated from skinconf.

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output method = "text"  omit-xml-declaration="yes"  />

   <xsl:template match="skinconfig">
   <!-- insert CSS here -->

/* $Id: inst.css,v 1.1 2003/12/22 09:54:41 nicolaken Exp $ */

#cn {
	background-image: url(../<xsl:value-of select="group-logo"/>);
	display: block;
	height: 17px;
	width: 138px;
}

#poweredby {
	background-image: url(../<xsl:value-of select="host-logo"/>);
	display: block;
	height: 38px;
	width: 102px;
}

#sc {
	background-image: url(../<xsl:value-of select="project-logo"/>);
	display: block;
	height: 25px;
	width: 138px;
}

   <!-- end CSS here -->
   </xsl:template>

   <xsl:template match="*"></xsl:template>
   <xsl:template match="text()"></xsl:template>

</xsl:stylesheet>


To see it working, just transform skinconf.xml with it, and on the test 
site you will get:

/* $Id: inst.css,v 1.1 2003/12/22 09:54:41 nicolaken Exp $ */

#cn {
	background-image: url(../images/group.png);
	display: block;
	height: 17px;
	width: 138px;
}

#poweredby {
	background-image: url(../);
	display: block;
	height: 38px;
	width: 102px;
}

#sc {
	background-image: url(../images/project.png);
	display: block;
	height: 25px;
	width: 138px;
}

With XSLT this is IMHO as easy as it gets. I could do a thing though. I 
can make an xml version of it and xslt it into becoming like the above xslt:

<conf-template>

/* $Id: inst.css,v 1.1 2003/12/22 09:54:41 nicolaken Exp $

#cn {
	background-image: url(../<value>group-logo</value>);
	display: block;
	height: 17px;
	width: 138px;
}

#poweredby {
	background-image: url(../<value>host-logo</value>);
	display: block;
	height: 38px;
	width: 102px;
}

#sc {
	background-image: url(../<value>project-logo</value>);
	display: block;
	height: 25px;
	width: 138px;
}

</conf-template>

What do you think, should I use the plain XSLT (which seems simple 
enough for me) or go with the simplified version?

-- 
Nicola Ken Barozzi                   nicolaken@apache.org
             - verba volant, scripta manent -
    (discussions get forgotten, just code remains)
---------------------------------------------------------------------


Re: Skin colors from skinfconf into CSS

Posted by Johan Kok <jk...@messianic.dyndns.org>.

Nicola Ken Barozzi wrote:

>
> <OT>
> With Ant buildfiles I have learned to program with templates, by 
> transforming configuration data with multiple xslts to create buildfiles.
> It's very powerful once you get it, but not so easy on others that 
> have to maintain it ;-)
> </OT> 

Could still be useful if original config files are kept... or even if 
one makes a menudriven front-end configuration tool.

BTW in a previous message I must have been fast asleep, not mentioning 
site/tab xml's in my sitemap reference. - Wel noticed...

JK


Re: Skin colors from skinfconf into CSS

Posted by Nicola Ken Barozzi <ni...@apache.org>.
Marshall Roch wrote:

> Nicola Ken Barozzi wrote:
> 
>> #cn {
>>     background-image: url(../<xsl:value-of select="group-logo"/>);
>>     display: block;
>>     height: 17px;
>>     width: 138px;
>> }
> 
> <snipped>
> 
> Can you do something like this (note the quotes)?
> 
> background-image: url("../<xsl:value-of select="group-logo"/>");
> 
> or
> 
> background-image: url('../<xsl:value-of select="group-logo"/>');

Geez, it's taken directly from http://style.tigris.org/ V1.1 ...

> There are browser bugs that will keep IE/Mac and possibly a few others 
> from parsing url()s correctly with different kinds of quotes or lack 
> thereof.

Thanks, I'll do it.

>> With XSLT this is IMHO as easy as it gets. I could do a thing though. 
>> I can make an xml version of it and xslt it into becoming like the 
>> above xslt:
> 
> <snipped XML example>
> 
>> What do you think, should I use the plain XSLT (which seems simple 
>> enough for me) or go with the simplified version?
> 
> I prefer the XSLT version.  In fact, the XML version seems more 
> confusing, because you have tags and character data to keep track of 
> inside CSS, instead of just a tag.

Ok, I thought of it and let's start simple, with plain XSLT. In case, we 
can add the simplified version later.

> Cool idea, though! :)

Thanks :-)

<OT>
With Ant buildfiles I have learned to program with templates, by 
transforming configuration data with multiple xslts to create buildfiles.
It's very powerful once you get it, but not so easy on others that have 
to maintain it ;-)
</OT>

-- 
Nicola Ken Barozzi                   nicolaken@apache.org
             - verba volant, scripta manent -
    (discussions get forgotten, just code remains)
---------------------------------------------------------------------


Re: Skin colors from skinfconf into CSS

Posted by Marshall Roch <ma...@exclupen.com>.
Nicola Ken Barozzi wrote:
> #cn {
>     background-image: url(../<xsl:value-of select="group-logo"/>);
>     display: block;
>     height: 17px;
>     width: 138px;
> }
<snipped>

Can you do something like this (note the quotes)?

background-image: url("../<xsl:value-of select="group-logo"/>");

or

background-image: url('../<xsl:value-of select="group-logo"/>');

There are browser bugs that will keep IE/Mac and possibly a few others 
from parsing url()s correctly with different kinds of quotes or lack 
thereof.

> With XSLT this is IMHO as easy as it gets. I could do a thing though. I 
> can make an xml version of it and xslt it into becoming like the above 
> xslt:

<snipped XML example>

> What do you think, should I use the plain XSLT (which seems simple 
> enough for me) or go with the simplified version?

I prefer the XSLT version.  In fact, the XML version seems more 
confusing, because you have tags and character data to keep track of 
inside CSS, instead of just a tag.

Cool idea, though! :)

--
Marshall Roch

Re: Skin colors from skinfconf into CSS

Posted by Nicola Ken Barozzi <ni...@apache.org>.
Nicola Ken Barozzi wrote:
...
> What do you think, should I use the plain XSLT (which seems simple 
> enough for me) or go with the simplified version?

I can also do simple value checking, and it's easy in both the xslt and 
simple versions:

#poweredby {
     <if test="host-logo">
       background-image: url(../<value>host-logo</value>);
     </if>
     display: block;
     height: 38px;
     width: 102px;
}

#poweredby {
     <xsl:if test="host-logo">
       background-image: url(../<xsl:value-of select="host-logo"/>);
     </xsl:if>
     display: block;
     height: 38px;
     width: 102px;
}

-- 
Nicola Ken Barozzi                   nicolaken@apache.org
             - verba volant, scripta manent -
    (discussions get forgotten, just code remains)
---------------------------------------------------------------------


Re: Skin colors from skinfconf into CSS

Posted by Johan Kok <jk...@messianic.dyndns.org>.
> What do you think, should I use the plain XSLT (which seems simple 
> enough for me) or go with the simplified version? 

+1 for plain XSLT


Re: Skin colors from skinfconf into CSS

Posted by Nicola Ken Barozzi <ni...@apache.org>.
Ross Gardler wrote:

> Nicola Ken Barozzi wrote:
> 
>> #cn {
>>     background-image: url(../<xsl:value-of select="group-logo"/>);
>>     display: block;
>>     height: 17px;
>>     width: 138px;
>> }
> 
> 
> Well I still think this will prove a barrier to entry for skin 
> designers. I appreciate it's not much a learning curve, but it is one.
> 
> However, since I have no alternative suggestion other than a template 
> language (which is just as much a learning curve), and the benefits are 
> high I'll have to keep quiet(ish) ;-)

Note that this does not prevent you from simply overriding the CSS, as I 
*will* add a user CSS to all stylesheets.

-- 
Nicola Ken Barozzi                   nicolaken@apache.org
             - verba volant, scripta manent -
    (discussions get forgotten, just code remains)
---------------------------------------------------------------------


Re: Skin colors from skinfconf into CSS

Posted by Ross Gardler <rg...@wkwyw.net>.
Nicola Ken Barozzi wrote:
> #cn {
>     background-image: url(../<xsl:value-of select="group-logo"/>);
>     display: block;
>     height: 17px;
>     width: 138px;
> }

Well I still think this will prove a barrier to entry for skin 
designers. I appreciate it's not much a learning curve, but it is one.

However, since I have no alternative suggestion other than a template 
language (which is just as much a learning curve), and the benefits are 
high I'll have to keep quiet(ish) ;-)

Ross