I first wanted to add the icon to the title of the News section as well as the title of item with JavaScript or jQuery.  But that would be difficult to control and target what I needed based on my data range rules, which item to the icon next to, how to position it, etc. So I resulted in tweaking the XSLT style sheet that the CQWP uses to display my information since it managed the style for each item returned. I referenced 2 Custom Site Columns in order to calculate the article date vs. todays date.  (Heather Solomon has articles talking about the customizing the StyleSheets for CQWP)

I referenced a few posts that I found about doing some date manipulation, specifically the Microsoft SharePoint Designer Team Blog. One article by Andy Lewis talked about date calculations and helped me do what I wanted to do; display the  icon if the content is less than 3 days old.

The Rundown

• Download the date_templates.xsl file from the MSDN blog here.
• Upload the date_template.xsl file into your site collection, preferably in your “/Style Library/XSL Style Sheets” folder in MOSS. Or create a separate document library or folder to store this file in.
• Include the templates in your XSLT style sheet for the CQWP.  If you stored your date_template.xsl file in the location above, add the <xsl:import> line into your DVWP immediately below the

•  Call the template that we need to calculate the days differnce, passing in the appropriate parameters.  For example, I needed to call the getDayDelta template:

Note: You can use other templates from the external template file the same way. You would just need to call them appropriately. The external file is commented to denote what parameters are needed and the name of each template and a brief description of what it does.

The Actual

I designed my style to test to see if the date range between my custom field of “Article Date” and today was less than 3 days. If so, display the  icon in the section head and next to the title of the item.

I first created variables to represent the 3 parts I needed to make the calculations

I then created the style layout that I wanted to use. Basically I added the title of the item linked back to the item and added in the bulleted list style.

Now lest add in the function of displaying the  icon next to the item title and section title. All we need to do is add in some “if/else” statement wrapped around the icons <img> tag.

Note: I have some CSS in the <xsl:if> statement to display the actual icon next to the section title. What I did was added the <img> tag in my HTML on the page before hand and made the ID of the image “wellness_new_icon” with an inline style of “display:none;” by default. The <xsl:if> statement will force the image to display if it is true.

The Resources

• Heather Solomon CQWP custom Stylesheet
• Andy Lewis blog talking about date/time filtering
• Microsoft SharePoint Designer Team Blog
• External XSLT referenced style sheet

The Done

Here is the completed XSLT style that I used to include the   icon with your CQWP.