Using Images for Bullets in a SharePoint Bulleted Links List

I love the fact that Microsoft now included Fields to display options within a Content Query Web Part (CQWP). In more than one ocassion where I didn't need to get too fancy about styles, I was able to do with this option instead of having to create custom styles in my Style Sheets. I'm saying this because the solution I'm about to present has been simplified to take advantage of these new SharePoint 2010 features. So let's dive in.

More than once I've been asked to use "nicer" images or small logos in place of the typical HTML bullet or the little orange square bullet that SharePoint usually displays for bulleted lists.

Step 1 - Create, Reuse, or Adapt Image to be used as Bullet

So the first thing I usually do is I create or adapt a bullet from images the customer might provide, or I create one from scratch using an imaging application such as Photoshop or Fireworks.

So once you have your image, upload it to a library of your choice. When it comes to elements that I'm going to be using as part of my custom look and feel, I have a tendency to "hide" them in places my users won't be able to find easily. More than once I ended up with that "loverly" red X in place of images because my customers would not know what the file is and delete it. So I usually create a Master Page folder within the Style Library and I upload (and publish) all my images for custom look and feel there. So this example will assume that. We will also assume the name for the image is divbullet.gif.

Step 2 - Create The Necessary CSS Class Definitions

In my copy of the corev4.css file, I create a class that usually looks something like this:

.myBullet
{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 8pt;
    padding: 4px 0px 0px 18px;
    color: #ffffff;
    text-align: left;
    background-image: url(PathToYourImage/divbullet.gif);
    background-repeat: no-repeat;
    background-position: inherit;
}
 

You may need to adapt the padding settings to better accomodate for the image of your choice.

Step 3 - Create The Necessary Item Styles

After making a copy of Microsoft's original Style Sheet, modify your copy to include a style that will be used by the CQWP.

<xsl:template name="MyLinks" match="Row[@'MyLinks']" mode="itemstyle">
  <xsl:variable name="DisplayTitle">
   <xsl:call-template name="OuterTemplate.GetTitle">
    <xsl:with-param name="Title" select="@MyLink"/>
    <xsl:with-param name="UrlColumnName" select="'URL'"/>
   </xsl:call-template>
  </xsl:variable>
  <xsl:variable name="LinkTarget">
   <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
  </xsl:variable>
  <div id="linkitem" >

<!-- Apply special bullet styles -->

   <div class="myBullet" >

<!-- Link to item -->

    <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
    <a>
     <xsl:attribute name="href">
      <xsl:value-of select="substring-before($DisplayTitle,', ')"></xsl:value-of>
        </xsl:attribute>
        <xsl:attribute name="title">
         <xsl:value-of select="@Description"></xsl:value-of>
     </xsl:attribute>
     <xsl:value-of select="substring-after($DisplayTitle,', ')"></xsl:value-of>
    </a>

   </div>
  </div>
 </xsl:template>


 

Step 4 - Add and Modify Content Query Web Part (CQWP)

Go to the page where you would like to display the links, insert a CQWP, open its tool pane, select the custom links list within Query, apply filters if any (such as DisplayYN),  remove chrome, provide a name and make any other changes that you may see fit. Then export the web part to your computer, open it using Notepad, and make the following changes:

<property name="CommonViewFields">Title,Text;MyLink,URL;DisplayYN,Choice</property>

<property name="ItemXslLink" >/sites/SiteName/Style Library/XSL Style Sheets/CUSTOMItemStyle.xsl</property>

Save the modified CQWP, upload it to the page where it should display, edit the web part, and verify that within the Fields to display section (you may need to expand Presentation) MyLink displays in the name for the hyperlink column in the Link box; otherwise, type it in.

Within the Styles section of the web part tool part, select MyLinks at the Item Style drop-down list.

Select [Apply] and [OK] at the bottom of the tool part.