..:: Mini-Tickers in Banners ::..


There are two different ways to put a mini-ticker in a banner. The table way and the DIV way. It's all a matter of choice~

DIV Way:
[b]HIGHLY RECOMMENDED.[/b] The DIV will basically "position" it, so that your mini-ticker will appear where you want it to on the page. It's really easy and can adjust to different positions on different styles if the code is in the CSS - which I will tell you how to do. :3

Table Way:
Coded with a table in the banner. It involves slicing up your banner and is more complicated than the DIV way. It's difficult to adjust with different styles.


\\__ (Example banner we'll work with) __//

Table Way | DIV Way




\\ The DIV Way //

First, you must have a Cascading Style Sheet (CSS). In it, insert the below code.

Listen to my directions carefully. First, change the width to how long you want your marquee to be. Then, change the height to however big your text would fit in (I suggest about 16-18). The "margin from left" means how far the mini-ticker is from the left side of the screen. The top margin means how far it is from the top of the screen. The larger the number is set for these margins, the further they'll be from the left/top. ONLY change the CAPITAL words!

Next, put the following code after the body tag of your HTML document. It doesn't really matter where it's placed; I suggest before the rest of your layout code.

And that's it! ^_^ Change the text according to your wish. If you want the ticker to be positioned differently in different styles, then put the code in all your CSS files, but change the positioning.


\\ The Table Way //

Make sure you have viewed the banner in the link above so you'll know what we're going to be doing.

The first thing we have to do is to cut the banner up into FIVE fragments. No matter where your mini-ticker is on the banner, there will always be FIVE fragments.

First, open the banner in Photoshop or whatever image-editing program you have. Even Paint will work. Select the Rectangular Marquee Tool, or the "marching ants" tool. Now, select all the space above where your mini-ticker is. Cut off a tiny bit of the top of your mini-ticker so the text won't be too high. You should have something like the below (sizes will vary):

(click here to view image)

Be sure that you're cutting the piece, and not just copying it. To cut something is basically the same as copying something, only the thing you're cutting will disappear instead of staying there. To cut, go to "Edit" >> "Cut", or CTR + X.

Now my original image looks like this:

(click here to view image)

Next, we will cut off the bottom part of the banner below the mini-ticker. Do the same thing, and remember to cut off a bit from the bottom of the ticker to insure the text is directly in the middle of the ticker space.

(click here to view image)

Now your original piece should look like this (sizes vary, remember):

(click here to view image)

Unless your mini-ticker space is extremely large (which I don't recommend), your piece should be about as skinny as what I have left.

Next, we'll cut the piece to the left of the ticker. Be sure that you cut off the ticker left border (if you have one) and a bit of space inward so the text will look nicer.

(click here to view image)

Now, do the same thing to the right side of the mini-ticker. Keep in note that it doesn't matter how small the space is. You have to cut it.

(click here to view image)

Now you should only have ONE strip left, and it's the exact area where the mini-ticker text will the rolling in. Cut it, too. You should have something like the below:

(click here to view image)

We now have saved all five of our pieces. (They should not be .psd files! I suggest .gif, .jpg, or .png.)

Close your original banner file. Don't save it, unless you want a big blank banner.

It's time to code it. The code in the textarea below contains the entire banner code. Be sure to change the capital text so it refers to your banner and change the dimensions, too!

Note that if your font size is too big to fit into your ticker piece, reduce it to about 10-11px. Or, put in the following code in your CSS. Remember to change the capital words!

And that's it for the table way! ^___^


-------Disclaimer-------
Eonlight Valley, all its content and graphics are unless stated otherwise (c) Kronakitty (kronakitty@gmail.com) 2005-2011. Official Pokemon contents and images are (c) Nintendo. This is only a fan site, and I do not claim ownership of Pokemon.

Important Note: Due to the webmistress's slacking in updating, some pages on this site may be out-of-date. ;_;