This blog shows how to create a news ticker with Content By Query Web Part (CQWP), how you can make items slide from right to left with help of SharePoint Designer 2010. In this example you will modify ItemStyle.xsl and ContentQueryMain.xsl and use a portion CSS.
In Part 1 in this series I wrote about CQWP and how to create a custom template in ItemStyle.xsl and how to use CSS for the styles. In Part 2 I wrote about how to display the latest 5 news by category and how to separate them by tabs.

Click at the image below to activate the video:

This blog do not cover how to configure the CQWP or to modify ItemStyle.xsl or the other XSL files that describes the CQWP, we´re going straight to the core for the fun stuff which means ItemStyle.xsl, ContentQueryMail.xsl, CSS and jQuery.
Please read the previous posts in this series for more related information.

Some things to consider when the slider template is to be built:

  • Modify the structure of ContentQueryMain can affect all other templates in ItemStyle, when you do this you need therefore to customize a copy of ContentQueryMain. In this example were just adding a class name so you don’t need to do that now.
  • Alternative to customize the xsl files you can create modul with Visual Studio, a feature that copies your customized files to style library including a modified version of the CQWP to the web part gallery.

Let´s go!

Download the jQuery plugin called easySlider by CSS globe. Make a reference in your custom master page to this easySlider. Do also reference to latest jQuery in your custom master page.

<script type="text/javascript" src="/Style Library/Scripts/jquery-1.6.min.js"></script>
<script type="text/javascript" src="/Style Library/Scripts/easySlider1.7.js"></script>

Paste following script in the head section of your master page.

<script type="text/javascript">
		auto: true,
		continuous: true,
		nextId: "slider1next",
		prevId: "slider1prev",
		prevText: 		'',
		nextText: 		'',
		speed: 	1000, // 800
		pause:	3000, // 2000

Check out ItemStyle.xsl. Paste following templates into ItemStyle. This example contains two templates, the first one is for limit number of words for the header and the next is the actual sliding template. Publish the file when you’re done.

<!-- Word counter Template -->
<xsl:template name="FirstNWords">
  <xsl:param name="TextData"/>
  <xsl:param name="WordCount"/>
  <xsl:param name="MoreText"/>
    <xsl:when test="$WordCount &gt; 1 and (string-length(substring-before($TextData, ' ')) &gt; 0 or string-length(substring-before($TextData, '  ')) &gt; 0)">
      <xsl:value-of select="concat(substring-before($TextData, ' '), ' ')" disable-output-escaping="yes"/>
      <xsl:call-template name="FirstNWords">
        <xsl:with-param name="TextData" select="substring-after($TextData, ' ')"/>
        <xsl:with-param name="WordCount" select="$WordCount - 1"/>
        <xsl:with-param name="MoreText" select="$MoreText"/>
    <xsl:when test="(string-length(substring-before($TextData, ' ')) &gt; 0 or string-length(substring-before($TextData, '  ')) &gt; 0)">
      <xsl:value-of select="concat(substring-before($TextData, ' '), $MoreText)" disable-output-escaping="yes"/>
      <xsl:value-of select="$TextData" disable-output-escaping="yes"/>

<!-- Sliding News Template -->
<xsl:template name="SlidingNews" match="Row[@Style='SlidingNews']" mode="itemstyle">
	<xsl:variable name="SafeLinkUrl">
		<xsl:call-template name="OuterTemplate.GetSafeLink">
			<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
	<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:variable name="Created">
            <xsl:value-of select="@Created" />
	<xsl:variable name="LinkTarget">
		<xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
	<div class="SlidingNewsWrap CQWP-Content">		
		<xsl:value-of select="$Created"/>
		<a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}" >
			<xsl:call-template name="FirstNWords">
        		<xsl:with-param name="TextData" select="$DisplayTitle"/>
       			<xsl:with-param name="WordCount" select="7"/>
        		<xsl:with-param name="MoreText" select="'...'"/>

If you want the date to be formatted you can use for example this xsl:value-of select=”ddwrt:FormatDateTime(string(@Created) ,1033 ,’dd MMMM’)” instead of xsl:value-of select=”@Created”, if you use the ddwrt function you have to include xmlns:ddwrt=”; in the XSL:Stylesheet defintion in the top of the Itemstyle file.

Check out ContentQueryMain.xsl. Open the file and locate the div with the class name cbq-layout-main. Add the class slider after the cbq-layout-main class.
Don’t forget a blank space between. Publish the file when you’re done.

<div id="{concat('cbqwp', $ClientId)}" class="cbq-layout-main slider">

Here goes the CSS

/* --- QCWP Slider --- */
.CQWP-Content {
width:390px; height:22px;
padding:7px 0px 0px 10px;
font-family:Cambria, Georgia;
border-style:none none solid none;
.CQWP-Content a:link, .CQWP-Content a:visited {
.slider ul, .slider li, .slider li{ 

Stay in tune for the next post in this series, I will wrote about how to cycle images from a image library this time. Please drop a comment if you got any questions, Christian