XSL / XSLT - Adding a value-of as a style attribute for a DIV

Question

I'm using SharePoint 2010 and the Content Query Web Part to output a list of dates from a SharePoint list. The display of this list is controlled by an XSL stylesheet called ItemStyle.xsl

I have made progress with the general appearance but would now like to add one of the fields it retrieves as a background/style attribute.

I believe the problem I am having relates to the xsl value-of select having a closing bracket at the end of the tag and therefore inadvertently closing my DIV. Can someone look at the code below and suggest alternative way of printing the CategoryColour within the opening DIV.

I also will occasional have "xmlns:ddwrt" inserted into the html where I would expect to at least see "style:background...."

Many Thanks

<xsl:stylesheet                                                                                                                                                                                         
  version="1.0"                                                                                                                                                                                         
  exclude-result-prefixes="x d xsl msxsl cmswrt"                                                                                                                                                        
  xmlns:x="http://www.w3.org/2001/XMLSchema"                                                                                                                                                            
  xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"                                                                                                                                                 
  xmlns:cmswrt="http://schemas.microsoft.com/WebParts/v3/Publishing/runtime"                                                                                                                            
  xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"                                                                                                                               
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"                                                                                                                                                      
  xmlns:msxsl="urn:schemas-microsoft-com:xslt">                                                                                                                                                         

<!-- PrettyCal Template -->                                                                                                                                                                             
<xsl:template name="PrettyCal" match="Row[@Style='PrettyCal']" mode="itemstyle">                                                                                                                        
    <xsl:variable name="Start"><xsl:value-of select="@EventDate" /></xsl:variable>                                                                                                                      
    <xsl:variable name="End"><xsl:value-of select="@EndDate" /></xsl:variable>                                                                                                                          
    <xsl:variable name="AllDay"><xsl:value-of select="@AllDayEvent" /></xsl:variable>                                                                                                                   
    <xsl:variable name="Location"><xsl:value-of select="@EventLocation" /></xsl:variable>                                                                                                               
    <xsl:variable name="CategoryColour"><xsl:value-of select="@EventCategoryColour" /></xsl:variable>                                                                                                   

    <div class="upcoming-events" style="background: {CategoryColour}" ><xsl:value-of select="$CategoryColour"/>                                                                                         

        <h2 class="event-title">                                                                                                                                                                        
        <a>                                                                                                                                                                                             
        <xsl:attribute name="onClick">                                                                                                                                                                  
            javascript:SP.UI.ModalDialog.showModalDialog({ url: '/services/marketing/Lists/College%20Calendar/DispForm.aspx?ID=<xsl:value-of select="@ID" />', title: 'Event Details' }); return false; 
        </xsl:attribute>                                                                                                                                                                                
        <xsl:value-of select="@Title" /></a></h2>                                                                                                                                                       

    </div>                                                                                                                                                                                              
</xsl:template>                                                                                                                                                                                         
</xsl:stylesheet>                                                                                                                                                                                       

Answer 1

You have:

  <div class="upcoming-events" style="background: {CategoryColour}" ><xsl:value-of select="$CategoryColour"/>                                                                           

You actually wanted:

  <div class="upcoming-events" style="background: {$CategoryColour}" ><xsl:value-of select="$CategoryColour"/>                                                                           

Answer 2

Your missing a $ in front of the variable CategoryColour.