The El Text-o Stack is designed to have animated text “fall” onto your page. The El Text-o Stack is easy to use.

Let’s walk through a typical setup. I’ve included a RapidWeaver demo project with the download of the stack You can look at the finished product there or view it as you read these instructions if something is not clear. One El Text-o per page!

I’ve chosen to place El text-o at the top of my page so it is the first thing people see when they visit the site. Hot Tip: El Text-o is probably not well-suited for a position very low on your page since the animation might have finished before your viewer scrolls down far enough to see it.

When you add an El text-o Stack, it will look something like this (Image 1)

The green shaded area in the image above is where you will input your text message for El Text-o to display. Clicking on the TEXT INPUT AREA will make that field editable like in Image 2.

Now that we’ve made the field editable, I want you to highlight all the text in the field and hit “delete” on your keyboard. This will make the editable field empty like in Image 3.

Now we are going to enter a line of text. this will be the first line to display in El Text-o. At the end of the first line, hit return and start the second line. repeat for all the lines necessary. You can see what I’ve inserted in Image 4.

Before we go any further, I want to issue this WARNING! El Text-o will NOT wrap the text for you from line to line. You need to enter each line to be displayed in El Text-o on its own line. The length of your line of text plus the size of the font selected plus the available width in the theme you choose will all determine what will fit on a line.

This input field only accepts text. You cannot style the text with HTML so don’t try. ALL styling of El text-o is done through the Inspector.

This would be a good time to explain a bit about the stack and the text effect. The text that initially falls onto your page is the color of the text you have selected for your RapidWeaver page (The content font color)

Once a line of text falls into place, there are three color changes that will take place before the effect is over. they happen in this order and you can change them in the HUD in this order.

The first color choice you will make is called “Final Text Color”. This is the color the text will be at the end of the transformation... when all the magic is completed.
The next color choice is the “Matching Text Color”. These are letters from a line of text that “match” a letter on the next line and will be reused by gliding into place instead of being discarded. (Tough to explain... just play with it) Letters that are used over and over from line to line will retain this color until the end of the effect.
The next color choice is called “Ghost Text Color”. This color is for letters that have fallen and been re-used one or more times but will NOT be used on the next line of text. Once a letter turns the ghost color, it will fall off the screen on the next transformation. (Again, just play with it and see for yourself.)

ATTENTION PLEASE READ AND UNDERSTAND: You will be selecting the three colors described (poorly) above. You must enter your choices for these numbers in RGB format. This is not difficult and I will walk you through an example now.




To the left (Image 5) is RapidWeaver’s color picker. Since the demo project I sent you has a purple color scheme, I’m going to select purple (grape) for my final color. You can see in image 5 that I’ve selected my color. Now, I need to know the RGB code for that color.

This is easy to do. I am going to click on the small slider icon in the color picker. (Image 6) You can see in Image 6 that I’ve selected the sliders (indicated by green box and arrow).




Once this is selected, a series of three numbers is displayed on the right of the color picker (see inside the orange oval) the numbers are 128 and 0 and 255. I need to put those numbers, separated by a comma, in that order, in the appropriate field in the inspector. So for my purple I’ll enter 128,0,255
Don’t add any spaces... Just three numbers with commas between them!



I chose a bright green for the Matching Text Color
0,255,0 and red for the Ghost Text Color 255,0,0

You can see how I have input those numbers in the HUD in Image 7.

It is necessary for the colors to be input this way to allow for the nice color fade/transitions. The input of your color choices will be the hardest part of the setup. The rest is not too tough. It’s time to look at the HUD in detail (Image 8)

Here’s a description of each item:
1) Overall Width: This is the width, in pixels, of the animation. We want it wide enough to hold our text but not wider than the area available to it in the theme. Play with the value until it just starts to clip the right edge of your text and then bump it up a bit. (I could have made this automatic but then it didn’t work in IE6, so, thanks Microsoft for making our lives harder!...... as usual.)
2) Line Delay: the amount of time (in milliseconds) that the line delays before adding the next line.
3) Letter Delay: the amount of time it takes each letter to fall into place.
4) Final Text Color: RGB values for the final text color.
5) Matching Text Color: RGB value for the matching text color.
6) Ghost Text Color: RGB value for the ghost text color.
7) Effect Height: You’ll notice that El Text-o has an empty space above it. This allows users to view the animation as the letters fall into place. You need to adjust the Height here to create the right amount of empty space “below” El Text-o. This is a trial and error adjustment and personal preference.
8) Font Size: Here is where you adjust El Text-o’s font size. Remember, I told you earlier that El Text-o will NOT wrap. Each line of text you input will be its own line. If it is too long, the extra letters will “pile up” on the left side. You have to either make the text smaller or the available width wider to compensate.
You cannot fit 10 pounds of potatoes into a 5 pound potato sack!
9) Check = Fade/Vanish: You can have your El Text-o content gently fade and slide out of site after it is fully displayed by checking this box. If you uncheck the box, you can ignore items 10 and 11 below.
10) Vanish duration: The time (ms) that it will take for your El Text-o to fade and slide up.
11) Check = Add JQuery. The JQuery is only necessary for the fading/sliding vanish. If you did not check the box in 9, leave this unchecked. Also, your theme may provide JQuery. Try the vanish without checking this first. If it doesn’t work, check this box.
12) OverallHeight*: You probably will not need to touch this. It should only be necessary to adjust if you have an exceptionally long El Text-o (many, many lines) to display. If you find that some of your lower lines are not displaying, adjust this value up. (Sorry, trial and error here.)

As explained earlier, the overall height and width were originally set automatically but everybody’s favorite browser, Internet Explorer 6, would not display El Text-o properly. Rather than exclude many old school browsers, El Presidente made the decision to make the height/width adjustments manual.

Thanks to Jonathan at Nimblehost for catching that IE6 issue and providing a fix.

Special thanks go out to Eric who has his own line of awesome Stacks at cosculture.com. Eric knows JQuery like nobody else I know. He is single-handedly responsible for adding the fade/vanish effect to El Text-o. We were chatting and I mentioned that I thought a slow vanish would be cool. He had me send him the file and in a matter of minutes he had sent it back and included the effect!

Remember, One El Text-o per page.

Do not select Tidied Output on your El Text-o page. (if you don’t know what that means then don’t worry, you’ll be fine!)

Have fun with El Text-o and send me examples of your work to put in the user gallery!

~El Presidente

BONUS! (Image 9) :

Stacks V1.3 includes the ability to have tool tips in the Stacks inspector.
El Presidente has included these for you. As you can see from the image at the right, when an input field is hovered over with the mouse pointer, a tooltip appears. This tip contains extra information to help explain what the user can change.

Thanks to Isaiah at Yourhead, creator of Stacks, for this awesome new feature!