How to transform block of content from plone being inserted into diazo theme

Question

I'm using a diazo (currently plone.app.theming 1.0b1-r48205) with Plone 4.1. I want to use exactly Plone's html for the search widget except that I'd like to replace <input> element used for the search button in the search widget with a <button>. The diazo docs seem to suggest you can do this.

In my theme html file I have an empty <div id="portal-searchbox"></div>. In my rules.xml I have the following:

<rules if-content="$enabled">
    <replace css:theme="div#portal-searchbox">
        <xsl:apply-templates css:select="div#portal-searchbox" />
    </replace>    
    <xsl:template css:match="div#portal-searchbox input.searchButton">
        <button type="submit"><img src="images/search.png" alt="Search" /></button>
    </xsl:template>
</rules>

I've tried numerous variations of this but with no success. Any help would be much appreciated.

Answer 1

Ok, so the following works. The reason it wasn't working before was that the <xsl:template> was not in the root level rules tag (there's a documentation bug there). The <xsl:template> must be in the root level rules tag because there is no way to apply rule conditions to an <xsl:template> currently.

<xsl:template css:match="div#portal-searchbox input.searchButton">
     <button type="submit"><img src="images/search.png" alt="Search" /></button>
</xsl:template>

<replace css:theme="div#portal-searchbox" css:content="div#portal-searchbox"/>

Update: I've added support for <replace content="..."> to Diazo, so inline <xsl:template>'s are considered deprecated. Instead use:

<replace css:content="div#portal-searchbox input.searchButton">
    <button type="submit"><img src="images/search.png" alt="Search" /></button>
</replace>
<replace css:theme="div#portal-searchbox" css:content="div#portal-searchbox"/>

Documentation at http://diazo.org/advanced.html#modifying-the-content-on-the-fly