Styling the Tiles Renderer

What is the Tiles Renderer?

The ATG Recommendations service uses a configurable renderer to display your recommendations. The Tiles Renderer is the default renderer and can be configured using HTML and CSS to fit the look and feel of your website.

Deciding what to render

The Tiles Renderer has two options that can be set using HTML. To use them, modify the Container <DIV> Element for Recommendations to include your options.

To include the price in the recommendations, add the -inc-price option.

  <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>-inc-price</dt>
    </dl>
  </div>

Styling using CSS

The Tiles Renderer has four classes that should be modified to suit your needs.

• cs-header-text — a <div> tag that contains the header text defined in the Container Element
• cs-rec — <div> tags that contain the individual product recommendations
• cs-title — <span> tags that contain the titles of each product recommendation
• cs-price — <span> tags that contain the prices of each product recommendation

A further good idea is to style the <img> and <a> tags, as well as the container <div>.

  #cs-recslot {text-align:left; padding:0; font:12px Arial, sans-serif;}

  #cs-recslot .cs-header-text {font: bold 17px Arial, sans-serif; color:#000;}

  #cs-recslot .cs-rec {float:left; width:125px; text-align:center; padding:3px; margin:10px;}

  #cs-recslot .cs-title {margin:0; padding:0; color:#333;}

  #cs-recslot .cs-price {margin:0; padding:0; padding-top:3px; font-weight:bold;}
  #cs-recslot a:hover .cs-price {color: #000;}

  #cs-recslot img {width:100px; padding:3px; border:0;}
  #cs-recslot a {color:#000; text-decoration:none; margin:5px;}
  #cs-recslot a:hover {color:#999;}
  #cs-recslot a span {display:block; clear:both;}

Visual Reference