change bg color of a scrollable content text

[janalyssa]

I created a scrollable content text box using a tutorial from this site. Here is the link to it http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

I would like to change the color of the background of the scrollbar. I know I can change the background of the page but I don;t want that. I just want to change the color of the scroll box. I tried changing the color of the layer but it didn't work( maybe I did something wrong).

Can someone help me please. Thanks!!!

Jane

[rangana]

You cannot change the color of the scrollbar as it is a picture...or i'm missing something else...

[Nile]

It is very simple to change the color of that image, what you do is you open it up in something simple like MS Paint, and use the fill tool or bucket tool.
Hope this Helps,
Nile

[codeexploiter]

I think you are looking for a way to give a background color for the section that shows the two scrollers (^ and v). If that is the case then you can try the following thing in the source code of the script. Modify the following section in the original section as I've highlighted here

<table width="175px">
	<td>
		<p align="right">
			<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)" style="background-color: #ff0000;"><img src="up.gif" border=0></a>  
			<a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)" style="background-color: #0651B9;"><img src="down.gif" border=0></a>
		</p>
	</td>
</table>

Or

You can have a CSS class or selector on the anchor element in which you can specify a background color.

Or

You can try a different approach in which you can put each of the anchor elements inside a <span> element and have a custom CSS class for them in which you can control the presentation of those section in a much more efficient manner. Something like the following:

<table width="175px">
	<td>
		<p align="right">
			<span class="up">
				<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a>
			</span>  
			<span class="down">
				<a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)" ><img src="down.gif" border=0></a>
			</span>
		</p>
	</td>
</table>

A skelton of the 'up' and 'down' CSS classes is below:

.up{
	background-color: #ff0000;
}
.down{
	background-color: #0651B9;
}