Styling the Rollover Renderer

What is the Rollover Renderer?

The ATG Recommendations service uses a configurable renderer to display your Product Recommendations. The Rollover renderer works by augmenting the functionality of the Tiles Renderer. To style the recommendations that appear on the page initially you should view the documenation for styling the Tiles Renderer. This documentation applies to styling the display that appears when the user rolls his mouse over the recommendations.

Deciding what to render

To use the Rollover Renderer you must specify an extra parameter in the Container <DIV> Element for Recommendations. To do this, add the renderer parameter and set rollover as its value.

The Rollover Renderer has many options that can be set using HTML. To use them, modify the Container <DIV> Element for Recommendations to include your options. These options exist in addition to the options that may be set for the Tiles Renderer and mostly control what data appears in the rollover.

• To include a thumbnail, add the -rollover-thumbnail option. This is included by default. To remove, set to N.
• To include a name, add the -rollover-name option. This is included by default. To remove, set to N.
• To include a price, add the -rollover-price option. This is included by default. To remove, set to N.
• To include a brand, add the -rollover-brand option.
• To include a expiration date, add the -rollover-expire option.
• To include a category, add the -rollover-category option.
• To include a description, add the -rollover-desc option. This is included by default. To remove, set to N.

• You can truncate description text using the -rollover-desc-length option. The value is the maximum number of characters to allow. This functionality will always display whole words. The default is to never truncate descriptions.

  <div id="cs-recslot" class="cs-slot">
    <dl class="cs-cfg" style="display: none">
      <dt>headerText</dt><dd>Your Text</dd>    
      <dt>numRecs</dt><dd>Number of Recommendations</dd>
      <dt>renderer</dt><dd>rollover</dd>

      <dt>-rollover-thumbnail</dt>
      <dt>-rollover-name</dt>
      <dt>-rollover-price</dt>
      <dt>-rollover-brand</dt><dd>N</dd>
      <dt>-rollover-expire</dt><dd>N</dd>
      <dt>-rollover-category</dt><dd>N</dd>
      <dt>-rollover-desc</dt>

      <dt>-rollover-desc-length</dt><dd>400</dd>
    </dl>
  </div>

Styling using CSS

Information on styling the recommendations should be obtained from the Tiles Renderer Documentation. This section concerns styling the presentation of the rollover.

Each piece of data that is presented is placed inside its own div tag. Each tag is given a class definition that pertains to its name. Each class will be named cs-rollover-NAME. If a piece of data is not set to be included there will not be a corresponding div tag. The divs will be included in the following order:

• <div class="cs-rollover-thumbnail"><img /></div>
• <div class="cs-rollover-name">text</div>
• <div class="cs-rollover-price">text</div>
• <div class="cs-rollover-brand">text</div>
• <div class="cs-rollover-expire">text</div>
• <div class="cs-rollover-category">text</div>
• <div class="cs-rollover-desc">text</div>

In addition to these classes you must define styles for the main container classes. To guard against namespace collisions you should define all of these styles as subclasses to the #cs-rollover id as demonstrated in the following example.

#cs-rollover .cs-rollover {width:450px; filter: alpha(opacity:90); KHTMLOpacity: 0.90; MozOpacity: 0.90; opacity: 0.90;}

#cs-rollover .cs-top {width:450px; height:10px; background: url(http://static.cleverset.com/images/rollover_top.gif) no-repeat top;}

#cs-rollover .cs-middle {width: 434px; padding: 0 8px 0 8px; background: url(http://static.cleverset.com/images/rollover_middle.gif);}

#cs-rollover .cs-bottom {width: 450px; height: 27px; background: url(http://static.cleverset.com/images/rollover_top.gif) no-repeat bottom;}

#cs-rollover .cs-rollover-thumbnail {float: left; margin-right: 10px;}

#cs-rollover .cs-rollover-name {font-weight: bold; font-size: 18px;}

#cs-rollover .cs-rollover-price {font-weight: bold; color: #C60;}

#cs-rollover .cs-rollover-brand {}

#cs-rollover .cs-rollover-expire {}

#cs-rollover .cs-rollover-category {color: #690;}

#cs-rollover .cs-rollover-desc {color: #333;}

Advanced User Extensibility

The Rollover Renderer is an advanced renderer that provides a great deal of advanced user extensibility. All styling and layout is controlled through the use of CSS and, as such, the user has complete control over not only the way the data is displayed, but also the look of the rollover itself.

The CSS above makes use of the images that ATG Recommendations has provided as defaults but these can easily be replaced by user created images. The defaults provided by ATG Recommendations will stretch vertically and have a fixed width, but again, this can be reversed using the proper CSS and user created images. Even if you don’t want to change the defaults, you may want to host the background images on your own servers. This is as easy as downloading them and changing the URLs in the CSS.

To aid in the use of different layouts and user created images we have provided several options that can be defined to change the location of the rollover relative to the mouse on the page. These should be added just like the other options in the Deciding What to Render section.

Three options may be defined: the corner of the rollover that is aligned to the mouse and the x/y offsets from that corner.

The corner is defined by the -rollover-corner option. Supported values are bottom-right, bottom-left, top-right and top-left. The default is bottom-right.

The offsets are defined by the -rollover-xoffset and -rollover-yoffset options. You may supply any integer as a value and it will be used as an offset from the chosen corner. The default xoffset is -30 and the default yoffset is 15.

      <dt>-rollover-corner</dt><dd>bottom-right</dd>
      <dt>-rollover-xoffset</dt><dd>-30</dd>
      <dt>-rollover-yoffset</dt><dd>15</dd>

For reference, the structure of the rollover is as follows:

<span id="cs-rollover" style="position:absolute">
  <div class="cs-rollover">
    <div class="cs-top"></div>
    <div class="cs-middle">
       DATA DIVS 
      <div style="clear:both"></div>
    </div>
    <div class="cs-bottom"></div>
  </div>
</span>