Menu

← Back to all posts

Tech

How to change element's ID with Diazo?

A common scenario: on your website all subpages share a common header, but you want a different header on the front page. Let's say you differentiate...

Peter LamutPeter Lamut
<!-- change header's ID attribute -->
<prepend css:theme="#header-index">
    <xsl:attribute name="id">header-subpage</xsl:attribute>
</prepend>

ID of the header as defined in theme file (header-index) is changed to header-subpage after the rule above is applied. The rule basically says “Match #header-index element in theme file and use some inline XSL on it”. The “xsl:attribute” tag matches current element’s attribute whose name is “id” (with “current element” being the #header-index element as matched by the outer tag). The content of the “xsl:attribute” tag is a new value for the ID attribute. Nothing spectacular here indeed, but I lost quite some time trying to figure out how to do it in a simple yet efffective way. Very frustrating for such a small task. Various suggestions found on Google simply didn’t work or were a bit too complicated (there must be an easier way to do it, right?). So to help you avoid all the trouble, I decided to wrote this blog post. Too bad it didn’t exist before. ;)

Peter Lamut

Peter Lamut

Peter was one of the original co-founders of Niteo and the main developer on our early projects.