SAG Content Scroller v1.3 - Scroll & Text Changes

[luke6843]

1) Script Title: SAG Content Scroller v1.3

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/sagscroller.htm

and

http://www.dynamicdrive.com/dynamicindex2/sagscroller_suppliment.htm

3) Describe problem: I would like to change the direction of the scroll from up to down. I would also like to adjust the font size and color of the news titles, text and the source field - each individually.

I am not very well versed at CSS or Java Script; any help or suggestions wouldbe greatly appreciated.

I have put up the page at http://www.equityaddicts.com/test_news.html

Thank you
Luke

[ddadmin]

Can you clarify what you mean by "scroll up"? As far as styling the font size and color of the news titles individually, first, it's important to understand the structure of the scroller's output when you're displaying news feeds. It looks something like this:



<div id="mysagscroller" class="sagscroller">
<ul>
<li><a href="http://google.com">Google</a><div class="rsscontent">RSS description here</div><div class="rsslabel">BBC News</div></li>
<li><a href="http://google.com">Google</a><div class="rsscontent">RSS description here</div><div class="rsslabel">BBC News</div></li>
<li><a href="http://google.com">Google</a><div class="rsscontent">RSS description here</div><div class="rsslabel">BBC News</div></li>
<li><a href="http://google.com">Google</a><div class="rsscontent">RSS description here</div><div class="rsslabel">BBC News</div></li>
<li><a href="http://google.com">Google</a><div class="rsscontent">RSS description here</div><div class="rsslabel">BBC News</div></li>
</ul>
</div>

With that said, lets say you wish to style the very first news item differently from the rest- the following CSS does this:


<style>

#mysagscroller ul li:nth-of-type(1) a{ /*item's link style*/
font-weight: bold;
}

#mysagscroller ul li:nth-of-type(1) .rsscontent{ /*item's description style*/
color: red;
}

#mysagscroller ul li:nth-of-type(1) .rsslabel{ /*item's label style*/
color: green;
}

</style>

To style the 2nd item instead for example, you'd use the CSS selector #mysagscroller ul li:nth-of-type(2). This is explained in detail in this article (http://www.javascriptkit.com/dhtmltutors/structuralcss.shtml).

[luke6843]

Thanks for your reply,

Right now the news items scroll up, from the bottom to the top of the frame. I would like them to scroll from the top to the bottom.

I would like to make all the news stories the same; ie. bold, light blue story header, white text for description (the way it is now is perfect), and the date, time, source smaller text then the description with a font color of light gray.

I have looked through the code and could not find anywhere to make these changes; although I am not very well versed in either CSS or JS.

Thanks
Luke

[luke6843]

Solved the text sizes and color:

Changed the following code:

.sagscroller a{
font-weight:bold;
color: #A6FFFF;
}

&


.sagscroller ul li .rsscontent{ /*div containing body of each RSS entry*/
font-size:12px;
color: white;
}

.sagscroller ul li .rsslabel{ /*div containing label of each RSS entry*/
margin-top:5px;
background: #000000;
font-size:10px;
color: #CCCCCC;
clear: both;
}

In the sagscroller.css file