The CQWP is a fantasic webpart my only two annoyances are that you can only do 3 rules on the filtering and the second is that the results are a bit rubbish in terms of styling, look and feel.
There are two ways you can customise these results. First way is to put a DIV wrapper around the results and style them that way which is ok when you want to do text styling such as color change, style and padding which you can see in the orange box. You can do this by using the styles below but remember – you need to put a DIV wrapper around the Web Part Zone and/or Web Part.
#blogbox .link-item,
#blogbox .link-item a:link,
#blogbox .link-item a:visited,
#blogbox .link-item a:active
{
color:#990000;
font-family:arial;
font-size:1.15em;
font-weight:bold;
}
When looking into this I first tried to style the A tag that is used for the TITLE which read ‘New version of Free2Teach launched’ which worked ok until there was a long title line that wrapped around and underneath. This caused it to visually break and look poor. I then thought I am going to have to do this properly if I want to do it!
What I did was very very simple, I started by opening up ItemStyle.xsl inside the XSL Style Sheets within the Style Library. Next I took a copy of this file (very important!) and then added the following below. I set the template name to ‘ReadMoreLink’ so I could remember it when selecting it in the CQWP settings.
<xsl:template name=”NewLinkDefault” match=”Row[@Style=’NewLinkDefault’]” 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=”SafeImageUrl”>
<xsl:call-template name=”OuterTemplate.GetSafeStaticUrl”>
<xsl:with-param name=”UrlColumnName” select=”‘ImageUrl'”/>
</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”>
<div class=”link-item”>
<xsl:call-template name=”OuterTemplate.CallPresenceStatusIconTemplate”/>
<a href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”{@LinkToolTip}”>
<xsl:value-of select=”$DisplayTitle”/>
</a>
<a href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”{@LinkToolTip}” class=”readmorelink”>
read more
</a>
</div>
</div>
</xsl:template>
What I have simply done is coped the full A reference and copied it underneath and set the class to ‘readmorelink’ and added the following css to my style sheet and it should work 🙂
.readmorelink {
display:block;
text-indent:-9999px;
background:transparent url(‘../Images/ergoimages/readnewsitem.jpg’) top left no-repeat;
color:#666666;
margin:10px 0 0 0 !important;
padding:0;height:27px;
font-family:arial;
font-size:1.15em;
font-weight:bold;
}
