On a sharepoint installation I am working on the main homepage is built from a number of content queries which are all configured to use a blog site in the same site collection. The functionality out of the box is great in terms of filtering which posts appear but a little less so in terms of what the links look like. To my dismay it appears that the content query web parts completely ignore any CSS overrides and do thier own thing. In order to style them I found myself editing the itemstyle.xml file which can be found at the root of the site under “Style Library>XSL Style Sheets>ItemStyle.XML”
It is possible to simply edit one of the existing xsl templates within the file however I prefered to copy and paste an existing style template, change its name and then adjust it until I achived the style I wanted. The benefit of doing it this way is that the existing styles are all preserved. To use the new style simply select it in the content query web part. I have attached the additional text I added to the file which creates a new style called “BlogPostBlack”
Make sure to publish a new major version when you are done and if version control is not enabled take a backup of the file before you change it.
<xsl:template name=”BlogPostBlack” match=”Row[@Style=’BlogPostBlack’]” mode=”itemstyle”>
<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>
<div class=”custom_posttitle”>
<xsl:call-template name=”OuterTemplate.CallPresenceStatusIconTemplate”/>
<font size=”3?><a style=”font-weight:bold;color:#3B2A31? href=”{$SafeLinkUrl}” title=”{@LinkToolTip}” onClick=”document.getElementById(‘divIDName’).style.color=’#907673?”>
<xsl:if test=”$ItemsHaveStreams = ‘True’”>
<xsl:attribute name=”onclick”>
<xsl:value-of select=”@OnClickForWebRendering”/>
</xsl:attribute>
</xsl:if>
<xsl:if test=”$ItemsHaveStreams != ‘True’ and @OpenInNewWindow = ‘True’”>
<xsl:attribute name=”onclick”>
<xsl:value-of disable-output-escaping=”yes” select=”$OnClickTargetAttribute”/>
</xsl:attribute>
</xsl:if>
<xsl:value-of select=”$DisplayTitle”/>
</a>
</font>
</div>
<xsl:variable name=”StartDate”>
<xsl:value-of select=”ddwrt:FormatDateTime(string(@PublishedDate), 1033, ‘g’)” />
</xsl:variable>
<div class=”custom_date”>
<xsl:value-of select=”$StartDate” />
</div>
<div class=”custom_description”>
<xsl:value-of select=”@Body” disable-output-escaping=”yes” />
</div>
</xsl:template>