Layout Styles

Layout Styles

Overview of the configuration Tool Pane for List Rotator

The table below shows examples of the available styles using an out-of-the-box Announcements list as the list being rotated. The View for Rotating view that will be rotated looks like this:

OOTB list view.png

The available styles are shown below for the third announcement in the list. The width of the web part is not constrained (set to adjust height and width to fit the zone in the Appearance section of the Tool Pane) and the rotate style set to scroll left.

Style Example
Default hw21 default1.png
Basic Table hw21 basic table1.png
Boxed, no labels hw21 boxed no labels.png
Boxed hw21 boxed.png
Newsletter hw21 newsletter.png
Newsletter, no lines hw21 newsletter no lines.png
Shaded hw21 shaded.png
Custom hw21 custom.pngFor information on how this custom view was created, see Create a Custom style for your rotated list.

Rotate Styles

Rotate Styles

Overview of the configuration Tool Pane for List Rotator

The table below shows the descriptions of the available styles using an out-of the box Announcements list as the list being rotated. The View for Rotating view that is rotated looks like this:

OOTB list view.png

Links to videos that show the differences between the available styles are also included in the table. Each video clip rotates the same list at medium speed to the left; the only change is the rotation type.

Available Rotate Styles are:

Style Example
Scroll Scrolls in the direction and at the speed specified. Pauses momentarily before scrolling to the next item. White space between items can be controlled by changing the width or height of the web part. See it in action here.
Smooth Scroll Similar to Scroll but does not pause at each item. White space between items is minimized. See it in action here.
Random

Select this style and then choose between the various Effects including:

  • None. See it in action here.
  • GradientWipe. See it in action here.
  • Pixelate. See it in action here.
  • Dissolved. See it in action here.
Slideshow Slideshow with scroll coming from the Left at Medium Speed with a Custom Style. See it in action here.

Overview of List Rotator Configuration Tool Pane

Overview of List Rotator Configuration Tool Pane

To configure the List Rotator web part, add it to the page, access the web part tool pane, and follow these steps:

Step Action
1. SP2010 tool pane-lang.pngSelect a language. See Localize Bamboo Web Parts for your Language for more information.
2.

hw21 tool pane list and view.pngChoose a list and a view of that list. Use the view to filter the items displayed and/or to make certain fields available for view.

NOTES:

  1. You can rotate only lists on the current site.
  2. Make sure that the view you select is a public view.
  3. Survey lists and threaded views of Discussion replies cannot be rotated.
  4. Users see only items they have permission to see. If you restrict access to some items for some users, those restricted items will be dropped from the rotation for those users.
3.

hw21 tool pane-style.pngSelect a Style. Available layout styles include:

  • Default
  • Basic Table
  • Boxed, no labels
  • Boxed
  • Newsletter
  • Newsletter, no lines
  • Shaded
  • Custom

The Default layout style leaves the HTML and CSS for the Web Part as-is. For detailed information on other available styles, see Layout Styles.

4.

hw21 tool pane-rotate.pngSelect a Rotate Style. Available options are:

  • Scroll – scrolls and stops briefly for each item(video here)
  • SmoothScroll – doesn’t stop at each item, but rather scrolls smoothly through all items
  • Random
  • Slideshow – shows each item individually

For examples of the available rotate styles, see Rotate Styles for links to short video clips of each style.

5.

hw21 tool pane-effect.png Select an Effect. Effect is enabled only when the Rotate Style is set to Random. The available choices are:

  • GradientWipe
  • Pixelate
  • Dissolved

For examples of the available effects, see Rotate Styles for links to short video clips of each effect.

6.

hw21 tool panedirection.png Select the Direction of the rotation. Available choices are:

  • Up – vertically towards the top of the page
  • Down – vertically towards the bottom of the page
  • Left – horizontally to the left
  • Right – horizontally to the right
7.

hw21 tool paneSpeed.pngSelect whether you want to specify a speed or a delay effect. If you click the Default radio button, the available speed choices are:

  • Slow
  • Medium
  • Fast

For greater control of the default speed, choose the Delay Effect radio button and enter a number between 1 and 20. Think of the number as the number of seconds each item will be displayed (although it’s not really seconds). The higher the number, the slower the rotating speed.

8. hw21 rotating item order.pngIf the selection in Step 4 above is Scroll, select the Rotating Item Order. Choose the order associated with the selected list view or choose a random order.
9. hw21 tool pane-numofitems.pngChoose how many items should be displayed at once. Choose any number between 1 and 10.

Create a Custom Layout for a Picture Library

Create a Custom Layout for a Picture Library

Create a Custom style for your rotated list

Example:

HW21 - example1 rotator.png The example explained here rotates images from a SharePoint Picture Library. Below the image, a hyperlink column is displayed that end users can click on to go to a page that provides more information about the image.

The Picture Library view that is rotated is shown below. Notice the column called click here is included in the view called for Rotating. It is a column of type hyperlink.

HW21-Example2listview.png

How to configure this custom layout:

Step Action Result
1. Edit the web part and select Custom as the Style. hw21 tool pane-style.pngThe buttons in that section will become enabled.
2. Click Edit Source The default layout will appear in the List Rotator text editor. If desired, copy the contents to your text editor of choice.
hw21 - default custom partial.png
3. Delete the code highlighted in yellow below.
HW21 - default layout with yellow to delete3.png
4.

Replace this code

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

with this

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

The resulting code should look like this:
hw21-example2newlayout.png
Paste it back into the List Rotator text editor and click Save to close the editor and save your layout changes.

5. We want to center the hyperlink below the image, so we need to modify the cssTitle class.

Click the CSS Edit button in the Select Style section of the web part tool pane.

The default CSS code appears in the List Rotator text editor.

Change this

TD.cssTitle{text-align: right;font-weight: bold;}

to this

TD.cssTitle{text-align: center;font-weight: bold;}

click Save to save your changes.

6. Make any other changes to the web part configuration (i.e., speed of rotation). When ready click Apply and then OK at the bottom of the tool pane to save and apply your changes.

Create a Custom Style for Your Rotated List

Create a Custom Style for Your Rotated List

If none of the layouts or styles available in the List Rotator web part work for you, create a custom layout and apply your own styles.

In this article, we will create a custom layout for rotating this view (View for Rotating) of an Announcements list:
OOTB list view.png

hw21 - custom layout.png
We want the custom layout to look like this when displayed in the List Rotator. No column labels are displayed and only the announcement Title, Body, and Event Date (calculated from the Start Date Time and End Date Time columns in the list) are included in the display.

To create this custom style, follow these steps:

Step Action Result
1. Edit the web part and choose Custom as the Style in the web part tool pane. The Edit Source and CSS Edit buttons become enabled.
hw21 tool pane-style.png
2. Click Edit Source to create a custom layout for the information you want to display.

A text editor appears for you to edit the source for the layout.
hw21 DEFAULT edit source.png

Icon-Tip It may be easier to copy this text into a text editor of your choice to make edits easier. You can paste edited text back into this dialog once the edits are complete.

3.

Edit the layout.

NOTE: Unless your list has columns called Location, Department, YearsOfService, etc., the default custom layout will not work for you and MUST be changed.

By default, the layout code looks like this (38 lines):
default custom layout with yellow.png

default with green lines2.pngThe main area to note is highlighted in yellow above. It includes two nested TABLE tags (table 1 starts on line 5 and the nested table starts on line 14; see the yellow highlight above). These tables look like the diagram shown here. The outside table (table 1, shown with red lines) has one row (<TR>) with two columns (<TD>). The inner table (shown with green lines) is inside the second column of the first table and has several rows with two columns each.

hw21 - custom layout wtih green lines1.pngMost layouts will have at least one table where you will display values from the columns of the list you want to rotate. Sometimes you may want to include column labels, as seen in the default layout above.

The custom layout we will build for the Announcements list has a different table structure. We don’t plan to include column labels, so the table is just 4 rows and two columns (the first two rows spans both columns).

To implement the custom layout for the Announcements list shown at the top of the page, replace the outer <TABLE> tag in the default layout (lines 5 though 35) with the one shown below (HW21-AnnouncementsLayoutTableTagExample).
new layout with yellow1.png

Notice the code highlighted in yellow and purple. The yellow highlights show code needed to display the value of a particular column of the list. For example, the tag:

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

will display the value of the Title column. The tag:

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

will display the value of the Body column. You can use this syntax to display the value of any column with a name that doesn’t have any spaces in the name. If you have a column name with spaces (i.e., “Years of Service”), the tag will be:

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

where _x0020_ replaces any spaces.

The code highlighted in purple is the CSS class which controls the font, size, color, etc. of the display. See Step 6 below for more information.

Finally, notice the width of each column (<TD>) in the ninth and tenth rows is specified as:

width="25px"

or

width="200px"

The first column is not as wide as the second to show the Announcement Body indented below the Announcement Title.

4. In addition to the table layout, the custom layout for the Announcements list also includes a calculated value to show the start and end time of the event like this: 8/30/2013, 14:00 – 15:00. This is calculated at the beginning of the source file using the Start Date Time and End Date Time columns using the code highlighted in yellow below.

Just after the “for-each” line at the top of the layout, but before the first <TABLE> tag, this code (HW21-AnnouncementsLayoutVariablesExample) is added:
variables for the concatentated column.png

5. When your updated layout is complete, paste it back into the List Rotator Text Editor and click Save. This saves your custom layout and closes the text editor.
6.

Next, you need to add custom fonts and text color. In our desired layout, the Title value is blue and bold. The class assigned to this in Step 3 above is CSSTitle2.

Edit the web part and click the CSS Edit button in the Select Style area of the tool pane.

The default CSS appears in a text editor. If desired, copy the text into your editor of choice.The classes defined by default are cssImage, cssFullName, and cssTitle.
DefaultCSS.png

For the desired layout, copy the text for cssTitle to make cssTitle2. Add the following for bold, blue text:

TD.cssTitle2{color: #003399;text-align: left;font-weight: bold;}

as shown in the screenshot below (HW21-AnnouncementsCSSExample). You may choose a different color, font, etc. as needed.
AnnouncementstCSS.png

7. When your updated CSS is complete, paste it back into the List Rotator Text Editor and click Save. This saves your custom CSS and closes the text editor.
8. In the web part tool pane, click Apply and then OK to save the configuration changes you made to the List Rotator. View the rotated values on the page.

For other examples of custom layouts and CSS, see the following: