A little tips to get started

[angelazou]

The first script I need to integrate is a simple news scroll bar containing latest events.

Code:

<script type="text/javascript" src="../uploads/javascript/mootools.js"></script>
<script type="text/javascript" src="../uploads/javascript/qscroller.js"></script>
<!-- External scripts are saved in the uploads newly created javascript folder-->
<div id="qscroller1"></div>
<div class="hide">
  <span class="qslide">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </span>
  <span class="qslide">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </span>
  <span class="qslide">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </span>
  <span class="qslide">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </span>
  <span class="qslide">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </span>
</div>
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
  duration: 3000,
  delay: 1000,
  auto:true,
  onMouseEnter: function(){this.stop();},
  onMouseLeave: function(){this.play();}
}
var scroller = new QScroller('qscroller1',opt);
scroller.load();
});
//-->
</script>

I also added the following CSS styles for the news block. I'm using Innovation theme with a little twist.

Code:

header .breadcrumbs #hide {
display:none;
}

I have placed these codes in just a simple HTML file and it works. Originally, I placed the JavaScript code as part of the Sidebar Component, and the CSS directly embedded in the template style sheet.