The El CallBox-o Stack is designed to highlight and draw the reader’s eye to a small snippet of text, a quote or some other important concept on your web page. The El CallBox-o Stack is easy to use.


I think I'll start by introducing you to the HUD and that will make the rest of the instructions more relevant.

Here are the items you get to play with with the callBox:
1) Float checkbox: If the box is checked, your callBox will float right, otherwise, left.
2) Border width: Set the width of the colored border that surrounds your quote.
3) Border Color: Color of the outer border.
4) CallBox width: This allows you to size the CallBox’s width (100 px to 1,000 px). The height will adjust automatically based on the amount of text and the width you select.
5) Box Orientation: The default has the open parts of the box on top and bottom. Uncheck to have them on the left and right. (try it and see)
6) Inner border radius: change the curvature of the inside of the border. “0” is square.
7) Outer border Radius: same as above.
8) Background color: (default is white) Change this to match your page or to provide additional contrast to your page’s color.


That’s it! This is one of those Stacks that doesn’t require a long, drawn out manual. It’s relatively easy to use so just get in there and play with it. I’ll walk you through a quick demo page.

First you want to open a Stacks page.
For the demo I will drop El CallBox-o into Stacks and it looks something like this:

The area inside the shaded orange box is the upper text area. This will all display higher that our CallBox. The part in the shaded yellow box is the wrapping text area. This will act as a continuation of the text above it but will wrap around our callBox like text wraps around an image in a RapidWeaver page.

I’ll start by clicking in the upper text area and inserting some text:

Next I’ll click in the CallBox itself and add a short message. This is a styled text area so you can center things, change font colors, etc. You can see that I’ve centered my text and made it purple.




You can see that the CallBox defaults to a rounded corner but we’ll get a chance to customize that in a bit.

Next I’m just going to paste some gibberish text into the lower text area so you can see this at work:

Now it’s time for a quick Preview.

Ok, I’m going back to edit and am going to make the following changes:
• CallBox on right,
• Callbox color changed to blue to match the theme,
• All corners made square


I’ve pointed to the items I changed to make my adjustments. The align-right checkbox, border color picker, and inner and outer radius sliders set to “0”.

You can see all these changes taking place in Edit mode so you have a pretty good idea of what your preview will look like.

Now my page has an entirely different look:

El CallBox-o is just HTML and CSS. There is no javascript involved so it should play nice with any other Stacks on your page.


BONUS! :

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!