locked
style 'body' of custom list in xsl with css RRS feed

  • Question

  • I would like to style the information for the 'body' field in my custom list for my content query web part. I want to put it directly in the itemstyle, not include it in .css file.  I have searched for examples on how to put css directly in itemstyle, but I can't find any.
    Does anybody have a good example? 
    mhoran
    Tuesday, January 31, 2012 12:13 AM

Answers

  • Hi mhoran

     

    You can add style code into itemstyle.xsl. following is my sample code:

    <xsl:template name="CustomStyle" match="Row[@Style='CustomStyle']"mode="itemstyle">

     

      <style type="text/css">   

         #linkitem

                 {

              background-color:#000000;  

         }   

      </style>

     

      <xsl:variable name="SafeImageUrl">

        <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">

          <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>

        </xsl:call-template>

      </xsl:variable>

      <xsl:variable name="SafeLinkUrl">

        <xsl:call-template name="OuterTemplate.GetSafeLink">

          <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>

        </xsl:call-template>

      </xsl:variable>

      <xsl:variable name="DisplayTitle">

        <xsl:call-template name="OuterTemplate.GetTitle">

          <xsl:with-param name="Title" select="@Title"/>

          <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>

        </xsl:call-template>

      </xsl:variable>

      <xsl:variable name="LinkTarget">

        <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>

      </xsl:variable>

      <div id="linkitem" class="item">

     

        <xsl:if test="string-length($SafeImageUrl) != 0">

          <div class="image-area-left">

            <a href="{$SafeLinkUrl}" target="{$LinkTarget}">

              <img class="image-fixed-width"

                src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />

            </a>

          </div>

        </xsl:if>

        <div class="link-item">       

          <xsl:call-template

            name="OuterTemplate.CallPresenceStatusIconTemplate"/>

            <a href="{$SafeLinkUrl}" target="{$LinkTarget}"

              title="{@LinkToolTip}">

              <xsl:value-of select="$DisplayTitle"/>

            </a>

        </div>

      </div>

    </xsl:template>

     

    Hope it can help you.

     

    Thanks,

    Lhan Han

    • Marked as answer by mhoran Wednesday, February 1, 2012 5:54 PM
    Wednesday, February 1, 2012 9:27 AM
    Moderator

All replies

  • Hi mhoran

     

    You can add style code into itemstyle.xsl. following is my sample code:

    <xsl:template name="CustomStyle" match="Row[@Style='CustomStyle']"mode="itemstyle">

     

      <style type="text/css">   

         #linkitem

                 {

              background-color:#000000;  

         }   

      </style>

     

      <xsl:variable name="SafeImageUrl">

        <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">

          <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>

        </xsl:call-template>

      </xsl:variable>

      <xsl:variable name="SafeLinkUrl">

        <xsl:call-template name="OuterTemplate.GetSafeLink">

          <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>

        </xsl:call-template>

      </xsl:variable>

      <xsl:variable name="DisplayTitle">

        <xsl:call-template name="OuterTemplate.GetTitle">

          <xsl:with-param name="Title" select="@Title"/>

          <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>

        </xsl:call-template>

      </xsl:variable>

      <xsl:variable name="LinkTarget">

        <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>

      </xsl:variable>

      <div id="linkitem" class="item">

     

        <xsl:if test="string-length($SafeImageUrl) != 0">

          <div class="image-area-left">

            <a href="{$SafeLinkUrl}" target="{$LinkTarget}">

              <img class="image-fixed-width"

                src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />

            </a>

          </div>

        </xsl:if>

        <div class="link-item">       

          <xsl:call-template

            name="OuterTemplate.CallPresenceStatusIconTemplate"/>

            <a href="{$SafeLinkUrl}" target="{$LinkTarget}"

              title="{@LinkToolTip}">

              <xsl:value-of select="$DisplayTitle"/>

            </a>

        </div>

      </div>

    </xsl:template>

     

    Hope it can help you.

     

    Thanks,

    Lhan Han

    • Marked as answer by mhoran Wednesday, February 1, 2012 5:54 PM
    Wednesday, February 1, 2012 9:27 AM
    Moderator
  • Thank you so much!
    mhoran
    Wednesday, February 1, 2012 5:55 PM