Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 423
  • Last Modified:

c# asp.net - how to style an xsl tag

Hi,
I need to style a label so that it changes colour when hovered over.

I need to style: <xsl:with-param name="label">Name</xsl:with-param>

I have put a div tag around the whole template, but I dont know how to write in the css to get the hover over colour to change.
Is this how I do it or do I need to use someother code and not use css styling?

Any help or ideas much appreciated
Thanks
<xsl:for-each select="Sort"><div class="ProdListTitleRollover">
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Name</xsl:with-param>
              <xsl:with-param name="label">Name</xsl:with-param>
              <xsl:with-param name="isFirst">true</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
              <xsl:with-param name="colspan">2</xsl:with-param>
            </xsl:call-template></div>

Open in new window

0
CharlieDev
Asked:
CharlieDev
  • 4
  • 4
1 Solution
 
abelCommented:
What you are showing here is a piece of XSLT code, not CSS. In general, styling is done with CSS (which you haven't shown), transformation (going from one XML format to another) is done with XSLT.

Apparently you already have a working XSLT transformation, which calls a template. Now, you say that you need to style the "Name" value. If you want to do that for every xsl:with-param name="label" you can easiest do that inside the template that you are calling, the one named "ColumnHead".

But you won't be done yet... The styling information will go into a separate CSS file, or inside <style> tags inside your HTML output. My suggestion would be to use a <div> element and to use a class-attribute inside the ColumnHead template. Then, inside the CSS code, you can change the appearance. I.e.:

INSIDE XSLT
<div class="columnhead"><xsl:value-of select="$label" /></div>

INSIDE CSS
div.columnhead {
   font-weight: normal;
}

div.columnhead:hover {
   font-weight: bold;
}

The above CSS would make the columnhead $label bold when hovered.

HTH,
-- Abel --
0
 
CharlieDevAuthor Commented:
Thanks very much. I am unsure of where to put the following code:<div class="columnhead"><xsl:value-of select="$label" /></div>

I dont have <xsl:value-of select="$label" />  anywhere, do I need to put it in?

Sorry i'm really new to all this as you can see. Could you possibly show me where in my code i need to put it?
Thanks
<xsl:for-each select="Sort">
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Name</xsl:with-param>
              <xsl:with-param name="label">Name</xsl:with-param>
              <xsl:with-param name="isFirst">true</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
              <xsl:with-param name="colspan">2</xsl:with-param>
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">ISIN</xsl:with-param>
              <xsl:with-param name="label">ISIN</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>

Open in new window

0
 
abelCommented:
> I dont have <xsl:value-of select="$label" />  anywhere, do I need to put it in?

What you are showing is only a snippet. In that snippet is nothing you can do or put it. I can help you with it, but then you'll have to show the snippet with the named template itself. It should look something like:

<xsl:template name="ColumnHead">

Was this code given to you? Because it looks like a pretty stiff codebase already and if you're new to it you did a pretty good job!
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
CharlieDevAuthor Commented:
The code was given to me yes! I couldn't write it at the moment,I have no where near enough experience.
I have tried to search for xsl:template name but I cant find it in any of the files.

The code below is the main xslt page, is there anywhere on there i can put the div?

Many thanks
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
  <xsl:include href="Widget.Grid.xslt" />
 
  <xsl:output method="xml" indent="yes" omit-xml-declaration="yes" />
  <xsl:template match="ProductData">
 
    
    <div class="contentContainer">
      <div class="floatLeft">
        <h3><xsl:value-of select="Paging/@RecordsTotal"/> Funds found</h3>
        <p class="contentStyle01">You are viewing all funds</p>
      </div>
      <div class="productListTools">
        <ul>
          <li>
            <label for="jumpMenu">Number of results: </label>
            <xsl:for-each select="Paging">
              <xsl:call-template name="RecordCountOptions">
                <xsl:with-param name="sorting" select="/ProductData/Sort" />
              </xsl:call-template>
            </xsl:for-each>
          </li>
          <li>
            <a class="pdfIcon">
              <xsl:attribute name="href">
                <xsl:text>ProductListPDF.aspx?page=</xsl:text>
                <xsl:value-of select="/ProductData/Sort/@PageNumber"/>
                <xsl:text>&amp;rCount=</xsl:text>
                <xsl:value-of select="/ProductData/Sort/@PageSize"/>
                <xsl:text>&amp;sCol=</xsl:text>
                <xsl:value-of select="name(/ProductData/Sort/*[1])"/>
                <xsl:choose>
                  <xsl:when test="/ProductData/Sort='Descending'">&amp;sDir=A</xsl:when>
                  <xsl:otherwise>&amp;sDir=D</xsl:otherwise>
                </xsl:choose>
              </xsl:attribute>
              PDF</a>
          </li>
          <li>
            <a href="#" onclick="window.print();return false;" class="printIcon">Print</a>
          </li>
          <li>
            <a href="ProductListingExcel.aspx" class="excelIcon">Excel</a>
          </li>
        </ul>
      </div>
    </div>
    
    <div class="contentContainer">
    <table cellpadding="2px" cellspacing="0" class="tableStyle03">
      <thead>
        <tr>
          <xsl:for-each select="Sort">
            <div class="ColumnHeadTitle"> <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Name</xsl:with-param>
              <xsl:with-param name="label">Name</xsl:with-param>
              <xsl:with-param name="isFirst">true</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
              <xsl:with-param name="colspan">2</xsl:with-param>
            </xsl:call-template></div>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">ISIN</xsl:with-param>
              <xsl:with-param name="label">ISIN</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">LaunchDate</xsl:with-param>
              <xsl:with-param name="label">Issued</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Currency</xsl:with-param>
              <xsl:with-param name="label">Currency</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Bid</xsl:with-param>
              <xsl:with-param name="label">Bid</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Ask</xsl:with-param>
              <xsl:with-param name="label">Ask</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">DPercChange</xsl:with-param>
              <xsl:with-param name="label">% Chg</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Updated</xsl:with-param>
              <xsl:with-param name="label">Updated</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
          </xsl:for-each>
 
          <th />
 
        </tr>
      </thead>
 
 
      <xsl:for-each select="ProductData">
        <tr class="listing">
          <xsl:choose>
            <xsl:when test="position() mod 2 &lt;= 0">
              <xsl:attribute name="class">listing alternateBg</xsl:attribute>
            </xsl:when>
          </xsl:choose>
 
          <td class="firstCell">
            <a href="#" class="jstToggleDetails"><img class="jstIcon" src="../images/btn-ProductExpand.gif" alt="Expand details" /></a>
          </td>
          
          <td class="mainCell">
            <a href="#" class="jstToggleDetails">
              <xsl:choose>
                <xsl:when test="Name=''">Unknown</xsl:when>
                <xsl:otherwise>
                  <xsl:value-of select="Name"/>
                </xsl:otherwise>
              </xsl:choose>
            </a>
          </td>
          
          <td>
            <xsl:value-of select="ISIN"/>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <xsl:value-of select="LaunchDate/@Day"/>/<xsl:value-of select="LaunchDate/@Month"/>/<xsl:value-of select="LaunchDate/@Year"/>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <xsl:value-of select="Currency"/>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <xsl:value-of select="format-number( round(100*Bid) div 100 , '#0.00' )"/>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <xsl:value-of select="format-number( round(100*Ask) div 100 , '#0.00' )"/>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <xsl:call-template name="ColouredValue"><xsl:with-param name="Value" select="DPercChange" /></xsl:call-template>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <xsl:value-of select="Updated/@Day"/>/<xsl:value-of select="Updated/@Month"/>/<xsl:value-of select="Updated/@Year"/><xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text><xsl:value-of select="Updated/@Hour"/>:<xsl:value-of select="Updated/@Minute"/>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <a href="#"><xsl:attribute name="href">ProductDetail.aspx?isin=<xsl:value-of select="ISIN" /></xsl:attribute><img src="../images/btn-MoreDetail.gif" alt="Product details" /></a>
          </td>
        </tr>
        
        <tr class="detail" style="display: none">
          
          <td colspan="2">
            <img class="graph" src="../images/graph_loading.gif" alt="Graph Image">
              <xsl:attribute name="id">graph-<xsl:value-of select="ISIN"/>
            </xsl:attribute>
            </img>
          </td>
 
          <td colspan="3">
            Underlying: <xsl:value-of select="UnderlyingName"/><br />
            Underlying Type: <xsl:value-of select="UnderlyingType"/><br />
            WKN: <xsl:value-of select="WKN"/><br />
            Mnemonic: <xsl:value-of select="Mnemonic"/>
          </td>
 
          <td colspan="3">
            Fund Currency: <xsl:value-of select="Currency"/><br />
            Fund Type: <xsl:value-of select="ProductSubCategory"/><br />
            Launch Date: <xsl:value-of select="LaunchDate/@Day"/>/<xsl:value-of select="LaunchDate/@Month"/>/<xsl:value-of select="LaunchDate/@Year"/><br />
            Issuer: <xsl:value-of select="IssuingBank" />
          </td>
          
          <td colspan="2">
            1W %: <xsl:call-template name="ColouredValue"><xsl:with-param name="Value" select="WPChange" /></xsl:call-template><br />
            1M %: <xsl:call-template name="ColouredValue"><xsl:with-param name="Value" select="MPChange" /></xsl:call-template><br />
            YTD %: <xsl:call-template name="ColouredValue"><xsl:with-param name="Value" select="YTDPChange" /></xsl:call-template><br />
            Alltime %: <xsl:call-template name="ColouredValue"><xsl:with-param name="Value" select="AllPChange" /></xsl:call-template>
          </td>
          
        </tr>
      </xsl:for-each>
    </table>
      
    </div>
  </xsl:template>
</xsl:stylesheet>

Open in new window

0
 
abelCommented:
Hmm, this is getting a bit weird now. The XSLT as you posted it, is the main XSLT, it seems. It does not contain any named templates (they are supposed to be on the root level). Any XSLT that calls a template that does not exist will not even compile. However, there's an xsl:include in your XSLT. The Widget.Grid.xslt might have those named templates to complete the picture. Note that this second XSLT may include even more XSLT files.

If you want to be sure that I have everything and that I can help you correctly, you may want to ZIP the whole XSLT directory and add it as an attachment so that I can have a look at it for you.
0
 
CharlieDevAuthor Commented:
Thanks very much! I've found <xsl:template name="ColumnHead"> in the widget.grid.xslt and i've found  <xsl:value-of select="$label"/>
So i'm going to try your earlier suggestion now!
0
 
CharlieDevAuthor Commented:
Thanks very much, Its working now :)
I now need to put a javascript tag around each label!! So I may be asking for help on that soon! Good job that I like a challenge
0
 
abelCommented:
Tx & glad you got it working!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now