- Colors - of the text itself, the scroller box which contains the text, and any border you might specify around the scroller text box
- Font - both face (Arial, Tahoma, Verdana, etc..) and size.
- Placement - of the scroller box - putting it exactly where it needs to be on the page.
- Size - of the scroller box - height, width, cellpadding and border.
- Text - the actual words you want the scroller to display.
- Speed - the rate of speed the scroller moves your text, as well as defining the length of time it will pause between lines.
COLORS
This line of code sets the colors for your scroller. It'll be found in the html of your page. You'll notice 3 sets of values (they've been highlighted). These are hexadecimal color values and they tell your browser which colors to display. The first of these - "#FFFFFF" - controls the color of the text itself. The value "#FFFFFF" represents the color "white" so in this instance the color of the text would be white. The second value controls the background color of the scroller text box. This one has been set to "#000000" which represents the color "black". The third value represents the color of the border around the scroller text box (if a border has been defined). This one has been set to "#009900", which is a darker shade of green. These 3 color values would give you a black text box displaying white text with a green border. It's really not quite as boring as it sounds.
There are literally millions of possible color combinations (16.7 to be exact) and while we try to maintain as liberal and open minded of an attitude as possible, I have to tell you that some colors are in fact better than others. Better for you, better for your visitors, better for the sanity and well-being of your machines. You might want to use this color chart as a guide.
FONT
Setting the font face is easy. Just delete whatever happens to be there and replace it with your own. In this case the default face values are "Verdana", "Arial", and "Helvetica". The reason there are 3 fonts specified is because not all computers have all fonts installed. If a visitor to your page for some very odd reason doesn't have Verdana on their machine, their browser will look immediately to the second value, in this case "Arial", to display the text in. If for some virtually unheard of reason they don't have Arial either, their browser will call on the third value - Helvetica. The order in which these fonts appear in the code is important. First is first, second is second and so on... and so forth...
Setting the size of the font is just as easy. The font size value is this case is represented by the number "2". A general rule of thumb to remember when dealing with font sizes is that higher is bigger and lower is smaller. For instance:
- This is 1
- This is 2
- This is 3
- This is 4
- This is 6
- This is 10
The main factor to consider when setting the size of your font is the size of the scroller text box that it's going to be displayed in. Set the font too large and only part of it will be visible. Set it too small and you'll be left with too much dead space surrounding it. The best thing to do is just experiment, try out different combinations until you hit on one you like. That's what I always do anyway.
PLACEMENT OF THE SCROLLER ON YOUR PAGE
This line of code positions the scroller on your page. The numbers represent pixels and pixels are pretty small. They're smaller than the period at the end of this sentence. This particular placement shows the scroller positioned 330 pixels from the top and 250 pixels from the left side. Placement will always be from the top and left, mainly because it's just about the only thing all monitors have in common. You're going to have to play around with this one. Precise placement, if you ask me, is more trial and error than it is anything else. I have a screen measure utility that measures in pixel units. Sometimes I use it - sometimes I don't. Mostly I just guess, then I guess again, then I guess again, narrowing it down a little more each time... change/save/view... change/save/view. It's fun. You'll like it.
If at all possible, try to test your page in as many different browser environments as you can. What looks okay in Netscape might look slightly different in IE - and vice versa.
SETTING THE SIZE OF THE SCROLLER BOX
There are a total of 6 values represented here. We're only going to concern ourselves with the last 4 (The first 2 are redundant placement settings. We've placed the box already so we can disregard these now.). In the graphic we see that 4 numbers have been highlighted. The first of these numbers, in this case "460", represents the width of the scroller box - again, in those little bitty pixels. The second number sets the height of the box. The third number sets the size of a border around the scroller text box. The value is this instance has been set to "0", which indicates that there has been no border specified. Should you place a border around your text box? This one is strictly dealer's choice. The graphic below shows the same scroller I've been describing in this tutorial. The "0" value has been changed to "2", indicating a 2 pixel border around the entire box. Border color has been set to "#009900", which shows as dark green.
Try it with a border. Try it without one. The main consideration is obviously whether or not it works with the rest of the page.
The last number sets a value for the padding. Imagine this as a cushion between the sides of the scroller text box and the actual text. It's better to leave this value relatively low, and in fact you probably won't notice much difference at all in a smaller box.
THE ACTUAL TEXT TO BE DISPLAYED IN THE SCROLLER
This is where we write the actual text to be displayed within the scroller text box. The text highlighted in the above code appears in the scroller below.
as well as strong tags (element):
and a single instance of the underline element:
- Center tags (note that there are 2 - an opening tag and a closing tag) will, as the name implies, center the text within the area that it's displayed in.
- Strong tags, which are now replacing bold tags, set the font in boldface.
- The underline tag obviously underlines any text placed between the opening and closing underline tags.
DEFINING SCROLLER SPEED AND PAUSE VALUES
So far everything we've done up to this point has taken place within the html of the page you're designing. In order to configure the scroller speed and pause values, we'll need to open "scroller.js" and find the 2 lines of code in the graphic above.
The first line establishes the rate of speed your scroller will scroll the text. In this example that value has been set at "90". Higher is faster and lower is slower. I honestly couldn't tell you what it tops out at. Set it to "658790" and see what happens, then write to me and let me know.
The second value, in this case "1000", sets a pause duration between the lines of text. A value of "1000" sets a one second pause, meaning that once a line of text appears it will pause for one second before resuming scrolling. A value of "5000" will set a 5 second pause. A value of "10000" will pause the text for 10 seconds - which if you ask me is entirely too long to wait. Basically what you'll probably need to do is just play around with both of these settings. A larger sized text box would benefit from a faster scroll speed and possibly no pause setting at all. Conversely, a smaller text box would need a slower scroll speed and an appropriate pause value in order to ensure that your visitors aren't rushed, potentially missing the message you're trying to convey. Don't want that to happen.
