Create new template - Part 6 - Cutomize widget output

...
<widget module="core" name="html">
  <params>
    <param name="content">
      <value><![CDATA[Display slide of hotest aritcles]]></value>
    </param>
  </params>
</widget>
...

...
<widget name="hotest" module="news">
  <params>
    <param name="limit">
      <value><![CDATA[3]]></value>
    </param>
  </params>
</widget>
...

<link rel="stylesheet"  type="text/css"  href="/js/jquery_plugins/jcarousel/jquery.jcarousel.css"  />              
<script type="text/javascript" src="/js/jquery_plugins/jcarousel/jquery.jcarousel.pack.js"></script>
<div class="t_new_hotest">
  <div id="t_new_hotest_slide">
    <div id="t_new_hotest_content">
      <?php if ($this->articles != null) : ?>
      <ul>
        <?php foreach ($this->articles as $index => $article) : ?>
        <li>
          <?php if ($article->image_crop != null) : ?><img src="<?php echo $article->image_crop; ?>" /><?php endif; ?>
          <div>
            <h2><a href="<?php echo $this->url($article->getProperties(), 'news_article_details'); ?>"><?php echo $article->title; ?></a></h2>
            <p><?php echo $this->subString($article->description, 300); ?></p>
            <p class="t_new_hotest_more">
              <a href="<?php echo $this->url($article->getProperties(), 'news_article_details'); ?>">
                <?php echo $this->translator()->widget('more'); ?>
              </a>
            </p>
          </div>
        </li>
        <?php endforeach; ?>
      </ul>
      <?php endif; ?>  
    </div>
    <a href="javascript:void(0);" id="t_new_hotest_prev"><img src="/skin/sample/plus/images/prev.png" /></a>
    <a href="javascript:void(0);" id="t_new_hotest_next"><img src="/skin/sample/plus/images/next.png" /></a>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function () {
    function carouselInitCallback(carousel) {
        $('#t_new_hotest_next').bind('click', function () {
            carousel.next();
            return false;
        });
        $('#t_new_hotest_prev').bind('click', function () {
            carousel.prev();
            return false;
        });
 
        // Disable autoscrolling if the user clicks the prev or next button.
        carousel.buttonNext.bind('click', function () {
            carousel.startAuto(0);
        });
 
        carousel.buttonPrev.bind('click', function () {
            carousel.startAuto(0);
        });
 
        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function () {
            carousel.stopAuto();
        }, function () {
            carousel.startAuto();
        });
    };
    $('#t_new_hotest_slide').jcarousel({
        scroll: 1,
        auto: 5, // Sets the time delay between automatic scrolling of the panel
        wrap: 'last',
        initCallback: carouselInitCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
});
</script>

...
<widget module="core" name="html">
  <params>
    <param name="content">
      <value><![CDATA[Display 3 newest articles]]></value>
    </param>
  </params>
</widget>
...

...
<widget name="newest" module="news">
  <params>
    <param name="limit">
      <value><![CDATA[3]]></value>
    </param>
  </params>
</widget>
...

<?php if ($this->articles != null) : ?>
  <?php foreach ($this->articles as $index => $article) : ?>
  <?php if ($index % 5 == 0) : ?><ul style="<?php if ($index == 0) : ?>dispaly: block<?php else : ?>display: none<?php endif; ?>"><?php endif;?>
  <li>
    <?php if ($article->image_square) : ?>
      <a href="<?php echo $this->url($article->getProperties(), 'news_article_details'); ?>">
        <img src="<?php echo $article->image_square; ?>" width="60px" height="60px" />
      </a>
    <?php endif; ?>
    <strong><a href="<?php echo $this->url($article->getProperties(), 'news_article_details'); ?>"><?php echo $article->title; ?></a></strong>
    <div><?php echo date($this->globalConfig('datetime')->date_time_format, strtotime($article->activate_date)); ?></div>
  </li>
  <?php if ($index % 5 >= 0 && $index % 5 <= 3) : ?>
  <li style="margin: 0; padding-top: 5px; height: 5px; line-height: 5px"><hr class="t_g_dot" /></li>
  <?php endif; ?>
  <?php if ($index % 5 == 4) : ?></ul><?php endif; ?>
  <?php endforeach; ?>
<?php endif; ?>
...

<div class="t_news_newest">
  <?php if ($this->articles != null) : ?>
  <ul>
    <?php foreach ($this->articles as $index => $article) : ?>
    <li>
      <h2>
        <?php if ($article->image_square) : ?><img src="<?php echo $article->image_square; ?>" width="60px" height="60px" /><?php endif; ?>
        <?php echo $article->title; ?>
      </h2>
      <p><?php echo $this->subString($article->description, 300); ?></p>
      <p class="t_news_newest_more">
        <a href="<?php echo $this->url($article->getProperties(), 'news_article_details'); ?>"><?php echo $this->translator()->widget('more'); ?></a>
      </p>
    </li>
    <?php endforeach; ?>
  </ul>
  <?php endif; ?>
  <div class="clearfix"></div>
</div>