Home‎ > ‎

Custom Banner XSLT

Your Healthx representative can help you produce a custom banner using an XSL transform for your site. The available elements are as follows:

  • Page Banner
    •     MessageText : "You are logged in as" plus FullName.
    •     ImagePath : Path to the header image.
    •     ImageUrl : Location the image links to.
    •     CssName : Name of this element.
    •     TextSize : Boolean to indicate that an administrator would like users to be able to modify the text size. See below.
    •     FullName : User first name and last name.
    •     Items/Link:
      • Url: Path to the service listed in the items.
      • Display Text: Display name of the service.
      • UrlTarget: New window or _self.
      • Status: Normal or Hidden.
    •     User/FirstName
    •     User/LastName


You can use these elements to build a custom banner, and include your own HTML as well, such as in the below example:

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl='http://www.w3.org/1999/XSL/Transform' version='1.0'>
    <xsl:output method='html'/>
    <xsl:template match='PageBanner'>
        <div style='padding: 5px; border: dashed 1px red;color:white;'>
            <xsl:value-of select='MessageText'/>
            <ul>
                <xsl:apply-templates select='/PageBanner/Items/Link' />
<p>Full name: <xsl:value-of select='FullName' /></p>
<p>Image Path: <xsl:value-of select='ImagePath' /></p>
<p>Image Url: <xsl:value-of select='ImageUrl' /></p>
<p>Text Size: <xsl:value-of select='TextSize' /></p>
<p>CSS Class: <xsl:value-of select='CssName' /></p>
            </ul>
        </div>
    </xsl:template>
    <xsl:template match='/PageBanner/Items/Link'>
        <li>
            <xsl:value-of select='DisplayText'/>
        </li>
    </xsl:template>
</xsl:stylesheet>


Text Sizer


If Text Size is true, you should provide a control for users to modify the text size on the page. Use the TextSize() JavaScript method to apply this.

TextSize(emsize)


emsize: A numeral representing the "em" units to increase the text size to. Normal is 1. For example TextSize(1.2) sets the text size to 1.2 em by default. The Healthx control is three buttons at 1, 1.2, and 1.4, respectively.

Want to create a Custom Banner that looks exactly like the default Healthx banner? Here is some sample XSL to get started.

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl='http://www.w3.org/1999/XSL/Transform' version='1.0'>
    <xsl:output method='html'/>
    <xsl:template match='PageBanner'>
        <div class="pagebanner_container">
<a class="pagebanner_logolink">
<xsl:attribute name="href">
<xsl:value-of select="ImageUrl" />
</xsl:attribute>
<img class="pagebanner_logo">
<xsl:attribute name="src">
<xsl:value-of select="ImagePath" />
</xsl:attribute>
</img>
</a>
<span class="pagebanner_message">
<xsl:value-of select='MessageText'/>
<span class="pagebanner_username"><xsl:value-of select='User/FirstName'/> <xsl:value-of select='User/LastName'/>
</span>
</span>
<ul class="pagebanner_itemlist">
<xsl:apply-templates select='/PageBanner/Items/Link' />
</ul>
</div>
    </xsl:template>
    <xsl:template match='/PageBanner/Items/Link'>
<li>
<xsl:choose>
<xsl:when test="position() &gt;= 2">
| <a href='{Url}'><xsl:value-of select='DisplayText'/></a>
</xsl:when>
<xsl:otherwise>
<a href='{Url}'><xsl:value-of select='DisplayText'/></a>
</xsl:otherwise>
</xsl:choose>
</li>
    </xsl:template>
</xsl:stylesheet>

Comments