How to configure custom style in the List Rotator Web Part

The Bamboo List Rotator Web Part is a great tool that allows the display of different lists and picture libraries in the rotating style. This does really enhance the look and feel of SharePoint site. Few customers reported a problem which occurs when an announcement list is selected. The List Rotator displays the "Created" field although the list does not included in the view.

List without Created field

Created field appears at the bottom in the List Rotator.

Although Bamboo engineers are working on a fix, there is a way to overcome this issue. One of the features in this Web Part is the ability to let user personalize the HTML source and apply their CSS style. This is great since SharePoint web developer can develop a look and feel of their preference. Please you may need to read the Application Notes for further information about this feature. We will only modify the current default custom style in order to accomplish this.

Here is how it can be done:

• Open the List Rotator tool pane and select the list.
• Select the view that contains all columns to be displayed. For an announcement list, make sure that the view includes "Body" column.
• Under Select style, select custom. This option will let you customize the look and feel of the List Rotator Web Part.
• Click CSS Edit to create your own custom style sheet class that will be used by the source file. For this example, we create 3 class: TD.cssBamboo1, TD.cssBamboo2,Table.cssTable

TD.cssBamboo1

{

    color: #003399;

    font-size: 12pt;

    font-family: 'Goudy Old Style';

    background-color: #F2F2F2;

    color: red;

    font-weight: bold;

    padding: .75pt .75pt .25pt .75pt;

    text-align: left;

    height: 25px;

    font-style: normal;

}

TD.cssBamboo2

{

    height: 100px;

    width: 400px;

    margin-top: 0pt;

    margin-left: .75pt;

    vertical-align: top;

}

Table.cssTable

{

    border-right: gray 1px solid;

    border-top: gray 1px solid;

    border-left: gray 1px solid;

    border-bottom: gray 1px solid;

}

• Click Source Edit to create your own source HTML. A new dialog window will open.

    Copy this:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

  <xsl:output method="html" />

  <xsl:template match="rs_data">

    <xsl:for-each select="z_row">

      <TABLE    height="100%"  cellpadding="2px" cellspacing="0" class="cssTable">

        <TR>

          <TD colspan="2" class="cssBamboo1" >

            <xsl:value-of select="@ows_LinkTitle"/>

          </TD>

        </TR>

        <TR>

          <TD class="cssBamboo2">

            <xsl:value-of select="@ows_Body"/>

          </TD>

        </TR>

      </TABLE>

    </xsl:for-each>

  </xsl:template>

</xsl:stylesheet>

Note: values under each column are displayed using these tags <xsl:value-of select="@ows_LinkTitle"/> and <xsl:value-of select="@ows_Body"/>

@ows_LinkTitle refers to the internal column name for Title (linked to item with edit menu).

@ows_Body refers to the internal column name for Body field column

You can find more information in the application notes under ‘Styling the Web Part' section.

• Click Save and OK

• The List Rotator will only display Title and Body columns.

With a little HTML and CSS knowledge, we were able to control the look and feel of this Web Part.This custom CSS feature really empower the SharePoint user and put them at the driver seat whenit come to customization. Not only did we apply need style sheet on the Web Part, we also resolve our initial problem (with created field).