The Sidewinder Stacks are designed to create a horizontal accordion on your RapidWeaver page. The Sidewinder Stacks are relatively easy to use..... once you understand them!
These instructions assume that you’ve installed the Sidewinder Stacks in RapidWeaver. You will probably need to quit and re-launch RapidWeaver after the installation. (The Appendix has installation instructions. Go there now if you are unsure of the process)
Let’s walk through a typical setup. I’ve included a RapidWeaver demo project with this set of instructions. You can look at the finished product there.
The following instructions are for Sidewinder Original. Sidewinder2 instructions are lower on the page.
First you want to open a Stacks page. Then you’ll drag in the Sidewinder Stack. At this point, it looks like this: (see Image 1):
These instructions assume that you’ve installed the Sidewinder Stacks in RapidWeaver. You will probably need to quit and re-launch RapidWeaver after the installation. (The Appendix has installation instructions. Go there now if you are unsure of the process)
Let’s walk through a typical setup. I’ve included a RapidWeaver demo project with this set of instructions. You can look at the finished product there.
The following instructions are for Sidewinder Original. Sidewinder2 instructions are lower on the page.
First you want to open a Stacks page. Then you’ll drag in the Sidewinder Stack. At this point, it looks like this: (see Image 1):
Image 1
It is very important that you pay attention when setting up Sidewinder Original. Every panel in Sidewinder contains two parts: 1) A clickable TAB that triggers the effect and opens the panel and 2) a CONTENT area for the panel. In the image above, you can see that there are labels above every stacks field that explain what goes in them. The 1st is for Panel one’s Tab, the 2nd for Panel one’s content, the 3rd is for Panel two’s Tab and the 4th is for Panel two’s content, etc..........Both the TAB areas and the CONTENT areas will accept images, text, etc.
The number of empty stacks that will be available to you will depend on the number of panels you select in the Inspector (see Image 3) For each panel you select, a stack will be made available for a TAB and for CONTENT.
So, if you select 6 panels, 12 stack slots will be shown... 6 for TABS and 6 for CONTENT.
You only have access to the number of cells necessary to support the layout you choose.
EXAMPLE: You want to make a 4-panel Sidewinder with no text or image in the Tabs (just color). You would just place content (Stacks) in cells 2, 4, 6 and 8. If you later decided you needed images or text in the Tabs, you’d add them to cells 1, 3, 5 and 7.
Please study and understand this concept and you will have no problem using Sidewinder.
Ok, let’s get familiar with the Sidewinder interface (see Image 2):
Here are explanations of all the features you can customize in Sidewinder:
Image 2
1 No of Panels: This allows you to determine the total number of panels you want in your Sidewinder (3 to 10)
2 Viewable Width: This determines the content width (in pixels) of an open panel (a bit of trial and error necessary)
3 Pnl Open @ Start: Determines which Sidewinder panel will be open when the page loads. NOTE: 1 = 1st panel, 2 = 2nd panel, 3 = 3rd panel, etc.
4 Sidewinder Hgt: Overall height of the Sidewinder (in pixels)
5 Content Bg Color: Determines the background color behind content in an open Sidewinder panel.
6 Font Color: The color of your font inside your Sidewinder content area.
7 Content Corner Radius: Set the corner radius for the content area (not supported in IE browsers)
8 Tab Width: The width (in pixels) of the Tabs in Sidewinder.
9 Active Tab Color: The background color of the Tab for the open Sidewinder panel.
10 Inactive Tab Color: The background color of the Tab for closed Sidewinder panels.
11 Font Color: The color of the font inside your Sidewinder content.
12 Gap Btwn Panels: The gap (in pixels) between the Sidewinder panels (0 is not recommended since it makes all the adjacent closed Tabs look like one large block.)
Image 3
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!
Now I’ll show you how to have text in the tabs of your Sidewinder (Everything I’m explaining now is in the sample RapidWeaver project that came with your Sidewinder.... so you can cross-reference it if a concept is not clear)
I have dragged a text Stack into cell 1. This will be the title for my first Sidewinder panel. It looks something like this (see Image 4):
I have dragged a text Stack into cell 1. This will be the title for my first Sidewinder panel. It looks something like this (see Image 4):
Image 4
Image 5
This is a standard text stack. I will highlight all the text in it, hit delete to get rid of it and then add my own. I am going to have this tab read Tab1. In the text Stack I am going to type: T press return a press return b press return 1: This results in a text stack that looks like this (see Image 5):
Image 6
This can be further styled by highlighting it all and selecting “bold”, “Italics”, “Increase font size”, colors, etc. In the sample project I will make it bold and increase the font size a few sizes. (see Image 6)
Next I highlight all the text, select the “centered” layout in the bottom of the RapidWeaver user interface (or use RapidWeaver’s command Format > Centre. ....This is done from the top menu bar in RapidWeaver.....) and the tab’s text is centered!
(see Image 7)
Image 7
I checked how this looks in Preview in the sample project and my text is centered in the tab!! (see Image 8)
Image 8
Here’s a helpful Hint: If you are going to use text descriptions like this, work on just one and get it perfect. Then you can copy the “perfect” one to the other tab cells and just make quick adjustments to the actual text... the formatting is already done!
More Hot Sidewinder Tips and Hints
When you create your Sidewinder you need to be aware of the total width of the available space where you are working. The width of the Sidewinder is the sum of
(The viewable content width + (The tab width x number of tabs) + (Width of the gap between panels x number of tabs) + any Margins you have on the stack). I don’t expect anybody to do the calculations, just wanted to let you know there are a lot of items that contribute to the overall width. A bit of trial and error with the various settings will allow you to make things work.
HOT TIP: As each Sidewinder panel starts to close it expands just a bit to the right before closing. Watch closely and you may see this in action. You need to account for this and leave Sidewinder a little bit of “breathing room” on the right edge. If you make the overall Sidewinder width too large, content below the Sidewinder might shift when a Tab is activated. Notice in all my demos there is some room left to the right of Sidewinder. As with almost all RapidWeaver items, you are encouraged to try and view your site in as many browsers as possible to make sure it looks good.
You don’t actually have to place text or images into the TABS of Sidewinder. If you are satisfied with just having colored panels, You don’t have to drag any stack into the TABS fields... just set the colors in the Sidewinder Inspector!
Sidewinder2 Setup
Sidewinder 2 is set up exclusively for vertical text in the tabs. Sidewinder 2 will orient your text vertically automatically.
Here is what Sidewinder2 looks like when you first open it (Image 8)
Image 8
You will add your tab titles where indicated in green and your content will be dragged into the stacks areas indicated by the blue arrows.
I’m just going to make a sidewinder2 like the project in the original Sidewinder page... 5 panels, same width, same height, same color scheme.
The options available to you are almost identical as those in Sidewinder original. You have two extra items to set in Sidewinder2. You select the color and size of the font on the tabs.... and remember, the font in Sidewinder2’s tabs displays vertically automatically!
I’m just going to make a sidewinder2 like the project in the original Sidewinder page... 5 panels, same width, same height, same color scheme.
The options available to you are almost identical as those in Sidewinder original. You have two extra items to set in Sidewinder2. You select the color and size of the font on the tabs.... and remember, the font in Sidewinder2’s tabs displays vertically automatically!
2 Viewable Width: This determines the content width (in pixels) of an open panel (a bit of trial and error necessary)
3 Pnl Open @ Start: Determines which Sidewinder panel will be open when the page loads. NOTE: 1 = 1st panel, 2 = 2nd panel, 3 = 3rd panel, etc.
4 Sidewinder Hgt: Overall height of the Sidewinder (in pixels)
5 Content Bg Color: Determines the background color behind content in an open Sidewinder panel.
6 Font Color: The color of your font inside your Sidewinder content area.
7 Content Corner Radius: Set the corner radius for the content area (not supported in IE browsers)
8 Tab Width: The width (in pixels) of the Tabs in Sidewinder.
9 Active Tab Color: The background color of the Tab for the open Sidewinder panel.
10 Inactive Tab Color: The background color of the Tab for closed Sidewinder panels.
11 Tab Font Size: Set the size of the vertical tab font
12 Tab Font Color: The color of the vertical text in your tabs.
13 Tab Corner Radius: Set the corner radius for the tabs. (not supported in IE browsers)
14 Gap Btwn Panels: The gap (in pixels) between the Sidewinder panels (0 is not recommended since it makes all the adjacent closed Tabs look like one large block.)